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)

Lengthy Display Results

From Wiki
Jump to: navigation, search
Nokia Ron (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]][[Category:Usability]]
+
{{ArticleMetaData <!-- v1.2 -->
'''Original article published at [http://patterns.littlespringsdesign.com/index.php/Returned_Results Little Spring Design]  under [http://creativecommons.org/licenses/by/3.0/ Attibuttion 3.0]'''
+
|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 -->
 +
|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= 20091019
 +
|author= [[User:Aadhar14b]]
 +
}}
 +
'''Original article published at [http://www.littlespringsdesign.com/blog/2006/Nov/design-pattern-of-the-week-returned-results/  Little Spring Design]  under [http://creativecommons.org/licenses/by/3.0/ Attibuttion 3.0]'''
  
 
<br>
 
<br>
Line 24: Line 45:
 
With no delay in fetching the next page, keeping the display limited to just the current screen eliminates the need for scrolling at all. Next and previous controls at the top of the screen allow quick navigation
 
With no delay in fetching the next page, keeping the display limited to just the current screen eliminates the need for scrolling at all. Next and previous controls at the top of the screen allow quick navigation
  
[[Image:Search.png]]<BR>
+
[[File:Search.png]]<BR>
  
 
===Design Consideration===
 
===Design Consideration===
Line 34: Line 55:
 
<BR>
 
<BR>
 
----
 
----
--Submitted by - Aadhar14b
+
--Submitted by - Aadhar14b[[Category:Usability]]

Latest revision as of 03:42, 9 May 2012

Article Metadata
Article
Created: User:Aadhar14b (19 Oct 2009)
Last edited: hamishwillee (09 May 2012)

Original article published at Little Spring Design under Attibuttion 3.0


Contents

[edit] Introduction

A common question in front of Mobile Designers is , "how many items should be displayed on the screen?" For older browsers, the maximum page size limited things closely.But many current browsers are capable of displaying entire desktop web pages on a mobile screen. The point to be considered is, the balance between scrolling for more results and fetching them.

[edit] Design

[edit] A) Web pages without scripting

The optimal length for the number of items displayed from a longer list depends especially on the time to refresh the list. Limit the list to a maximum of two to three screens of results based on the current distribution of screen sizes. Place controls to navigate to the next screen at the bottom of the list.

[edit] Rationale

A network request introduces a delay.

[edit] B) Web pages with scripting

Use scripting (AJAX) to achieve the same user experience as applications, above. Keep both the next and previous set of results in memory, displayable with no delay.

[edit] Rationale

With no delay in fetching the next page, keeping the display limited to just the current screen eliminates the need for scrolling at all. Next and previous controls at the top of the screen allow quick navigation

Search.png

[edit] Design Consideration

  • There are two relevant costs to the user associated with navigating lists: scrolling through lists, and navigating between pages.
  • The Next/Previous method of navigating between pages is well understood amongst Internet users, so the cognitive cost of using it is quite low.
  • If the Next button has focus when the screen is drawn (either by it being the first control or by manipulating focus, depending on the platform), then a single key-press will get the user to the next page.
  • If there is a fetch delay, then scrolling will have some advantages over many fetches.The list is limited to approximately the size that will avoid the user being lost on a very long page.

    --Submitted by - Aadhar14b
This page was last modified on 9 May 2012, at 03:42.
78 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.

×