×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Web Design : Completeness Meter

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
hamishwillee (Talk | contribs)
m (Hamishwillee - Tidy wiki text)
Line 1: Line 1:
 +
[[Category:Mobile Web]][[Category:Mobile Design]][[Category:Mobile Web Design]]
 
{{ArticleMetaData <!-- v1.2 -->
 
{{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]] -->
Line 21: Line 22:
 
|author= [[User:Mayankkedia]]
 
|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 34: 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>
+
[[File:Completeness meter 1.gif]]
+
  </td>
+
</tr>
+
</table>
+
 
+
  
 
==When to use==
 
==When to use==
Line 50: 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>
+
[[File:Completeness meter 2.jpg]]
+
  </td>
+
</tr>
+
</table>
+
 
+
<table>
+
<tr>
+
    <td align="left">
+
'''Completeness meter with time remaining information'''<br>
+
[[File: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>
+
[[File: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>
+
[[File: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 101: Line 60:
  
 
*It helps the user in ascertaining their overall progress towards their desired goals/task completion status.
 
*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.
 
*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.
  
Line 110: 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>
+
[[File:Completeness meter 4.jpg]]
+
  </td>
+
</tr>
+
</table>
+
 
+
<table>
+
<tr>
+
    <td align="left">
+
'''Helpful information to boost completeness'''<br>
+
[[File: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 133: 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>
+
<tr>
+
    <td align="left">
+
'''Breakdown of completeness'''<br>
+
[[File:Completeness meter 8.jpg]]
+
  </td>
+
</tr>
+
</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.
 
*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.

Revision as of 10:44, 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

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.

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
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 ---

67 page views in the last 30 days.
×