×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Web Design : Completeness Meter

From Nokia Developer Wiki
Jump to: navigation, search
mayankkedia (Talk | contribs)
m (Changed bold pattern)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
Line 1: Line 1:
[[Category:Mobile Web]][[Category:Mobile Design]][[Category:Mobile_Web_Design]]
+
{{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= <!-- 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= 20090630
 +
|author= [[User:Mayankkedia]]
 +
}}
 +
[[Category:Mobile Web]][[Category:Mobile Design]][[Category:Mobile Web Design]]
  
 
This design pattern is part of the [[:Category:Mobile Web Design|Mobile Web Design]] series.
 
This design pattern is part of the [[:Category:Mobile Web Design|Mobile Web Design]] series.
Line 16: Line 38:
 
     <td align="left">
 
     <td align="left">
 
'''Completeness meter example'''<br>
 
'''Completeness meter example'''<br>
[[Image:Completeness meter 1.gif]]
+
[[File:Completeness meter 1.gif]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>
Line 33: Line 55:
 
     <td align="left">
 
     <td align="left">
 
'''Completeness meter in software installation'''<br>
 
'''Completeness meter in software installation'''<br>
[[Image:Completeness meter 2.jpg]]
+
[[File:Completeness meter 2.jpg]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>
Line 42: Line 64:
 
     <td align="left">
 
     <td align="left">
 
'''Completeness meter with time remaining information'''<br>
 
'''Completeness meter with time remaining information'''<br>
[[Image:Completeness meter 3.png]]
+
[[File:Completeness meter 3.png]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>
Line 54: Line 76:
 
     <td align="left">
 
     <td align="left">
 
'''Quantitative figures for completeness'''<br>
 
'''Quantitative figures for completeness'''<br>
[[Image:Completeness meter 7.jpg]]
+
[[File:Completeness meter 7.jpg]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>
Line 67: Line 89:
 
     <td align="left">
 
     <td align="left">
 
'''Capabilities depend on the completeness figures'''<br>
 
'''Capabilities depend on the completeness figures'''<br>
[[Image:Completeness meter 6.jpg]]
+
[[File:Completeness meter 6.jpg]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>
Line 93: Line 115:
 
     <td align="left">
 
     <td align="left">
 
'''Meter with edit option on linkedin'''<br>
 
'''Meter with edit option on linkedin'''<br>
[[Image:Completeness meter 4.jpg]]
+
[[File:Completeness meter 4.jpg]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>
Line 102: Line 124:
 
     <td align="left">
 
     <td align="left">
 
'''Helpful information to boost completeness'''<br>
 
'''Helpful information to boost completeness'''<br>
[[Image:Completeness meter 5.jpg]]
+
[[File:Completeness meter 5.jpg]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>
Line 116: Line 138:
 
     <td align="left">
 
     <td align="left">
 
'''Breakdown of completeness'''<br>
 
'''Breakdown of completeness'''<br>
[[Image:Completeness meter 8.jpg]]
+
[[File:Completeness meter 8.jpg]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>

Revision as of 09:00, 7 May 2012

Article Metadata
Article
Created: mayankkedia (30 Jun 2009)
Last edited: hamishwillee (07 May 2012)

This design pattern is part of the Mobile Web Design series.

Contents

Introduction

There are some use cases which require an overall measurement, some sort of a quantitative analysis to understand how much/what percentage of an activity has been completed. The approach used to indicate this to the user of the website is known as completeness meter.

What is completeness meter

Completeness meter is an indicator/a barometer if you please to denote the overall completeness of a task, an activity etc. It is used to let the user know how much of the work vis a vis the given task they need to complete to get up to a certain level, the level could be measured in percentage terms, numerically, expressed in tags etc.

Completeness meter example
Completeness meter 1.gif


When to use

The completeness meter should be used in one of the following use case scenarios:-

  • The intention is to indicate to the user the overall status they are on vis-à-vis the activity for which the meter has been shown.


Completeness meter in software installation
Completeness meter 2.jpg

Completeness meter with time remaining information
Completeness meter 3.png

  • You want to fuel the user’s interest by giving them some sort of a measurement figure, something they might have been loathe to complete without that extra bit of incentive.


Quantitative figures for completeness
Completeness meter 7.jpg


  • When the overall capabilities of the user can vary depending upon the completeness of their activity for instance credit points/trainings conducted etc.


Capabilities depend on the completeness figures
Completeness meter 6.jpg

  • When the website recognizes/rewards user based on their completeness, it could be a combination of both qualitative and quantitative inputs for instance.

Advantages

Some of the key advantages of using the meter are:-

  • It helps the user in ascertaining their overall progress towards their desired goals/task completion status.
  • Helps the site to garner more information about the user, thereby tailoring the content more in sync with that data, for instance the user’s hobbies/favorites etc.

Usability guidelines

Some usability guidelines to follow while using the meter are:-

  • Provide the user with help/information on how to improve their completeness ratings.


Meter with edit option on linkedin
Completeness meter 4.jpg

Helpful information to boost completeness
Completeness meter 5.jpg

  • Always have a textual/figurative implementation of the meter so that the user knows their standings; don’t use them internally without letting the user know.
  • It might be a good idea to give the user a complete breakup of how the meter readings were arrived at.


Breakdown of completeness
Completeness meter 8.jpg

  • If the use case of the website allows to, think about ways to reward the user with higher completeness ratings, this would motivate the others to get there as well.


--- Added by Mayank on 30/06/2009 ---

51 page views in the last 30 days.