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:06, 16 April 2012 by hamishwillee (Talk | contribs)

Mobile Design Pattern: Teaser Menu

From Wiki
Jump to: navigation, search
Article Metadata
Created: mayankkedia (29 Jun 2009)
Last edited: hamishwillee (16 Apr 2012)

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



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

What 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 3.JPG

Teaser Menu Example
Teaser menu 1.JPG

Use when

The teaser menu can be possibly used in the following cases:-

  1. When there is more content to be displayed then it is possible on the main screen.
  2. 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
Teaser menu 4.JPG

  • 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
Teaser menu 2.JPG


Icon Menu

Mobile Web Design : Menu

Mobile Design Pattern: Accordion Menu

--- Added by Mayank on 29/06/2009 ---

58 page views in the last 30 days.