Word Clouds in Four Steps: the Good, the Bad and the Ugly

Word clouds — a form of “tag clouds” — are visual representations of the prominent word choices in a selected text. The relative importance of a term is indicated by the weight of the font: the more often it appeared in the original source, the larger the word appears in the graphic “cloud.” This “Web 2.0” graphic novelty was created by Flickr co-founder Stewart Butterfield in 2004, and used widely on sites such as Flickr, Del.icio.us and Technorati.

Over time, this visual trick lost its popularity and has come to be discounted by user experience designers. Jakob Nielsen, generally considered a leader in the field, says “Tag clouds are overused. While looking pretty, they use screen space inefficiently, and many users don’t know how to use them” (Nielsen). Most online UX chatter is biased against their use, with a preference for other more readable infographic design concepts like this one:

While the concept may not be right for web design, I would argue that word clouds can provide a very useful tool in presenting content-oriented concepts to clients and stakeholders, if created properly. I built a successful word cloud during my content strategy work for the Pratt Institute Libraries re-design project, which was used in presenting our branding and user research back to our stakeholders. I followed four simple steps to create an effective word cloud infographic.

1. Prep the Data

We conducted interviews with several key stakeholders from the Pratt Institute Libraries in order to gather crucial information about their goals for our re-design project. After collecting the detailed script notes from the interview note-takers, I created a single document to use as my source text.

In order to prepare the text for the word cloud exercise, I removed all duplicate, repetitive and unnecessary content: the stakeholder’s names, the text of the interview questions, and terms such as “Pratt” and “Library,” which did not need to be represented in my graphic. I also removed all formatting from the document, such as bullets, heads and color, until it was straight text.

2. Find a Tool, and Load the Text

Next, I Googled “word clouds.” There are many, many free online tools for this purpose (see the link to a recommended list at the end of this article): my search yielded over five million results, and I simply used the first selection.

I then pasted my lengthy text into the box provided in the online tool, chose a shape and a color scheme, and voila:

But this was overwhelming: too many teeny tiny words! And who cared about useless words like “can,” “make,”  “get, “will,” “want” — and that oh-so-descriptive term — “things”?

3. Curate the Word List

The way to fix the noise in your wordy word cloud is to curate the word list, available in a menu option. Comb through this list carefully, and you will find many needless words (such as I listed above) that detract from the effectiveness of your word cloud. You can remove them without diluting its meaning.

Also note that the tool does not combine variant spellings of the same term. For example, all of these were considered — and counted — separately and had to be combined manually by me: “Student,” “student,” and “students.” I also chose to make everything lower-case.

As you can see from my curated word list below, the most frequently used terms in our stakeholder interviews were highly appropriate to the mission of the Pratt Institute Libraries: users, students, website, easier, need, resources, people, research, and services.

4. Design

The final step in creating a persuasive word cloud is to make good design choices. This involves using the tool as effectively as possible in addition to having a sense of what makes good user design.

First, you need to check that all of your words have been drawn into your word cloud. In this tool, there is a slider that allows you to ensure that all are included.

In this instance, 45 words were missing — including (when I checked my visual) the very important word “students”! Words appeared to be eliminated randomly rather than by level of usage, so it’s crucial to check.

Next, choose a shape for your cloud. The research says that users merely scan word clouds and do not read them closely; they also focus primarily on the terms in the center of the cloud. Therefore a non-shape like this one with a white background, below, can be too visually busy with words floating in space. The resulting cognitive overload will not allow viewers to easily take in the key terms that you want them to see.

In the end, I chose a circle, and a black background to focus the viewer, and after a few tweaks of the slider, every word fell into place — with the super-important “students” smack in the center.

In Conclusion…

A simple and dramatic word cloud is an effective way to do “show and tell” for stakeholders or clients about the language that surfaces in our UX research. It can reflect their mission in their own words, as in my example, or it could surface the challenges that come up in user interviews. It could be implemented during a “brand tone and voice” analysis of web site content as a way to compare the stakeholders’ stated branding to the terminology actually used in their site content. It can be a persuasive argument when needed.

Just know that your best audience is probably not hard-core UX designers, who have shown a bias against word clouds as “over-used” and rightly know that they’re not the best option for web design. Word clouds can work well to provide an impression in a presentation, but probably not to live permanently on a site. However, if you can create one that communicates effectively, it can help you tell a good story.

= = =

Nine Excellent (yet free) Online Word Cloud Generators



Lohmann, Steffen et al, “Comparison of Tag CLoud Layouts: Task-Related Performance and Visual Exploration,” https://www.uni-due.de/~s400268/Lohmann09-interact.pdf. Appeared in T. Gross et al (eds): INTERACT 2009, Part I, LNCS 5726, pp. 392-404, 2009.

Nielsen, Jakob, “Tag Cloud Examples,” March 24, 2009: https://www.nngroup.com/articles/tag-cloud-examples/

“Most Commented” infographic: https://i.stack.imgur.com/H8fTE.png

Are you a Good Witch or a Bad Witch?

I’m examining the concept of Nudge theory as it is implemented in user experience design. This exercise leads us to a fundamental question about ourselves as UX designers:


Am I a Good Witch? or a Bad Witch? Which?


By the end of this post, you will have to decide.


The Nudge theory was codified by Richard Thaler, a behavioral economist from the University of Chicago, and Cass Sunstein, a legal scholar, in their book, Nudge, published in 2009. In the book they describe a concept in behavioral science which argues that positive reinforcement can improve good decision-making. In any given scenario, one offers all choices, good and bad, simply prioritizing the good decision options for the user without removing the options that one feels are bad choices. It’s a rather altruistic and seemingly fair approach.

This behavioral concept is based on a binary view of human thinking: the two ways in which humans think are a) reflective and logical and b) intuitive and affective. The nudger (or in our scenario, the UX designer) should know how to appeal to both types of thinking in order to deliver a positive user experience; the key goal is to gently push the user into making the best decision to help them achieve their purpose.

Okay, UX designers, here’s a quiz question for you: who has a similar theory of human behavior? Why, Don Norman, of course! This two-paned approach is directly reminiscent of Mr. Norman’s three levels of human brain processing: Reflective (conscious cognition), Behavioral (learned skills), and Visceral (immediate perception, or as Norman puts it, “the lizard brain”). In a simplistic way, Norman’s behavioral and reflective processing link to Nudge’s reflective and logical thinking, and his visceral processing relates to Nudge’s intuitive and affective thinking.

The best example of Nudge theory in action is as follows: designers painted a small fly in a strategic spot in the urinals at the Schiphol Airport in Amsterdam, and thereby reduced spillage by 80%. As Thaler and Sunstein say, “It turns out that, if you give men a target, they can’t help but aim at it.” 

Other examples of good nudges include the little signs you often find in your hotel room that encourage you to save the environment by hanging up your towels so they don’t go into the laundry. If you want to have laundered towels, you leave them on the floor. Not only does this nudge you to be virtuous, cleaning up after yourself in order to reduce water and energy consumption, but it also may make you feel a little guilty about throwing something on the floor, thus making more work for someone AND ruining the environment at the same time!

The Good Nudge in Mobile Design

There are many ways to apply the good nudge in mobile design. There are apps which encourage good sleeping habits of eight hours per night, by sounding one small alarm sending you to bed at 11:00 and another waking you up at 7:00 AM.

The iOS Health app tracks your movement (in steps and flights and distance) and politely tells you to “Sit less. Move more. Get some exercise.” (Okay, maybe it only says that to me. Maybe you are out running five miles a day.) 

The British bank HSBC created an app that helps users track how they spend their money, quantifying purchase types and reminding them that “small purchases [like coffee] can add up.” 

Hello Wallet performs the same type of good nudge, but someone there apparently is more favorable to caffeine consumption.

The debate over the beauty of the Nudge is whether it actually supports the intended libertarian ideal of freedom of choice, or is just a euphemism for psychological manipulation. In UX design, is this the gateway drug to . . . DARK PATTERNS? In Wizard-of-Oz terms, I believe that the good-nudge Witch helps the user get home to Kansas. The bad-nudge Witch just wants to sell more of those shiny ruby slippers.

But each of us gets to decide. Just as Dorothy always had the power to get back to Kansas all by herself, UX designers, you have the power in you.

Nudge for the good!




Design Critique: LinkedIn Profiles in “Edit” Mode

LinkedIn is a powerful professional networking tool, and the LinkedIn profile is a commonly-used, linkable online alternative for the traditional resume. The goal is to create and edit a “strong” profile that will generate interest in the user as a candidate for employers.


“Profile Strength” panel provides a good conceptual model

The “Profile Strength” indicator has understandability: it fills up (like water in a tank) as the user improves the effectiveness of their resume, and is reinforced by the accompaniment of a ranking term.


Navigation signifiers are inconsistent

Discoverability, mapping and signifier issues in “view” mode

When the user views others’ profiles in LinkedIn, the blue “Send a message” button establishes a logical constraint, i.e. to connect with another person on the site.

In profile “edit” mode (below), this same blue button is labelled “View profile as” — breaking that logical constraint by linking to a “view” mode of the user’s profile instead. This confuses the user model (it is also accompanied by a misplaced dropdown menu).

In “view” mode, discoverability is therefore weakened, causing a gulf of execution: a minimally-visible banner labeled “This is what your profile looks like to Connections” on the left, with a “Return to profile” button in the upper right, changes the conceptual model yet again. Understandability is poor, causing rule-based mistakes: users might try to return to “edit” mode using the blue button rather than the banner button.

View-mode status would be signified more successfully if mousing over the “view” screen generated an overlay ghosting out the screen details, causing the banner instructions to pop out more (and preferably, the banner and buttons would be in blue, to signify that the user is still drafting their profile): 

In return, adding this banner and ghosted overlay technique to the original edit-mode screen and changing the “Return to your profile” button to a “View your profile” button would more successfully map the navigation to “view” mode. It would essentially work as a toggle switch between modes.

A gulf of execution occurs on the “Posts” page 

When the user tries to return to their profile “home” from the “Posts” page, a logical constraint applied everywhere else — i.e. to return “home” by clicking on the head-shot photo — is not available here. Knowledge in the head is required to find the “Profile > Edit Profile” navigation in the dropdown menu. 


LinkedIn adds constraints to encourage users to improve their profile

The blue box asking “Is this your current position?” (above the user image) and the two white boxes “Language” and “Volunteering Opportunities” (below) are helpful signifiers to edit further in order to create a “stronger” profile. However these signifiers often reappear after the user exits and re-enters the LinkedIn site anew, even when these points had been addressed. This adds an unnecessary constraint, and if the user has already performed these tasks, a gulf of evaluation is also created.

These panels also limit the visibility of other profile content, especially on smaller screens, and would be better designed as a clickable “Improve Your Profile” button


Discoverability and signifiers for editing text are strong

In “edit” mode, editable text is highlighted in blue when moused over. The pencil icon that appears is an effective signifier suggesting editing. This example provides useful feedback: a pop-up box appears with clear signifiers (“Save” and “Cancel”), as seen in the second image below. Also a “Change photo” instruction appears with an understandable camera signifier.


All things considered, LinkedIn provides strong understandability with robust editing options in the profile “edit” mode. However some improvements would increase discoverability and minimize mistakes.




A Redesign Proposal for the Voorheesville Public Library Website

In order to propose a redesign for the Voorheesville Public Library’s website, we conducted a user-centered review, test, and analysis of the information architecture and interactive design of the site. It appeared to be clogged with duplicated content in an overly complex structure, and was not adapted for mobile. Our goals were to conduct research and design a more effective user experience for desktop and mobile platforms, in interactive prototypes.

The current website appears crowded and overly complex.

 Understanding Our Users

Our first step was to identify our users and test their expectations regarding public library websites. In a series of unstructured interviews, observations and surveys, we asked users what they expected to find on such a site, and to give us feedback on their experience using the site of a major public library system. We collected our respondents’ answers and synthesized the results:

Key insights:
  • A public library’s home page should be simple and clear.
  • It should be easy to find books, so headings and labels must be good signposts.
  • Users expect public libraries to create a sense of community and offer public events and support services.

Once we had determined user goals, we created personas to represent the variety of users whom we would need to keep in mind throughout the research and testing process. To further our sense of empathy with these users, we also imagined plausible scenarios in which each persona would come to the Voorheesville Public Library (VPL) website.

We created personas and user scenarios.

 Structuring the Content

The next step in our redesign process was to create a new information architecture for the VPL site by testing our assumptions through card sorts, tree tests, and competitive analyses of similar websites.

After performing a top-level content inventory of the current VPL website, we narrowed the key topics down to 32 for the card sort. Our users organized the topics under headings of their own making and delivered results we could analyze, enabling us to map key groupings and relationships.

img_2854-1Analyzing the card sort test results.

From this map we were able to create a new information architecture, which we tested with users by asking them to perform five different tasks in a tree test.

Tree test results for one of the five tasks we tested.

Key insights:
  • User results were remarkably consistent, giving us clear direction.
  • Some categorizations caused confusion in navigation, which directed us to make changes to the information architecture.
  • Some labels were unclear and misdirected our users; these required honing.
    We had to make judgment calls about the placement of certain topics which had not been included in the card sort.

 Building a site map

Next, we were ready to propose a site map. Instead of the eight navigation tabs in the current VPL site we opted for four, plus a “social media” section intended for the footer.

Feedback at this stage challenged us to make several revisions to our information architecture once again, before the next phase of testing.

Key insights:
  • We decided to move the “Account” tab up to the top level in the next iteration, instead of keeping it under “Services,” to give users more immediate access to their personal information and to create a more comprehensible five-tab navigation structure.
  • Our “Voorheesville” header was not engaging, as we had intended, so we changed it to “Local History.”
  • Users indicated that the eBooks and Audiobooks information should be under the “Services” tab.

 Understanding the Competition

We conducted a valuable analysis of competitor sites before moving into the prototyping stage. We chose to examine the designs of five public library websites from around the country, evaluating the following dimensions:

  1. Homepage and navigation
  2. Connect (social media, about, contact us)
  3. Accessing catalogs and searching the site
  4. Events, services and exhibits
  5. Appearance (typography, color choices, overall aesthetics)
Key insights:
  • We decided to design a prominent search box with options for searching both the site and the catalog.
  • An interactive calendar interface is optimal.
  • We would use a graphic design with a minimal number of fonts, stock images and colors.
  • We learned a lot about the conventions of library websites, which might have been even more useful earlier in our research process.

Concepting and Testing Prototypes

Our final goal was to create usable prototypes, based on specified user tasks. The process of creating a first prototype started with a task flow. We chose several potential scenarios, and sketched decision points and click processes.


In this example of a task flow sketch, the user scenario was to find entertainment options on the VPL website. The user accesses the calendar to register for an event at the library.

We then conducted usability testing of two task flow scenarios, on both desktop and mobile sites, using paper prototypes.


By testing our task flows, we learned that the overall navigation structure was clear, but some revisions were needed to improve the user experience:

  1. In the desktop version, our search box functions were not visible enough, so we decided to enlarge the box in our prototype versions.
  2. In the mobile version, top-level navigation was not found easily via the slide-over “hamburger” menu, so a three-tab navigation bar would be added to the top of the screen in the final prototype.
Key insights:
  • Sketching task flows forced us to think carefully about each step a user takes to progress through a site to meet a specific need.
  • Prototypes, intended to test functionality only, should be sketched in black and white so as not to distract users with graphic design elements.

The Final Product:

An Interactive Digital Prototype

Our final task was to create interactive prototypes for both desktop and mobile designs, with one task flow required on each platform. We chose to represent a scenario in which the user is required to register a child for the library’s summer reading program.

Desktop Wireframes

desktop-homepageDesktop homepage

Mobile Wireframes

mobile-homepageMobile homepage

Our final digital prototypes can be viewed and clicked through below:

Desktop version

Mobile version

The many stages of our research, structuring, and prototyping process gave us powerful insights into the conventions and best practices of web design, and a viable proposal for the Voorheesville Public Library.

About Us

The Dritz & Osley team: we are (left to right) Ratirat (Rey) Osiri, Cormac Fitzgerald, Kristen Droesch, and Mary Ellen Curley.