Mobile Web Design : Menu

From Forum Nokia Wiki

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

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

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:-

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.

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