Tag Clouds
Last updated: September 11, 2015 at 22:44 pm

A grouping of links, normally styled so the font size of each link is determined by the relevance or popularity of its associated content.


Visual example of the element:


What problem does this element or pattern solve?
Tag clouds help users who want to browse the most popular topics on your site. They also allow quick visualization of the type of content you offer.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Define user stories covering when and how a tag cloud should be generated. Will the links be dynamically generated based upon user activity (such as recent or popular searches)? Or will they be pre-determined by the actual content on your site?
  • How will the links be ordered? Options include alphabetically, randomly, by weight with the largest text near the center, or clustered by related subjects.
  • Will you present common phrases or single words only?
  • What is the minimum and maximum number of links that can be shown in a tag cloud?
  • Is the tag cloud container a fixed size, with text sizes expanding or contracting to fit within that area? Or, are text links displayed in predefined sizes, allowing the tag cloud container to expand?
  • Will the text links vary in size or font as well as color? Will words or phrases always be converted to lower case?


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
word cloud, weighted list, keyword cloud, data cloud
Related elements within this Style Framework:


Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply