×
Namespaces

Variants
Actions
(Difference between revisions)

Mobile Web Design : Tag Cloud

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot addition of Template:ArticleMetaData)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata etc)
Line 1: Line 1:
{{ArticleMetaData
+
{{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 6: Line 6:
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
|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]] -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|translated-from-title= <!-- Title only -->
|review-timestamp=<!-- After re-review: YYYYMMDD -->
+
|translated-from-id= <!-- Id of translated revision -->
|update-by=<!-- After significant update: [[User:username]]-->
+
|review-by= <!-- After re-review: [[User:username]] -->
|update-timestamp=<!-- After significant update: YYYYMMDD -->
+
|review-timestamp= <!-- After re-review: YYYYMMDD -->
|creationdate=20090630
+
|update-by= <!-- After significant update: [[User:username]]-->
|author=[[User:Mayankkedia]]
+
|update-timestamp= <!-- After significant update: YYYYMMDD -->
}}[[Category:Mobile Web]][[Category:Mobile Design]][[Category:Mobile_Web_Design]]
+
|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 36: Line 38:
 
     <td align="left">
 
     <td align="left">
 
'''Tag Cloud in image'''<br>
 
'''Tag Cloud in image'''<br>
[[Image:Tag cloud 1.jpg]]
+
[[File:Tag cloud 1.jpg]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>
Line 55: Line 57:
 
     <td align="left">
 
     <td align="left">
 
'''Tag Cloud in images'''<br>
 
'''Tag Cloud in images'''<br>
[[Image:Tag cloud 2.jpg]]
+
[[File:Tag cloud 2.jpg]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>
Line 64: Line 66:
 
     <td align="left">
 
     <td align="left">
 
''' Tag Cloud in images '''<br>
 
''' Tag Cloud in images '''<br>
[[Image:Tag cloud 3.jpg]]
+
[[File:Tag cloud 3.jpg]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>
Line 96: Line 98:
 
     <td align="left">
 
     <td align="left">
 
'''Customizable tag cloud'''<br>
 
'''Customizable tag cloud'''<br>
[[Image:Tag cloud 5.jpg]]
+
[[File:Tag cloud 5.jpg]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>
Line 111: Line 113:
 
     <td align="left">
 
     <td align="left">
 
'''Quantitative approach to tag cloud'''<br>
 
'''Quantitative approach to tag cloud'''<br>
[[Image:Tag cloud 4.jpg]]
+
[[File:Tag cloud 4.jpg]]
 
   </td>
 
   </td>
 
</tr>
 
</tr>

Revision as of 09:03, 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

As the information available on web sites increases by the day, the challenge from a developer’s point of view to ensure that finding the relevant information still remains an easy enough task for the end user. Web designers are coming up with newer and innovative ways to beat the information overload that seems to be happening. It seems like a good idea to let the user know what are the most viewed/sought after content available on the site, that ways they can figure out the profile of other users on the site and the popular content available. This pattern is classified as tag cloud.

What is tag cloud

Tag cloud is a graphical/visual form of representing the popular/most viewed tag items on the website to the user. The tag cloud gives the user an insight into the content available on the site and also the profile of the users who are using the website. The tags are highlighted and differentiated from the others with the use of different colors and fonts depending upon their popularity.

Tags are usually hyperlinks which when clicked take the user to the pages/content that has been tagged with the particular tag. Users can possibly create their own custom tags also depending upon the implementation.

Tag Cloud in image
Tag cloud 1.jpg


When to use

Some places where tag cloud can be used are:-

  1. Social networking/blogging sites where the popular blogs/profiles get tagged with higher ratings and hence are prominently visible.
  2. Where you want the user to decide what content is more important/relevant by allowing them the option of tagging content.
  3. On websites that do not have a fixed hierarchical structure where the importance of the information is pre-decided.


Tag Cloud in images
Tag cloud 2.jpg

Tag Cloud in images
Tag cloud 3.jpg

Advantages

Some of the key advantages of using tag cloud are:-

  1. Gives the user a sense of what to expect on the site and to allow them easy navigation/search mechanism.
  2. Allows the user to understand the average peer profile on the set, as users who are tagging content tend to leave a character trail of themselves.


Disadvantages

Some of the key disadvantages of using this using tag cloud are:-

  1. There is no restriction on the tag name, hence they are open to misuse where the user might give falsonomies/psynonyms which could be confusing and meaningless to others.
  2. Since the users are in charge, if they flock to a particular tag en masse it ends up becoming more important to a point where the other important(from an overall standpoint) tags become almost invisible owing to lesser interest shown in them.
  3. Incorrect tagging for particular information could end up reducing the overall effectiveness of the search and site hierarchy. For instance if people decide to tag the Big Ben in London as say “The Great Clock” and continuously to a point where the tag ‘Big Ben’ ceases to exist all together.

Usability guidelines

Some usability guidelines to follow while using/creating tag clouds are:-

  • Allow the user a way to customize the tag cloud.


Customizable tag cloud
Tag cloud 5.jpg

  • Express the popularity of the tag in numbers


It might be a good idea to attach some numbers like how many people have tagged the category, and maybe a list of those users, so that it makes more sense for the others viewing the tag cloud.


Quantitative approach to tag cloud
Tag cloud 4.jpg

  • Ensure consistency of font size/color based on tag popularity


It is important to ensure consistency of font size especially when showing tags on the user interface. It shouldn’t happen that two tags with the same number of user hits get depicted with different sizes, it might end up confusing the user.

Final Word

Tag cloud is a nice visual representation of the popular content on the website, but at the same time since it is prone to misuse it should be used with care. A possible restriction on what can possibly be tagged as what could be a good idea or a moderator approved tagging mechanism could also be put in place to ensure that the tags serve their larger purpose of helping the average user on the web page.

Another mechanism could be to actually have a customization option for tag clouds as mentioned here on Configurable Tag Cloud

Additional Resources

Wikipedia

Jeffrey Zeldman’s report

Improving tag clouds

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

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

×