×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: Teaser Menu

From Nokia Developer Wiki
Jump to: navigation, search
mayankkedia (Talk | contribs)
m (Added hyperlink)
hamishwillee (Talk | contribs)
m (Hamishwillee - - Links: - delete link to deleted article)
 
(8 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
{{ArticleMetaData <!-- v1.1 -->
[[Category:Mobile_Web_Design]]
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090629
 +
|author= [[User:Mayankkedia]]
 +
}}
  
This design pattern is part of the [[:Category:Mobile Web Design Patterns|Mobile Web Design Patterns]] series.
+
 
 +
[[Category:Mobile Web]]
 +
[[Category:Mobile Web Design]]
 +
[[Category:Mobile Design Patterns]]
 +
 
 +
This design pattern is part of the [[:Category:Mobile Web Design|Mobile Web Design]] series.
  
 
== Introduction ==
 
== Introduction ==
Line 60: Line 86:
 
</table>
 
</table>
  
*<b>Provide some sort of navigation mechanism to go back to the main menu from the teaser menu if the user wishes to do so.</b>
+
*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.
 +
 
  
*<b>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.</b>
 
 
<table>
 
<table>
 
<tr>
 
<tr>
Line 72: Line 100:
 
</table>
 
</table>
  
 +
==Links==
  
<b>--- Added by Mayank on 29/06/2009 ---</b>
+
* [[Mobile Web Design : Menu]]
 +
* [[Mobile Design Pattern: Accordion Menu]]

Latest revision as of 05:17, 8 May 2012

Article Metadata
Article
Created: mayankkedia (29 Jun 2009)
Last edited: hamishwillee (08 May 2012)

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

Contents

[edit] 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

[edit] 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

[edit] 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.


[edit] 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

[edit] Links

This page was last modified on 8 May 2012, at 05:17.
121 page views in the last 30 days.
×