×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Web Design : Completeness Meter

From Nokia Developer Wiki
Jump to: navigation, search
mayankkedia (Talk | contribs)
(New page: Category:Mobile WebCategory:Mobile DesignCategory:Mobile_Web_Design This design pattern is part of the Mobile Web Design series. == Introducti...)
 
hamishwillee (Talk | contribs)
m (Text replace - "Category:Mobile Design" to "")
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Mobile Web]][[Category:Mobile Design]][[Category:Mobile_Web_Design]]
+
[[Category:Mobile Web]][[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]]
 +
}}
 
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 12: Line 33:
 
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 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.
  
<table>
+
[[File:Completeness meter 1.gif|frame|none|Completeness meter example]]
<tr>
+
    <td align="left">
+
'''Completeness meter example'''<br>
+
[[Image:Completeness meter 1.gif]]
+
  </td>
+
</tr>
+
</table>
+
 
+
  
 
==When to use==
 
==When to use==
Line 28: Line 41:
 
*<b>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.</b>
 
*<b>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.</b>
  
 +
[[File:Completeness meter 2.jpg|frame|none|Completeness meter in software installation]]
  
<table>
+
[[File:Completeness meter 3.png|frame|none|Completeness meter with time remaining information]]
<tr>
+
    <td align="left">
+
'''Completeness meter in software installation'''<br>
+
[[Image:Completeness meter 2.jpg]]
+
  </td>
+
</tr>
+
</table>
+
 
+
<table>
+
<tr>
+
    <td align="left">
+
'''Completeness meter with time remaining information'''<br>
+
[[Image:Completeness meter 3.png]]
+
  </td>
+
</tr>
+
</table>
+
  
 
*<b>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.</b>
 
*<b>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.</b>
  
 
+
[[File:Completeness meter 7.jpg|frame|none|Quantitative figures for completeness]]
<table>
+
<tr>
+
    <td align="left">
+
'''Quantitative figures for completeness'''<br>
+
[[Image:Completeness meter 7.jpg]]
+
  </td>
+
</tr>
+
</table>
+
 
+
  
 
*<b>When the overall capabilities of the user can vary depending upon the completeness of their activity for instance credit points/trainings conducted etc.</b>
 
*<b>When the overall capabilities of the user can vary depending upon the completeness of their activity for instance credit points/trainings conducted etc.</b>
  
 
+
[[File:Completeness meter 6.jpg|frame|none|Capabilities depend on the completeness figures]]
<table>
+
<tr>
+
    <td align="left">
+
'''Capabilities depend on the completeness figures'''<br>
+
[[Image:Completeness meter 6.jpg]]
+
  </td>
+
</tr>
+
</table>
+
  
 
*<b>When the website recognizes/rewards user based on their completeness, it could be a combination of both qualitative and quantitative inputs for instance.</b>
 
*<b>When the website recognizes/rewards user based on their completeness, it could be a combination of both qualitative and quantitative inputs for instance.</b>
Line 78: Line 59:
 
Some of the key advantages of using the meter are:-
 
Some of the key advantages of using the meter are:-
  
*<b>It helps the user in ascertaining their overall progress towards their desired goals/task completion status.</b>
+
*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.
*<b>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.</b>
+
  
 
==Usability guidelines==
 
==Usability guidelines==
Line 88: Line 68:
 
*<b>Provide the user with help/information on how to improve their completeness ratings.</b>
 
*<b>Provide the user with help/information on how to improve their completeness ratings.</b>
  
 +
[[File:Completeness meter 4.jpg|frame|none|Meter with edit option on linkedin]]
  
<table>
+
[[File:Completeness meter 5.jpg|frame|none|Helpful information to boost completeness]]
<tr>
+
    <td align="left">
+
'''Meter with edit option on linkedin'''<br>
+
[[Image:Completeness meter 4.jpg]]
+
  </td>
+
</tr>
+
</table>
+
 
+
<table>
+
<tr>
+
    <td align="left">
+
'''Helpful information to boost completeness'''<br>
+
[[Image:Completeness meter 5.jpg]]
+
  </td>
+
</tr>
+
</table>
+
  
 
*<b>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.</b>
 
*<b>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.</b>
Line 111: Line 76:
 
*<b>It might be a good idea to give the user a complete breakup of how the meter readings were arrived at.</b>
 
*<b>It might be a good idea to give the user a complete breakup of how the meter readings were arrived at.</b>
  
 +
[[File:Completeness meter 8.jpg|frame|none|Breakdown of completeness]]
  
<table>
+
*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.
<tr>
+
    <td align="left">
+
'''Breakdown of completeness'''<br>
+
[[Image:Completeness meter 8.jpg]]
+
  </td>
+
</tr>
+
</table>
+
 
+
*<b>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.</b>
+
  
  
 
<b>--- Added by Mayank on 30/06/2009 ---</b>
 
<b>--- Added by Mayank on 30/06/2009 ---</b>

Latest revision as of 03:29, 9 May 2012

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

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

Contents

[edit] 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.

[edit] 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

[edit] 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 with time remaining information
  • 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
  • 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
  • When the website recognizes/rewards user based on their completeness, it could be a combination of both qualitative and quantitative inputs for instance.

[edit] 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.

[edit] 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
Helpful information to boost completeness
  • 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
  • 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 ---

This page was last modified on 9 May 2012, at 03:29.
84 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.

×