Some might say UI design is all about the visuals, but is it really the only aspect you should care about?
Obviously, everyone is responsible for their own part. All the parts, however, influence each other, as they add up to the same final product.
You might be able to create the prettiest graphics in the world, yet they won’t get you far if they don’t go in line with a wider concept. Good interfaces don’t exist in isolation from information architecture, user journeys, and written content.
In this article, we’re going to focus on the last part: the words. This responsibility lies with the UX writers. Their role is to create good user experience through product copy. They are the people who write interface (UI) copy, from CTAs and button text to tooltips and app notifications.
It’s a relatively new discipline. Not every design team has a dedicated UX writer, especially when it comes to small companies. Quite often, creating the copy (or at least the first draft) is the responsibility of a designer. And here comes the question: do designers actually know how to get it right?
When you started learning how to design websites and digital products, you probably didn’t think much about the words. You know everything about visuals, you know a thing or two about typography, but writing might not be your cup of tea.
Of course, not everyone has to be an excellent writer. On the other hand, the vast majority of interfaces come with a certain amount of text. As a usability professional, you can’t just ignore that fact. The words are there, and you need to tackle them accordingly. Acclaimed thought leaders, such as John Madea, go as far as claiming that writing is the unicorn skill in design.
Even if you don’t have a UX writing expert on board, you can still use some of their expertise. Here are 5 things UI designers can learn from UX writers:
Content-first approach
We’ll start with a general rule.
However tempting it is, drop the lorem ipsum.
Without exaggerating, it’s what UX writers hate most – and not without reason.
Placeholder text may somehow work for very early-stage UX sketches. UI design, on the other hand, is always high-fidelity. The prototypes can be shown to stakeholders and users for review. Dummy content doesn’t help them concentrate on the purpose of your design. If you use lorem ipsum, your test results won’t be of much use.
It’s all because words are an essential part of the experience. Did you know that more than 95% of the information on the web is written? While graphic design can do wonders, it’s still just a part of the equation.
At this stage, there is no space for placeholders. High-fidelity means your design should be ready to use. Dummy text can even depreciate your interface and make it feel like just a matter of aesthetics, while there should be so much more to it. A quote by renowned web designer, Jeffrey Zeldman, sums it up perfectly:
“Content precedes design. Design in the absence of content is not design, it’s decoration.”
Both words and visuals are there to help the users achieve their goals. Here’s how you can make them work together:
Use relevant copy to avoid space issues
This is a great way to cut down on design iterations. Have you ever created something you were really proud of, and then it turned out that the text doesn’t quite fit? If you were working with real content, this would be much less likely to happen.
Dummy text can even depreciate your interface and make it feel like just a matter of aesthetics, while there should be so much more to it.
This strategy is also hugely helpful for responsive design. When you have the actual copy from the start, it’s much easier to decide on device breakpoints. Working with lorem ipsum, on the other hand, will almost definitely lead to countless redesigns.
In other words, a content-first approach will help you create a design that improves the product instead of squeezing the product into a pretty visual frame.
Of course, it doesn’t mean that you need perfectly polished text to start working. Even the messiest draft is a whole lot better than lorem ipsum.
And here comes another thing you can learn from UX writers:
Involve your writer in the process
So, what exactly is the value of having a writer on board?
If you’re working on a website redesign, they’re going to start with a content audit.
What’s more, writers are storytellers, and UX writers are no different. They’re with you to make sure that your product is telling the right story, both verbally and visually.
Have a look at an example of a successful collaboration between the UI/UX team and a writer. If you’ve ever used Mailchimp, a well-known email marketing tool, this GIF probably rings a bell:
This screen appears after you send an email campaign. It can be a really stressful step, considering huge volumes and marketing budgets. Mailchimp saw the opportunity and they took it. They used an animation of their brand hero, a chimpanzee named Freddie, along with a friendly message.
Here’s the secret: the animation wouldn’t be as effective without the text, and vice versa. Both parts of this design complement each other to create a user experience so good it gained a cult status. It’s so popular that people are sharing images of this feature on social media. It didn’t take me long to find an example on Instagram:
Consider translations
Designing for different language versions? There’s a rule of thumb among UX writers: if the German text fits, all other translations will fit as well. Although it serves as a good indicator, it’s still just the tip of the iceberg. Other important issues have been raised by Rachael Bundock, the UX Writer of Booking.com, in her article about writing interface copy for translation. For example, different languages may have dramatically different grammar rules. What makes a nice and concise call to action in English might be much longer and more complicated in Russian, Hebrew, or Portuguese.
Last but not least, working with translations in mind will also help you create relevant graphic designs. A message may work well as an idiom in one language, but it may turn out less witty (if not offensive) in another. Before you come up with a funny visual touch, make sure it doesn’t get lost in translation. Using expressions like “the bee’s knees” or “in a nutshell” may not work very well in languages other than English.
Plain language
Yes, the Holy Grail of UX writing. Plain language is the art of using simple words and not using more words than necessary. Although it’s a wide discipline on its own, it’s not rocket science. Even if you’re not a natural-born writer, basic plain language principles are quite easy to master. Here are some of the most important ones to get you started:
There’s a rule of thumb among UX writers: if the German text fits, all other translations will fit as well. Although it serves as a good indicator, it’s still just the tip of the iceberg.
Use active voice
Simple as that. Passive voice will make your copy unnecessarily wordy. What’s more, the message in active voice sounds more persuasive. Have a look at this example:
Save your card details to pay.
vs.
Card details need to be saved for payment.
See the difference? The message is virtually the same, yet the first version is shorter and more actionable. The user knows exactly what they’re supposed to do.
Choose familiar words
It might be tempting to strive for elaborate expressions in order to make yourself sound knowledgeable.
See what I did there?
When you write copy for the interface, it’s good practice to read it out loud. If it sounds like something you wouldn’t normally say, it probably doesn’t fit.
Remember that probably not all your users are native speakers. Using overly complicated vocabulary is only going to confuse them.
If you’re not sure about your choice of words, you can have a look at this plain language guide from the US government. Their list of simple alternatives is sure to come in handy!
Stick to the limits
In her book Strategic Writing for UX, Torrey Podmajersky provides a handful of actionable tips for interface copy. As a UI designer, you might be particularly interested in these rules:
Stick to a maximum of 40 characters – Have a look at the headers used in this article. They all have less than 40 characters in total, which is not a coincidence. Torrey Podmajersky suggests that this amount of text (roughly three to six words) can be processed very quickly. You can use this knowledge as a guideline when writing button text, CTAs and other kinds of short copy.
Limit your text to three lines – People are able to focus their attention on up to three verses at once. When the copy is longer, they start referring to it as a “wall of text”. If you can’t get rid of anything else, consider breaking the copy into smaller chunks to make reading easier.
Leave space for translation – As I’ve mentioned before, some languages may require much more space to express the same thing. When writing in English, use around two-thirds of the available space to leave a safe margin.
This leads us straight to another rule of UX writing:
Simplicity
In most cases, less is more.
We’ve already covered this to some extent in the plain language section, but there’s still so much more you can learn from UX writers. User experience professionals often turn to different psychological principles. Have a look at some of the most prominent examples:
Miller’s law
Have you heard of the tyranny of choice, a term coined by Barry Schwartz? He was the one to claim that more choice doesn’t necessarily make us happier. So, how much is too much? And what is the golden mean?
Here’s where Miller’s law may come in handy. It states that an average person is only able to keep seven items (plus or minus two) in their working memory. This rule can be applied to paragraphs, or chunks of text, as well as elements of the interface.
Jakob’s law
Jakob Nielsen of the Nielsen Norman Group, one of the most acclaimed UX research institutes, has come up with possibly the simplest and the most widely applied rules in the field.
Jakob’s law states that users expect your website to work the same way as other websites they know. In other words, there’s no point in reinventing the wheel. Most of the time, using fancy words instead of “log in” or “sign up” is only going to cause confusion. Same rules apply to visual design. Before you apply something revolutionary, make sure it’s not going to distract your users from reaching their goals. This goes in line with the next principle:
The principle of least effort
The choice of plain language is dictated by a range of reasons, including the principle of least effort. It’s quite simple: why should we choose the more complicated road when there’s an easier solution available?
It applies to designers and users alike. The mission of a UX writer is to use words that make the user journey as simple as possible. UI designers are supposed to achieve the same objective through visuals.
How do you know if this works, though? There’s a simple solution available:
Peer testing
It might sound fancy (you might have seen this term used in the context of software development), but the idea is simple: test your design on your colleagues first.
Every writer knows that proofreading your own text is the worst nightmare. It’s not because they’re lazy or simply tired – it’s because human brains are actually quite smart. Because of a process called generalization, we find it hard to notice our own typos. Our brain takes a shortcut to focus on the overall meaning instead of the details.
This is why UX writers ask their teammates to read the text. Other people are much more likely to find weak spots and come up with fresh insights to improve the copy. The same approach can be just as helpful for UI designers. Before you turn to tests with real users, ask your colleagues to have a look at your design. Although they’re not the target group, they’re still able to catch errors, evaluate your drafts, and come up with valuable suggestions.
Consistency
Last but not least, UX writers can inspire you to improve your product’s style guide.
You probably already have a handbook for the visuals, but what about the content style guide? If you’re striving to create consistent interfaces, you won’t get far without it.
As I’ve mentioned above, you don’t have to create everything from scratch. I recommend starting with the Microsoft Writing Style Guide. It’s a well-written comprehensive source that’s used by many companies who don’t have their own style guide yet.
.png)
.jpg)
