Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Mobile Design Pattern: Repeated Menu

From Wiki
Jump to: navigation, search
nirpsis (Talk | contribs)
(Review logo)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata)
 
(3 intermediate revisions by one user not shown)
Line 1: Line 1:
{{ReviewerApproved}}
+
{{ArticleMetaData <!-- v1.2 -->
[[Category:Mobile_Design]]
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
[[Category:Mobile_Design_Patterns]]
+
|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/ Nokia Qt SDK 1.1]) -->
 +
|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 -->
 +
|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= 20090511
 +
|author= [[User:Croozeus]]
 +
}}
 +
 
 +
[[Category:Mobile Design Patterns]]
  
  
Line 14: Line 35:
 
Sophisticated mobile optimized are webpages built so that the whole web page can be accommodated in one screen itself. However, many times, the webpage is long to be displayed in a single screen as shown in screenshots.
 
Sophisticated mobile optimized are webpages built so that the whole web page can be accommodated in one screen itself. However, many times, the webpage is long to be displayed in a single screen as shown in screenshots.
  
[[Image:Long webpages.jpg|500x400px]]
+
[[File:Long webpages.jpg|500x400px]]
  
 
In such circumstances, the user needs to scroll down to see the complete content of the website. To provide the user the flexibility - not to scroll back to the top again, but to access navigation links from the bottom of the page, Repeated menu is worth using.
 
In such circumstances, the user needs to scroll down to see the complete content of the website. To provide the user the flexibility - not to scroll back to the top again, but to access navigation links from the bottom of the page, Repeated menu is worth using.
  
[[Image:Pdamobile.jpg]]
+
[[File:Pdamobile.jpg]]
  
 
==Use how==
 
==Use how==
Line 24: Line 45:
 
Since this is not a primary navigation component, but only a simple component to enhance end user experience, it can be simple links in a line. Generally these lines are separated by "|" as shown below.
 
Since this is not a primary navigation component, but only a simple component to enhance end user experience, it can be simple links in a line. Generally these lines are separated by "|" as shown below.
  
[[Image:Repeated Menu3.jpg]]
+
[[File:Repeated Menu3.jpg]]
  
 
Some mobile optimized website do have a repeated menu in the form of vertical links as shown in screenshot below. A class of designers (particularly mobile designers) prefer the vertical repeated menus because user can access them while scrolling and do not need to switch to other arrow key.
 
Some mobile optimized website do have a repeated menu in the form of vertical links as shown in screenshot below. A class of designers (particularly mobile designers) prefer the vertical repeated menus because user can access them while scrolling and do not need to switch to other arrow key.
  
[[Image:Vertical Repeated menus.jpg|600x542px]]
+
[[File:Vertical Repeated menus.jpg|600x542px]]
  
 
==Exceptions==
 
==Exceptions==
Line 34: Line 55:
 
* While repeated menus add to the usability of the website, so designers might want to avoid it. The repeated menu can be avoided and instead a "Back to top" button can be used. By clicking this button the use can jump to the top of the page where navigation options are ready available and accessible.  
 
* While repeated menus add to the usability of the website, so designers might want to avoid it. The repeated menu can be avoided and instead a "Back to top" button can be used. By clicking this button the use can jump to the top of the page where navigation options are ready available and accessible.  
  
[[Image:Back to Top.jpg|700x350px]]
+
[[File:Back to Top.jpg|700x350px]]
  
 
==Design tips==
 
==Design tips==
Line 40: Line 61:
 
* Sometimes, it may be a helpful and attractive to have a repeated menu in the form of image icons. The graphics of the icon may indicate the nature of the target page. Also, a short description may pop-up when the icon has focus.
 
* Sometimes, it may be a helpful and attractive to have a repeated menu in the form of image icons. The graphics of the icon may indicate the nature of the target page. Also, a short description may pop-up when the icon has focus.
 
<br>
 
<br>
[[Image:Repeated Menu Icons.jpg|350x250px]]
+
[[File:Repeated Menu Icons.jpg|350x250px]]
 
----
 
----
  

Latest revision as of 05:34, 27 September 2012

Article Metadata
Article
Created: croozeus (11 May 2009)
Last edited: hamishwillee (27 Sep 2012)


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

Contents

[edit] Description

List of main navigation links at the bottom of the page, as shown in the screenshots below, is called a Repeated Menu.

[edit] Use when

Sophisticated mobile optimized are webpages built so that the whole web page can be accommodated in one screen itself. However, many times, the webpage is long to be displayed in a single screen as shown in screenshots.

Long webpages.jpg

In such circumstances, the user needs to scroll down to see the complete content of the website. To provide the user the flexibility - not to scroll back to the top again, but to access navigation links from the bottom of the page, Repeated menu is worth using.

Pdamobile.jpg

[edit] Use how

Since this is not a primary navigation component, but only a simple component to enhance end user experience, it can be simple links in a line. Generally these lines are separated by "|" as shown below.

Repeated Menu3.jpg

Some mobile optimized website do have a repeated menu in the form of vertical links as shown in screenshot below. A class of designers (particularly mobile designers) prefer the vertical repeated menus because user can access them while scrolling and do not need to switch to other arrow key.

Vertical Repeated menus.jpg

[edit] Exceptions

  • While repeated menus add to the usability of the website, so designers might want to avoid it. The repeated menu can be avoided and instead a "Back to top" button can be used. By clicking this button the use can jump to the top of the page where navigation options are ready available and accessible.

Back to Top.jpg

[edit] Design tips

  • Sometimes, it may be a helpful and attractive to have a repeated menu in the form of image icons. The graphics of the icon may indicate the nature of the target page. Also, a short description may pop-up when the icon has focus.


Repeated Menu Icons.jpg


--Submitted by croozeus 01:18, 12 May 2009 (EEST)

  • croozeus
This page was last modified on 27 September 2012, at 05:34.
65 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×