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. Thanks for all your past and future contributions.

Revision as of 06:58, 16 May 2009 by croozeus (Talk | contribs)

Mobile Design Pattern: Menu

From Wiki
Jump to: navigation, search

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



A menu is a list of frequently used commands presented to a user for his interaction with the device. In other words, a menu is a catalog of the frequently used applications or application options on a mobile device. An effective menu is not only easy to understand and use but also well organized to efficiently serve its purpose. Also, a menu should be designed keeping in mind that it occupies optimum screen space.


The generation of menu interfaces on the mobile devices have been inspired from the PC apparently. The menu interfaces on the PC have undergone vast changes and offer a variety of options for the comfort of the end-user.


A wide variety of menu interface designs exist for the mobile devices as well. They have been classified as under.

Conventional Menu

N810 Menu.gif

The Conventional menus have a tree-branch hierarchy. The conventional menus are used when the items have many sub-menus. Though easy to understand and use (as they are derived from the windows start menu) such menus generally occupy much screen space and thus are only used in devices with higher resolution for e.g. Nokia Tablet devices.

There are some 3rd party applications which provide such interface on S60 devices too, shown in screenshots.

S60StartMenu.jpg StartMenuS603rd.png

Grid Menu

GridMenu.gif Speeddial Menu.gif

The conventional menu interface for default menu in S60 devices is the Grid menu. A series of list items are arranged in one or more horizontal rows and/or vertical columns to form a grid menu.

  • Utilizing the angles in a grid menu for better presentation of the menu items makes the design more compelling. For e.g. in the screenshot below, the angular tilt is used for a better effect.

Nokia Photo browser.jpg

A grid menu can be made more attractive by illustrative boundaries or animated focus around the selected item, appropriate spacing between the items and using an attractive background for the menu.

List Menu


A list menu is often used as a substitute for a grid menu when the numbers of items is more. Some users prefer the list menu to the grid menu, hence the type is kept customizable, in many cases.

  • A Grid menu can be more customizable than a list menu as angle tilts and animations are not feasible in a list menu.

Standby Menu

StandbyMenu.gif N97 Menu.jpg Standbymenu 3rdapp.png

To get quick access to the most frequently used applications a menu appears on the active standby screen. The items of this grid-like menu are user-customizable as the frequently used application may differ from person to person. This menu is only shown when the active standby screen is enabled from the Settings->General->Personalization->Standby Mode, in the device.

Game Menu

NGage Menu.gif Asphalt3ngagetitle.jpg

As the name suggests, such menu is predominantly used in games and gaming applications like N-Gage. The menu has a simple list of options available to navigate, which are animated to give an interactive experience. The Game menu can be made compelling by using background relevant to the theme of the game (for e.g. road in a racing game, as shown in the screenshot). Also, sound effects might be triggered on selection/toggling of items on the menu, to have a better appeal.

Taskbar Menu


The applications which are currently in use are displayed on the task bar. The user can switch to an application using the task bar menu. An application may also be terminated from this menu by using the delete (c) key when the application is selected. The menu also shows a scroll bar to indicate the items present on the task bar.

Carousel Menu


Items are arranged in the form of a merry-go-round. The items undergo circular sequence on interaction by the user. The selected item is generally magnified for focus. Animations are also used in the carousel menu when transition takes place from one focused element to the other.

Fly-out Menu

Camera.gif Flyoutmenu browser.jpg

Such a menu is used when very less screen space is available to provide navigation options. When the key is pressed the fly-out menu appears on the right side of the screen when using the camera application on Nokia N95. Similarly, when the middle key is pressed (long) while the S60 browser application is in use, a fly-out menu is shown which shows many frequent navigation options. The items may have a short tag or a tip indicating the function of the list.

--Submitted by croozeus 11:52, 14 May 2009 (EEST)

65 page views in the last 30 days.