Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Mobile Web Design : Menu

From Wiki
Jump to: navigation, search
mayankkedia (Talk | contribs)
(New page: Category:Mobile_Design Category:Mobile_Web_Design This design pattern is part of the Mobile Web Design series. == Introduction == The menu layout...)
 
mayankkedia (Talk | contribs)
m (Added hyperlink)
Line 76: Line 76:
 
[http://www.dynamicdrive.com/dynamicindex1/slashdot.htm Dynamic Drive]
 
[http://www.dynamicdrive.com/dynamicindex1/slashdot.htm Dynamic Drive]
  
==Links==
+
==Accordion Menu==
 +
 
 +
Additional details on accordion menu can be had from:
  
 
[[Mobile Design Pattern: Accordion Menu]]
 
[[Mobile Design Pattern: Accordion Menu]]
 +
 +
==Teaser Menu==
 +
 +
Additional details on teaser menu can be had from:
  
 
[[Mobile Design Pattern: Teaser Menu]]
 
[[Mobile Design Pattern: Teaser Menu]]
  
 
<b>--- Added by Mayank on 29/06/2009 ---</b>
 
<b>--- Added by Mayank on 29/06/2009 ---</b>

Revision as of 10:05, 29 June 2009


This design pattern is part of the Mobile Web Design series.

Contents

Introduction

The menu layout on a web page plays an important role in the overall user interface layout. The menu pattern used should be in sync with the display constrains of the device, and depending upon the context, the menu layout should be used.

In this article we will discuss a couple of menu patterns which could be useful for designing mobile web pages:-

Overlay Menu

A menu which gets displayed at the location where the user presses the touch screen. Once the user selects a particular item from the menu or pressing the touch screen again, the menu goes away, allowing the user to browse the website normally.

Overlay Menu In Image
Overlay menu 1.JPG

Overlay Menu In Image
Overlay menu 2.JPG

Use when

When the overall navigation pattern of the site is not complex and the level of menu items is not nested, this menu pattern can be used to give the site a jazzy look so to speak.

This menu pattern also makes a lot of sense in cases of a product catalogue, map locator kind of websites, where depending upon the position at which the pointer has been clicked, the menu can be popped up pertaining to the specific item that is present at those co-ordinates. Say in case of an apparel website, the user can chose from a variety of offerings like tuxedo, jeans, trousers etc, depending on the pointer click location, the menu popped up can have specific information regarding tuxedos for example and so on.

Limitations

Some of the limitations/drawbacks of this menu pattern are:-

  1. Not very user friendly in case of non touch screen devices as the user might find it tough to position the click event at the exact co-ordinates.
  2. The navigation through the drop down kind of menu that pops up in place might be a slightly cumbersome task for the end user.
  3. The in place menu might block the information being displayed below the pop-out menu causing usability concerns.

Retractable Menu

A menu which expands/collapses depending upon on the user click is available to be accessed again at a later point in time. This menu makes a lot of sense where the display area is limited and the user wants to use that to view the remainder of the webpage.

Use when

Where the display area is limited, but at the same times the user wants to be able to use the menu options as and when they require. When the user presses the retractable menu it either expands horizontally or vertically depending on the design of the webpage and the amount of information tat needs to be displayed.

Retractable menu in image
Retractable menu 1.JPG

Retractable menu in image
Retractable menu 2.JPG

More details on this menu pattern can be had from:

Dynamic Drive

Accordion Menu

Additional details on accordion menu can be had from:

Mobile Design Pattern: Accordion Menu

Teaser Menu

Additional details on teaser menu can be had from:

Mobile Design Pattern: Teaser Menu

--- Added by Mayank on 29/06/2009 ---

81 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×