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.
Mobile Web Design : Menu
This design pattern is part of the Mobile Web Design series.
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:-
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.
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.
Some of the limitations/drawbacks of this menu pattern are:-
- 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.
- The navigation through the drop down kind of menu that pops up in place might be a slightly cumbersome task for the end user.
- The in place menu might block the information being displayed below the pop-out menu causing usability concerns.
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.
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.
More details on this menu pattern can be had from:
Additional details on accordion menu can be had from:
Additional details on teaser menu can be had from:
Additional details on icon menu can be had from:
--- Added by Mayank on 29/06/2009 ---