×
Namespaces

Variants
Actions
(Difference between revisions)

Information Visualization For Mobile Applications

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix ReviewerApproval and ArticleMetaData etc)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(5 intermediate revisions by one user not shown)
Line 1: Line 1:
{{ArticleMetaData <!-- v1.1 -->
+
[[Category:Usability]]
 +
{{Abstract|Information visualization is the methodology of visual representation of huge amount of data using various techniques to help people understand and analyze data in the most convenient manner. This article explains the need for and use of this technique in mobile applications.}}
 +
 
 +
{{ArticleMetaData <!-- v1.2 -->
 
|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 10: Line 13:
 
|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) -->
 
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-from-title= <!-- Title only -->
 
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by= <!-- After re-review: [[User:username]] -->
+
|review-by= [[User:SannaH]]
|review-timestamp= <!-- After re-review: YYYYMMDD -->
+
|review-timestamp= 20120507
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
Line 23: Line 25:
 
}}
 
}}
  
[[Category:Mobile Design]][[Category:Usability]]
+
===Need for information visualization for mobile applications?===
===What Is Information Visualization?===
+
Information visualization is the methodology of visual representation of huge amount of data using various techniques to help people understand and analyze data in the most convenient manner.
+
 
+
===Need For Information Visualization For Mobile Applications?===
+
 
Mobile devices have many restrictions as compared to desktop computers that should be taken in to account when developing mobile applications.
 
Mobile devices have many restrictions as compared to desktop computers that should be taken in to account when developing mobile applications.
<UL>
+
 
<LI>Small screen size</LI>
+
* Small screen size
<LI>Low resolution</LI>
+
* Low resolution
<LI>Fewer colors</LI>
+
* Fewer colors
<LI>Difference in aspect ratio</LI>
+
* Difference in aspect ratio
<LI>Hardware limitation – slow CPU speed, less powerful Graphics CPU, memory limitation</LI>
+
* Hardware limitation – slow CPU speed, less powerful Graphics CPU, memory limitation
<LI>Difference in Input Mechanism</LI>
+
* Difference in Input Mechanism
<LI>Variable physical environment</LI>
+
* Variable physical environment
<LI>Slow internet Connectivity</LI>
+
* Slow internet Connectivity
<LI>Limited graphics tools </LI>
+
* Limited graphics tools
</UL>
+
 
  
 
===Mobile Visualization Design Guidelines===
 
===Mobile Visualization Design Guidelines===
Line 56: Line 54:
 
The data and visual mapping must be consistently applied throughout the application.
 
The data and visual mapping must be consistently applied throughout the application.
 
</LI>
 
</LI>
[[Image:Graph.gif]]<BR>
+
[[File:Graph.gif]]<BR>
 
Chart representation instead of textual representation of data.
 
Chart representation instead of textual representation of data.
 
<LI>
 
<LI>
Line 62: Line 60:
 
The central purpose of visual presentation is to effectively communicate the information to the user.
 
The central purpose of visual presentation is to effectively communicate the information to the user.
 
<BR><BR>
 
<BR><BR>
[[Image:Presentation.gif]]<BR>
+
[[File:Presentation.gif|frame|none|Avoid / prefer]]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Avoid &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
&nbsp;&nbsp;&nbsp;Prefer
+
 
</LI>
 
</LI>
 
Above is an example where data selection and its representation is done correctly, but in left image the presentation is not effective as compared to the right image because of unformatted text.
 
Above is an example where data selection and its representation is done correctly, but in left image the presentation is not effective as compared to the right image because of unformatted text.
Line 75: Line 68:
 
Remember that you can do different things with the display: Sometimes you can just turn things around! <BR>
 
Remember that you can do different things with the display: Sometimes you can just turn things around! <BR>
 
Full Screen Mode - This will increase the space for visualizing information of the application. But keep in mind that the user may lose important information, such as the battery, network, and other indicators at the top of the screen.  
 
Full Screen Mode - This will increase the space for visualizing information of the application. But keep in mind that the user may lose important information, such as the battery, network, and other indicators at the top of the screen.  
<BR><BR>
+
 
[[Image:Visualization_Innovation.gif]]<BR>
+
[[File:Visualization Innovation.gif|frame|none|Media Player using horizontal full screen for displaying movie.]]
Media Player using horizontal full screen for displaying movie.
+
 
 
</LI>
 
</LI>
  
Line 89: Line 82:
 
Too much complex Information visualization can confuse the user. Investigate the core usage of the application and keep the visualization simple. Give options to drill down, if additional information is required. Don’t get overwhelmed by the technology, new but complex visualization technology should not compromise the usability.
 
Too much complex Information visualization can confuse the user. Investigate the core usage of the application and keep the visualization simple. Give options to drill down, if additional information is required. Don’t get overwhelmed by the technology, new but complex visualization technology should not compromise the usability.
 
<BR>
 
<BR>
[[Image:Simple.gif]]<BR>
+
[[File:Simple.gif|frame|none|Avoid / Prefer]]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Avoid
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+
&nbsp;Prefer
+
  
 
</LI>
 
</LI>

Latest revision as of 06:42, 9 May 2012

Information visualization is the methodology of visual representation of huge amount of data using various techniques to help people understand and analyze data in the most convenient manner. This article explains the need for and use of this technique in mobile applications.

Article Metadata
Article
Created: User:Aadhar14b (29 Jun 2009)
Reviewed: SannaH (07 May 2012)
Last edited: hamishwillee (09 May 2012)

Contents

[edit] Need for information visualization for mobile applications?

Mobile devices have many restrictions as compared to desktop computers that should be taken in to account when developing mobile applications.

  • Small screen size
  • Low resolution
  • Fewer colors
  • Difference in aspect ratio
  • Hardware limitation – slow CPU speed, less powerful Graphics CPU, memory limitation
  • Difference in Input Mechanism
  • Variable physical environment
  • Slow internet Connectivity
  • Limited graphics tools


[edit] Mobile Visualization Design Guidelines

The following guidelines will help designers in developing effective mobile visualization application:

  • [edit] Selection

    Only necessary and relevant information must be displayed to the user from the available data. Too less or too more information can cause difficulty to the user to in performing the task. Selection is especially critical in case of mobile device visualizations because the limited space restricts how much information can be displayed on the screen.

  • [edit] Data and visual mapping

    Remember ‘A picture speaks a thousand words!’, the selected data must be appropriately mapped to visual objects (e.g. chart, graphs,images,animation, etc.) which will provide the information to the users in the most effective manner. The data and visual mapping must be consistently applied throughout the application.

  • Graph.gif
    Chart representation instead of textual representation of data.

  • [edit] Presentation

    The central purpose of visual presentation is to effectively communicate the information to the user.

    Avoid / prefer
  • Above is an example where data selection and its representation is done correctly, but in left image the presentation is not effective as compared to the right image because of unformatted text.

  • [edit] Innovative screen usage

    Remember that you can do different things with the display: Sometimes you can just turn things around!
    Full Screen Mode - This will increase the space for visualizing information of the application. But keep in mind that the user may lose important information, such as the battery, network, and other indicators at the top of the screen.

    Media Player using horizontal full screen for displaying movie.
  • [edit] User Interactivity

    Keep in mind the input devices available to explore and rearrange the visualization. A high level of user interactivity is necessary for productive usage of the application.

  • [edit] Keep it Simple

    Too much complex Information visualization can confuse the user. Investigate the core usage of the application and keep the visualization simple. Give options to drill down, if additional information is required. Don’t get overwhelmed by the technology, new but complex visualization technology should not compromise the usability.

    Avoid / Prefer
  • [edit] Ergonomic considerations

    Consider human perceptual and cognitive capabilities. Users must be able to easily recognize and interpret the visualization.
    More information on ergonomic design : Ergonomic Design

  • [edit] Testing

    The visualization's effectiveness should be tested thoroughly.


--Submitted by - Aadhar14b, 29 June 2009

This page was last modified on 9 May 2012, at 06:42.
155 page views in the last 30 days.
×