×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Web Design : Menu

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix wiki text)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(One intermediate revision by one user not shown)
Line 1: Line 1:
[[Category:Mobile Design]][[Category:Mobile Web Design]]
+
[[Category:Mobile Web Design]]
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 84: Line 84:
  
 
[[Mobile Design Pattern: Teaser Menu]]
 
[[Mobile Design Pattern: Teaser Menu]]
 
==Icon Menu==
 
 
Additional details on icon menu can be had from:
 
 
[[Icon Menu]]
 
  
 
==Resources==
 
==Resources==

Latest revision as of 06:29, 9 May 2012

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


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

Contents

[edit] Introduction

The menu layout on a web page plays an important role in the overall user interface layout. The menu pattern used should be in sync with the display constrains of the device, and depending upon the context, the menu layout should be used.

In this article we will discuss a couple of menu patterns which could be useful for designing mobile web pages:-

[edit] Overlay Menu

A menu which gets displayed at the location where the user presses the touch screen. Once the user selects a particular item from the menu or pressing the touch screen again, the menu goes away, allowing the user to browse the website normally.

Overlay Menu In Image
Overlay Menu In Image

[edit] Use when

When the overall navigation pattern of the site is not complex and the level of menu items is not nested, this menu pattern can be used to give the site a jazzy look so to speak.

This menu pattern also makes a lot of sense in cases of a product catalogue, map locator kind of websites, where depending upon the position at which the pointer has been clicked, the menu can be popped up pertaining to the specific item that is present at those co-ordinates. Say in case of an apparel website, the user can chose from a variety of offerings like tuxedo, jeans, trousers etc, depending on the pointer click location, the menu popped up can have specific information regarding tuxedos for example and so on.

[edit] Limitations

Some of the limitations/drawbacks of this menu pattern are:-

  1. Not very user friendly in case of non touch screen devices as the user might find it tough to position the click event at the exact co-ordinates.
  2. The navigation through the drop down kind of menu that pops up in place might be a slightly cumbersome task for the end user.
  3. The in place menu might block the information being displayed below the pop-out menu causing usability concerns.

[edit] Retractable Menu

A menu which expands/collapses depending upon on the user click is available to be accessed again at a later point in time. This menu makes a lot of sense where the display area is limited and the user wants to use that to view the remainder of the webpage.

[edit] Use when

Where the display area is limited, but at the same times the user wants to be able to use the menu options as and when they require. When the user presses the retractable menu it either expands horizontally or vertically depending on the design of the webpage and the amount of information tat needs to be displayed.

Retractable menu in image
Retractable menu in image

Retractable menu 10.JPG

More details on this menu pattern can be had from:

Dynamic Drive

[edit] Accordion Menu

Additional details on accordion menu can be had from:

Mobile Design Pattern: Accordion Menu

[edit] Teaser Menu

Additional details on teaser menu can be had from:

Mobile Design Pattern: Teaser Menu

[edit] Resources

Dynamic Drive

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

This page was last modified on 9 May 2012, at 06:29.
86 page views in the last 30 days.
×