Mobile Design Pattern: Accordion Menu
Article Metadata
This design pattern is part of the Mobile Web Design series.
Contents |
Introduction
Web pages continue to pack in more features and information with richer user interface and enhanced usability experience. However designing web pages for mobile phone continues to be a tricky business especially because of the limited display space available for the web page to be shown. Hence it is very important to ensure that the web designer makes optimum use of the space available to them, so that the user interface continues to look nice and remains easy to use.
Navigation and menu layout is a crucial component of any mobile page, where they remain the primary method of user interaction. The menu should not take too much space on the display and yet provide the user with what they are looking for. One such menu pattern optimized for display space considerations is accordion menu
Accordion menu is a form of menu where the options are stacked either vertically or horizontally, and the item in focus/when clicked opens up displaying the sub-menu options related to the main menu item. The other menu items on the main menu are displayed in a collapsed fashion. This kind of menu provides the user the benefit of being able to navigate quickly to the sub-menu items, as well as the option of going back to the main menu faster as well. The accordion thereby makes good use of the display space available to the user without compromising on the ease of use and look/feel aspect of the web page.
|
Vertical Accordion Menu |
Vertical Accordion Menu |
|
Horizontal Accordion Menu |
|
Horizontal Accordion Menu |
Image Courtesy : http://www.jasonreedwebdesign.com/
Use when
The accordion menu can be possibly used in the following cases:-
- When there are more than 2-3 main sections each with sub-sections to display to the user.
- When from a user’s point of view it makes sense to be displaying the selected item more prominently, for instance a list of FAQ’s where the currently selected item should expand to show the details while the others continue to be listed without taking too much space.
- When you want the benefit of a sidebar kind of menu and are yet constrained by space considerations.
- When the numbers of main sections/menu option are not too large i.e. more then 12-15, and the sub-menu options are also limited ideally to 1-2 level of navigation. In case the navigation level exceeds 2-3, you might consider using a navigation tree pattern.
How to use them
Accordions can be both vertical and horizontal. The vertical accordion is used primarily when the intention is to display sub-menu/panels for the main menu, and the content length is not too big. The horizontal variant of it is used when the display content is large and would not fit into the sidebar menu space available.
Some ways of creating an accordion menu have been discussed at the following links:-
How to Use Accordion in WRT widget?
Some ways of enhancing the user experience while using the accordion menu are:-
- Provide some sort of animation while expanding the accordion, giving the user a sense of what is happening.
- Provide a highlighted main menu heading/label so that the user knows that’s the menu for which the items have been detailed below.
- Provide an icon/indication to let the user know that the main menu can expand, something like a ‘+’ sign in case of vertical menus or an arrow in case of horizontal menus.
|
Use of icon to denote status to user |
Use of icon to denote status to user |
- Make sure that the user can control the accordion with using the up/down navigation keys available on the device.
- Size the accordion to allow showing the entire content, truncating the text is not a good idea most of the times.
This article provides an excellent thorough discussion of the use of accordion menus in mobile web applications. Accordian menus allow users to expand and collapse different sections of a hierarchy of options. Accordian menus have been successfully used in various applications in the past, including Windows XP. The article thoroughly motivates why and when to use accordian menus. Accordian menus can be especially useful in mobile applications, where screen space is limited, as they allow a wide array of options to be organised into a compact user interface control. The article also discusses the difference between accordian menus and collapsable tree controls. Accordian menus are better suited to flatter hierarchies, whereas tree controls are better suited to hierarchies containing more than 2 or 3 levels.
The article also provides some useful suggestions for maximizing the usability of accordions and ensuring a pleasant user experience. These include the use of animation, highlighting and icons which clearly show which sub-sections can be expanded and/or collapsed.
--Larry101 17:57, 19 September 2009 (UTC)