Mobile Design Pattern: Drop-down menu
Article Metadata
This design pattern is part of the Mobile Design Patterns series.
Contents |
Description
A form of contextual menu allowing selection of (only) one item from a list. Drop-down menus get their name from the common desktop usage in which the list displays downwards into the view.
Figure: A typical drop-down menu within the desktop environment.
Advantages
- Saves valuable space on small screens.
Disadvantages
- Can suffer from poor usability and discoverability.
Use when
Drop down menus should be used cautiously on mobile devices. Unlike contextual or ‘Options’ menu which typically gain full focus when activated, drop-down menus may merely open within the view. This can cause several problems:
- The menu may obstruct relevant controls and/or the original control that prompted the menu.
- Unlike contextual menus (ex. Options menus) which take primary focus within the view, it may be unclear how to close the menu if no selection is being made.
- As the menu may not have full focus, users may attempt to interact with the items ‘underneath’ it. This may be particularly likely on touch devices.
- If the list of options within the menu is long, there may not be enough vertical space to display all options and the user may therefore have to scroll. On touch devices, scrolling may be particularly difficult as the scroll bar may be too small to properly grasp.
Note: Hybrid drop-down menus are beginning to appear within native applications. These resemble a drop down but take primary focus within the view so their behaviour is closer to that of a contextual menu. In all cases, the design and implementation should be carefully optimized to minimize confusion regarding expected behaviour and manipulation models. If the menu behaves too much like a contextual menu, the drop-down analogy may no longer be suitable.
Use how
Native applications, Flash Lite
Use within native or Flash Lite applications is not recommended unless the design and implementation are carefully optimized to minimize scrolling and unexpected behaviours. Where possible, consider using a standard contextual menu instead.
Figure: Nokia Messaging uses two drop-down menus. One to provide access to mailboxes and the other to filter the list. The drop-down menus are short, do not require scrolling and the text labels are equally short and familiar. If the user does not make a selection, the right softkey can be used to close the menu.
Figure: Yahoo Go has created a custom drop down menu whose menu pane slides upwards as you scroll. This unusual approach enables the menu to remain usable despite its position at the very bottom of the view.
HTML
Within the S60 and S40 browsers, HTML pull-down (i.e. <select>) menus do not open directly within the browser. Instead, a native selection query is launched which allows full scrolling of the menu and comfortable selection of a list item.
Figure: A native HTML selection menu is automatically converted to a native selection query.
Design Tips
- Use a down arrow or other familiar indicator to assist users in anticipating what will happen when they click on this control.
- Keep the list of options short to avoid scrolling within the menu itself.
- Use high-contrast highlights to ensure the focussed list item is easily discernable.
- If possible, use this type of menu for lists of items which are familiar to the user, or where the sequence of items (alphabetical, numerical or chronological), will provide visual waypoints should scrolling be unavoidable.
- Avoid using these menus to display user-generated or otherwise unknown dynamic data whose length cannot be controlled and may therefore truncate unpredictably.
- Multi-level drop-downs (i.e. those that spawn sub-menus) should be avoided, as they can further decrease the usability of this control.
28 Sep
2009
Menu is basic UserInterface element for the user to effectively interact with the mobile device. This article provides an introduction to the Drop-down Menu, which is widely used in mobile devices from any other Menu type.
The article provides a quick introduction to the Drop-down Menu with their benefits and drawbacks and also provides some very useful guidelines for designing and applying in our application. This article can be useful to beginners for understanding the concept and understanding how to use it in an application.