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: Paging

From Wiki
Jump to: navigation, search
croozeus (Talk | contribs)
m
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Mobile_Design]]
+
{{ArticleMetaData <!-- v1.1 -->
[[Category:Mobile_Design_Patterns]]
+
|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= 20090511
 +
|author= [[User:Croozeus]]
 +
}}
 +
 
 +
 
 +
[[Category:Mobile Design Patterns]]
  
  

Latest revision as of 06:06, 16 April 2012

Article Metadata
Article
Created: croozeus (11 May 2009)
Last edited: hamishwillee (16 Apr 2012)


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

Contents

[edit] Description

A systematic technique of arranging content of a long page over a number of numbered webpages is known as Paging.

[edit] Advantage

  • Gives the users advance information of the quantity of the content.

[edit] Use when

Many times the content of the page is too long, ever-scrollable in other words. The users need to look for something specific in a huge list of items. For example, search results, available jobs, shopping items, etc were there are numerous results available . To avoid the user ever scrolling in such conditions the content is systematically classified according to relevance, name, type, price, etc. and presented to the user in the form of multiple webpages.

[edit] Use how

As shown in the below screenshots, only part of the results are provided on the current webpage. The navigation links to the other lists of results or next pages are located at the top and/or bottom of the page. It is generally a practice to provide these navigation links both at the top and bottom of the webpage for the convenience of the user.

Paging.jpg

Depending upon the number of other results available, the navigation links are numbered. For example when the results are very large the links are available for "1-10" pages, while when the results are comparatively low less number of navigation links are shown. Ref fig.


The navigation links are generally page numbers, as shown in the above screenshots. However, when mobilizing a website - due to less screen resolution resulting in less space - the page numbers tend to be very small. A special design which has links "Show next 10 results" and "Show previous 10 results" may be used.

Google Paging.jpg YouTube Paging.jpg

[edit] Design Tips

  • As per the availability of screen space and the size and style of fonts used the navigation buttons may be sometime appear to small. An alternate is using buttons which link to proper navigation links.
  • A scroll bar (with a Go button) with navigation links may also be used instead of all visible number links. This may be helpful when the screen space available is small.

Paging Flicker blogs FN.jpg


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

  • croozeus
This page was last modified on 16 April 2012, at 06:06.
74 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.

×