Mobile Design Pattern: Teaser Menu
Article Metadata
This design pattern is part of the Mobile Web Design series.
Contents |
Introduction
While designing web pages with lot of content, the space constraints pose a big challenge to the designer, as they want to show all/most of the content, yet are not able to do so. In such cases it is important to design the web page in such a way that the most important/relevant content gets displayed on the main page, while there is some mechanism of letting the user know that there is additional content available which they can view if they wish to.
The menu pattern used to achieve the above mentioned requirement is a teaser menu
A teaser menu is a form of menu where you show partial contents to the user letting them know at the same time that there is additional content available if the user so wishes to view them. The user can then click on the teaser menu link to get the secondary information which is not shown on the main page due to space constraints.
The teaser menu much like the name suggests is used to arouse hope, desire, or curiosity without satisfying them, thereby making the user interested in the contents without fully displaying them.
|
Teaser Menu In Image |
|
Teaser Menu Example |
Use when
The teaser menu can be possibly used in the following cases:-
- When there is more content to be displayed then it is possible on the main screen.
- The additional information can be segregated as secondary/less important information from an overall relevance perspective.
How to use them
Teaser menus can be both vertical and horizontal. The vertical teaser is used primarily when the intention is to display additional options belonging to the sidebar styled main menu, and the vertical space is limited. The horizontal variant of it is used when the menu items have sub-menu items to be displayed, and the space is used by other content not belonging to the sidebar menu display area.
Some ways of enhancing the user experience while using the accordion menu are:-
- Ensure that the teaser menu is clearly visible as sometimes they might miss the user’s attention.
|
Prominently displayed teaser menu Example |
- Provide some sort of navigation mechanism to go back to the main menu from the teaser menu if the user wishes to do so.
- Provide a catchy icon/indication to let the user know about the teaser menu. Sometimes the use of a blinking icon/gif file is also a good idea. One can also look at using different color combinations etc to make the teaser stand out from the other items.
|
Teaser Menu Indicated with + sign |
Level: Basic
Sometimes, it's very important to design the web page in such a way that important information or content displayed on main page. Especially, teaser menu pattern is used mainly for this purpose. A teaser menu shows a menu with expand capabilities.
The author has demonstrated this design pattern with the number of attractive and understandable screenshots. The author has given step by step instructions for teaser menu designing pattern.
The author has explained why and when to use the teaser menu. He has also described the various kinds of teaser menu like vertical teaser menu which is used to display additional options and horizontal teaser menu which is used to display sub menu items. This article also provides some ways of enhancing the user experience with suitable screenshots..
This is a very nice article for users as well as designers who focuses on various menu interface design.
nirpsis 18:08, 21 September 2009 (UTC)