×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Design Pattern: News Ticker

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot addition of Template:ArticleMetaData)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(2 intermediate revisions by one user not shown)
Line 1: Line 1:
{{ArticleMetaData
+
[[Category:Mobile Design Patterns]]
 +
{{ArticleMetaData <!-- v1.1 -->
 
|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]] -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
Line 6: Line 7:
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
+
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|id= <!-- Article Id (Knowledge base articles only) -->
|language=<!-- Language category code for non-English topics - e.g. Lang-Chinese -->
+
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|translated-by= <!-- [[User:XXXX]] -->
|review-timestamp=<!-- After re-review: YYYYMMDD -->
+
|translated-from-title= <!-- Title only -->
|update-by=<!-- After significant update: [[User:username]]-->
+
|translated-from-id= <!-- Id of translated revision -->
|update-timestamp=<!-- After significant update: YYYYMMDD -->
+
|review-by= <!-- After re-review: [[User:username]] -->
|creationdate=20090512
+
|review-timestamp= <!-- After re-review: YYYYMMDD -->
|author=[[User:Croozeus]]
+
|update-by= <!-- After significant update: [[User:username]]-->
}}{{ReviewerApproved}}
+
|update-timestamp= <!-- After significant update: YYYYMMDD -->
[[Category:Mobile_Design]]
+
|creationdate= 20090512
[[Category:Mobile_Design_Patterns]]
+
|author= [[User:Croozeus]]
 +
}}  
  
 
+
{{Abstract|This article shows the "News Ticker" mobile design pattern.}}  This pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.
This design pattern is part of the [[:Category:Mobile Design Patterns|Mobile Design Patterns]] series.
+
  
 
==Description==
 
==Description==

Latest revision as of 09:06, 16 April 2012

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

This article shows the "News Ticker" mobile design pattern. This pattern is part of the Mobile Design Patterns series.

Contents

[edit] Description

According to the Wikipedia, a news ticker (sometimes referred to as a "crawler") is a small screen space on news television networks dedicated to presenting headlines or minor pieces of news. However, a news ticker is also used extensively on the websites.

  • A small reserved area on the page to show constantly updated items, with relevant links, is called a news ticker.

[edit] Advantages

  • Supplements the information user receives from the website.

[edit] Disadvantages

  • News ticker can act as a distract the users from the original content of the website.
  • Reserves screen space which might be used for other purposes.

[edit] Use when

The News ticker is used on information sharing, financial, news, etc. websites. When the user is engaged in navigating through the pages of the website the News tickers provides the user with latest news or any other updates the ticker is meant for. The news ticker is used when there is some free space on the website which needs to be filled. News may be filtered according to relevance. For example, news words may be while building the ticker so that it shows relevant news.

Newsticker.jpg

[edit] Use how

Generally the News ticker is placed on the Top or Bottom of the webpage. Along, with news ticker, stock updates can be provided using the same component. The ticker has a refresh button which would update the content of the ticker. When the user clicks on any news item on the ticker, he is directed to the appropriate relevant link.

Mobile News Ticker.jpg

[edit] Design Tips

  • Additional components like the search box might be added to the news ticker if screen space is available. For example, the Get Quote box in above screenshot.
  • Horizontal stock tickers are preferred while vertical news tickers are preferred to make optimum use of the screenspace.
  • Besides a refresh link, more options could be added so that users can easily navigate to their point of interest.
  • Make use of UGC (User Generated Content) to show more relevant items on the ticker

--Submitted by croozeus 17:33, 12 May 2009 (EEST)

  • croozeus
This page was last modified on 16 April 2012, at 09:06.
56 page views in the last 30 days.