In part one, we talked about UX writing basics for creating understandable text. But writing clearly is not quite enough for product design — you also need to collaborate with marketing, developers, and other teams to get the text exactly right. The writing needs to blend with the rest of the design to create a cohesive experience.

Here are some ways to make sure your well-crafted UX writing integrates with the rest of the product design.

Photo by Adam Jang

Add personality

Not all UX writing needs to have a boring, neutral voice. Understandable text can have personality too, as long as it fits with the product’s overall personality.

Photo by Tim Mossholder

Of course, be mindful of what is appropriate. Who is the audience and what is an appropriate reading level or experience level? Is humor okay? Is the product voice friendly and playful, or informative and serious? As mentioned in Part 1, what jargon is appropriate or inappropriate?

Consider the error messages on Mailchimp, a newsletter service known for their cheeky personality. First, notice in the example below that the button labeled “Return To The Dashboard” is clear and concise, so the important action is understandable without anything cute. But Mailchimp also uses clever, appropriate humor in their microcopy that works well here.

Obviously, the same personality that Mailchimp uses would not fit a serious, trusted product like a healthcare or government website.

Mailchimp uses humor in their microcopy. Users tend to be creative or marketing folks who enjoy a bit of a chuckle.

 

The Gov.UK website 404 page is helpful and simple. After all, shouldn’t we trust a government website to be stately and serious?

The internet is full of examples of horrifically inappropriate messages given their context — for example, social media sites congratulating users for a ‘popular”\’ post in which they expressed the grief of losing a loved one. (Sara Wachter-Boettcher’s book Technically Wrong is full of such examples of bad design decisions and I recommend reading it!) Consider the different contexts  in which people may interact with your UX writing to avoid these mistakes in tone.

To summarize: when you are writing product text with personality, know the users, the context, and the product voice.

Use consistent terminology

In most kinds of writing, using the same words repeatedly is tiresome. In the case of UX writing though, be sure that the specific terminology you use is consistent throughout the product, even if it feels a little redundant.

Photo by Erol Ahmed

For example, don’t alternate between calling something a ‘homepage’ and a ‘dashboard’. Or a ‘cart’ and a ‘shopping bag’. Or switch between labels that say ‘delete’ and ‘remove’. Make sure the words are consistent, so users know what’s what.

Follow a visual hierarchy

A visual hierarchy is a way to create a sense of order on a page using design elements like font size, font style, color, and white space. A page’s design should clearly communicate which information is the most important by how ‘important’ it looks.

So, you should make sure that text fits into a visual hierarchy so the information is cohesive. UX writing is useful only when it exists in a context that is easy to follow, where users have the text when they need it (and in the order they need it).

You might want to design the few most important buttons — like Log In and Save-type stuff — to visually contrast with the rest of the page to make them more noticeable. The same goes for important writing, like warning messages or important instructions.

The Dropbox homepage uses a visual hierarchy to direct your attention to what they believe is the most important information: a Dropbox tagline and a sign-up form. Secondary-but-still-important pieces of information in this visual hierarchy are the Sign In and Download links at the top right.

Visual hierarchies can be simple, too. In UserZoom articles, as with most articles, we use headings and subheading to create a visual hierarchy. The different-sized headings help organize the content on the page and group information in a logical way.

Progressive disclosure

For complex experiences or products, consider how to best present information in pieces, providing more specificity as users get deeper into the process. Users are less likely to get confused or overwhelmed when they only see as much information as they need. This process of gradually introducing information is called progressive disclosure.

For example, you can show users only a short description and a few options to get them started. Then provide more specialized information and choices later in the experience.

Duolingo, an app for teaching languages, uses progressive disclosure to gradually introduce learners to lessons and other features. The first thing a user does after choosing a language to learn is choose whether to start a language from scratch or start with a placement test. As wonderfully understandable as the text itself is, it also shows up at the right time: when users are setting up their path for language learning. Then, more options appear later.

The Duolingo experience uses progressive disclosure to clearly introduce the opportunity for a placement test first, before showing other lessons or features. This helps users get started.

Summary

After looking through some basics in Part 1 and some tips for integrating text into design here in Part 2, you are poised to write clear, concise, and consistent content to support a good product experience. Again, there is a lot to learn, so here are a few additional resources:

Happy writing!