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)

Information Visualization For Mobile Applications

From Wiki
Jump to: navigation, search
nirpsis (Talk | contribs)
(Review logo)
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(6 intermediate revisions by one user not shown)
Line 1: Line 1:
{{ReviewerApproved}}
+
[[Category:Usability]]
[[Category:Mobile Design]][[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.}}
===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?===
+
{{ArticleMetaData <!-- v1.2 -->
 +
|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= [[User:SannaH]]
 +
|review-timestamp= 20120507
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20090629
 +
|author= [[User:Aadhar14b]]
 +
}}
 +
 
 +
===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 33: 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 39: 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 52: 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 66: 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 03: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 03:42.
130 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.

×