Mobile Design Pattern: Accordion Menu

From Forum Nokia Wiki

Reviewer Approved

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

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

What is an 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

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

Iphone Style Accordion Menu

Dynamic Drive

Glossy Accordion Menu

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