Tag Cloud

Problem summary

The user wants to browse content by popularity in a visually appealing way.

Examples

No items found.

Solution

A tag cloud is a list of tags, where the font size of each tag is larger or bigger depending on its weight. Weight in tag clouds can be represented in three different ways:

  1. Size represents the number of times that a tag has been applied to a single item.
    This kind of tag cloud can help define the distribution of how the item is categorized.
  2. Size represents the number of items to which a tag has been applied
    As a presentation of each tag’s popularity.
  3. Size represents the quantity of content items in that category
    Tags are used as a categorization method for content items1

There are several opinions on how tags should be ordered. Examples of ways to order tags are:

  • Alphabetically
  • Randomly
  • By weight
  • In clusters of semantically similar tags (similar tags appear next to eachother)

Rationale

Tag clouds helps visualize semantic fields; how some categories have greater importance than others.

It can also help give an impression of what content is to be found on a site and which categories of content the site is focused on.

Resources

Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection

Ecommerce
iOS
Website
Dashboard
Flowchart
VIEW BUNDLE