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: Live Scrolling

From Wiki
Jump to: navigation, search
jappit (Talk | contribs)
(Live Scrolling Design Pattern, also known as Continuous or Infinite Scrolling)
 
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(4 intermediate revisions by 3 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= 20090612
 +
|author= [[User:Jappit]]
 +
}}
 +
 
 +
 
 +
[[Category:Mobile Design Patterns]]
  
 
==Description==
 
==Description==
Line 16: Line 40:
 
==Advantages==
 
==Advantages==
 
* '''User interaction is more intuitive and fast''', since the user does not need to press any buttons to see the next available items
 
* '''User interaction is more intuitive and fast''', since the user does not need to press any buttons to see the next available items
 +
* '''While a new set of data is loading, the user can continue to view and browse''' the data already displayed, so improving the overall user experience
 
* '''All loaded data is visible''' to the user, not only the last loaded one
 
* '''All loaded data is visible''' to the user, not only the last loaded one
 
==Disadvantages==
 
==Disadvantages==
Line 33: Line 58:
 
While a new set of data is loading in background, the user is free to continue reading and scrolling the already available items: so, it is important that the user interface remains usable
 
While a new set of data is loading in background, the user is free to continue reading and scrolling the already available items: so, it is important that the user interface remains usable
  
Alternative implementations use a '''button or link''', placed at the bottom of the available data, to '''allow the user to explicitly ask for new items'''. This approach gives to the user more control over the loading of data, but loses the intuitiveness of the automatic loading of data, typical of '''Live Scrolling'''.
+
Alternative implementations use a '''button or link''', placed at the bottom of the available data, to '''allow the user to explicitly ask for new items'''.<br/>
 +
[[Image:Livescrolling_buttonexample.png]]<br/>
 +
This approach gives to the user more control over the loading of data, but loses the intuitiveness of the automatic loading of data, typical of '''Live Scrolling'''.
 
An example of this alternative approach is visible in the [http://www.facebook.com Facebook website]:
 
An example of this alternative approach is visible in the [http://www.facebook.com Facebook website]:
  

Latest revision as of 06:06, 16 April 2012

Article Metadata
Article
Created: jappit (12 Jun 2009)
Last edited: hamishwillee (16 Apr 2012)

Contents

[edit] Description

The Live Scrolling Design Pattern, also known as Continuous Scrolling or Infinite Scrolling, is a way of displaying and loading data in incremental manner, alternative to Pagination (Mobile Design Pattern: Paging).

With Live Scrolling, a first subset of data is initially loaded and shown to the user. Then, when the user reaches the bottom of this data, a new set of data is automatically loaded and displayed. So, there's no need of explicit user interaction to load the next available items, contrary to Pagination, where the user has to click on a button or link to go to another page.

When new items are loaded, they're appended to the items already displayed to the user, so giving him the impression of a never-ending page, contrary to Pagination, where only a subset of data is always visible to the user.

An example of Live Scrolling is visible in the Gmail mobile client:

Livescrolling designpattern.png

[edit] Advantages

  • User interaction is more intuitive and fast, since the user does not need to press any buttons to see the next available items
  • While a new set of data is loading, the user can continue to view and browse the data already displayed, so improving the overall user experience
  • All loaded data is visible to the user, not only the last loaded one

[edit] Disadvantages

  • User has typically no explicit information about the total number of items
  • User has no way to go directly to a specific set of data, but has to load all the items until the desired one

[edit] Use when

The Live Scrolling Design Pattern is useful when there is the need of loading and displaying large sets of data.

[edit] Use how

The typical implementation of this Design Pattern is structured as follows:

  • a first set of data is loaded
  • the user can freely scroll and view the loaded data
  • when the user reaches the bottom of this data, new data is automatically loaded in background
  • as soon as the new data is available, it is appended to the existing one

While a new set of data is loading in background, the user is free to continue reading and scrolling the already available items: so, it is important that the user interface remains usable

Alternative implementations use a button or link, placed at the bottom of the available data, to allow the user to explicitly ask for new items.
Livescrolling buttonexample.png
This approach gives to the user more control over the loading of data, but loses the intuitiveness of the automatic loading of data, typical of Live Scrolling. An example of this alternative approach is visible in the Facebook website:

Livescrolling loadbutton.png

[edit] Design Tips

  • Load relatively small sets of data for each step: this will increase loading speed, and give more responsiveness to applications
  • Give the user a clear indication when new data is loading, to avoid the impression of blocked user interface
  • If there is an error while loading the next set of data, it is good practice to automatically retry to load it, for a predefined number of times
This page was last modified on 16 April 2012, at 06:06.
49 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.

×