Why words matter on the UI

Explaining the importance of words in user experience.

When you think UX, I doubt the word verbiage jumps into your head. But the truth of the matter is: words guide users. Every good user experience expert wants to create products that do not need explanation; and they should strive for that goal. That said, accepting that many websites and products need additional explanation improves many products. Some companies hire “language designers” to craft these integral cues on interfaces. In most shops the task falls to user experience experts, technical writers and developers. This blog explores four types of interface copy and guides anyone writing it toward strong, thought out words that will help their users.

This article focuses on four essential (and often overlooked) types of UI words:

  • Button labels
  • Error messages
  • Microcopy
  • Alt text

Before defining each type and explaining how to improve it, we should review some basic interface writing guidelines that apply to all of your copy:

  1. First, understand your audience. Know who you are writing for and how they use your site or product. Most national publications, including the esteemed Wall Street Journal (WSJ), write to an eighth grade reading level. If a variety of people use your site — even if most of them are PhDs or CEOs — write to an eighth grade level.
  2. Second, assess your readers “jargon meter.” I recently used the term “drive traffic” in a paper that I wrote for a technical communication publication. I almost edited out the term but decided against it because “drive traffic” is a common expression in the industry and almost all the readers of this trade publication are IT professionals. I felt confident that anyone reading it would understand the term. For lesser known terms and mixed audiences, always remove jargon even if that jargon is becoming more universally known. If I’m uncertain, I search for the term in a publication that I respect. If the New York Times or WSJ uses it, I use it. Set your own ground rule. That leads to our third guideline: plain language.
  3. Third, write understandable plain English in the active voice. Take this one step farther in the UI, write to the person on the other side of the screen as we will discuss in the error message and microcopy sections.
  4. Fourth, think about translation. Some of your users may speak English as a second language. Colloquial words and ones with double entendres may confuse them.

Now we’ll talk about rules to follow for specific types of words on the UI:

Button labels

Button labels tell users what to do. Think of them like road signs — you see a stop sign, you stop. You see an Accept button, you accept. Choose the least ambiguous, most understandable, simple word that describes the action that you want the user to take. I prefer mixed case labels because I like to reserve all capitals for special situations when I want to scream at the users. STOP is a good example. If you do use all capitals on a button label, your label should not be more than a few characters at the most. Longer button labels can improve understanding of trickier operations and help users; but only if the users can read them:

An example showing how the use of short sentences make the buttons easier to understand. https://dribbble.com/shots/969445-The-Double-Delete
An example showing how using all capitals on buttons creates a more uniform design but can hurt readability. https://dribbble.com/shots/98897-Chutzpah-UI-Design-Kit-free-button-resource

Error messages

Error messages guide users back from mistakes. Defaulting to standard 404 messages like “page not found” provides more information than a link that does nothing. That said, you can do a lot better by customizing those 404 messages to improve your users’ understanding of the problem. Think about what your users were trying to do when they came across this error.

Write clear concise messages that speak to your users in terms they understand:

Beyond super cute, this error message not only tells the user what component is missing but shows a picture of it as well! https://dribbble.com/shots/2491912-Daily-UI-011-Error-flash-message
Another good example of error messages that also provide links for who to contact. https://dribbble.com/shots/975435-Notification-messages
A poor error message doesn’t tell the user what to do next or explain why their mistake. https://dribbble.com/shots/2323534-011-Flash-Message

Personally, I like cute “Oh no! You messed up!” messages but not everyone does. I omit those tiny add-ons for two reasons: They do not fit the culture of the users I write for at the moment and they take extra time to read. Always remember that the error message must educate and direct users back to their intended task as quickly as possible.

Microcopy

If you come from a newspaper background — or have ever read a newspaper — think of microcopy as your subheadline. This isn’t the attention getting headline in the big bold font like “Fire destroys old theater.” Microcopy fills in the details that anyone interested in that big headline need to know. Use it on your UI to add clarity and direction to important or tricky actions.

Like error messages, write this copy clearly and concisely; and like headlines make sure it conveys need to know information without cluttering the screen.

  • Do not write paragraphs.
  • Do not share too many details.

Hopefully, you have help documents that explain specific details of your product. Use the microcopy on the UI to guide users through tricky situations. Giving them too much information will bog down their progress.

I like to figure out exactly what my users need to know and write a detailed description explaining it to them. Then I edit that detailed description to remove anything that will not help them achieve their intended goal — even if it’s useful information. If my users can figure out what they need without it, I take it out in efforts to speed their experience.

Here’s an example:

1st draft microcopy: Click accept to start using our product and create your first listing. This saves a copy of your listing. You can access and edit the listing later from the drop-down menu by clicking its specific ID.
Revised microcopy: “Accept” creates your listing; use the drop-down menu to access/edit it.

Alt Text

Alternative text appears when your users hover over a button or image.

Since June 2001, the U.S. Workforce Rehabilitation Act has required that government websites include alt text per the 508 Compliance section of the law. In the early days some sites met this requirement by typing the word “image” into alt text that appeared over images on their site. When you write alt text, remember that people using it may not be able to see your site. Give those users enough information to help them understand the image or button label but not too much to overload them:

Alt text examples

While you’re thinking about screen readers, revise every “click here” link to meaningful text. Some people set screen readers to only read links on a page. If all the links say “click here” they will not help anyone. Instead, write text that will guide someone who cannot see the screen:

Useful link text

I hope this post brought some new perspective to the words you choose for your UIs. Finding the right words helps your users do their tasks and improves their user experience.