Post Image

The Missing Link Between UX and Copywriting

Jerry Cao
By Jerry Cao on 17th February, 2016 Updated on 22nd April, 2020

Empathy. Communication. Storytelling.

Some of the most useful UX skills in are also core writing skills. As a content strategist at UXPin, I’ve learned that great design cannot exist without great copy. In fact, as we explained in Interaction Design Best Practices Vol. 1, text forms the foundation for on-screen interactions.

Let’s explore how writing can improve how you run a design feedback session and how you design interfaces.

Clarity in Communication

Communication is the heart of writing and UX design.

For writing, communication means expressing your thoughts clearly, and if you can, poetically as well. For UX design, it’s actually a bit looser, since there aren’t as many clear-cut grammar rules nor a standard vocabulary.

For the designer, writing helps in two ways: communicating decisions with fellow team members/stakeholders, and communicating with users through interface copy.

i. Communicating with the product team

Formal writing like reports, essays, arguments, etc. rely heavily on structure.

In school, we’re taught the format of presenting the initial argument, rebuttal, and then final argument.

Designer taking notes with pen and paper

The same skills apply when giving and receiving feedback for your designs. Before a feedback session, try writing a quick cheatsheet that answers these questions:

  • What goals do my top 3 design decisions accomplish?
  • Why did I make these decisions?
  • What specific user research supports those decisions?
  • Where do we need to add more fidelity?

Spending a little time organizing beforehand helps avoid the “deer in headlights” effect when unexpected questions pop up (and they always do).

ii. Communicating with users

A more direct application is copy as a UI element.

It’s not easy to improve your writing overnight. Copywriting draws from thousands of years of literature the way interface design draws from decades years of art and psychology principles. What we’ll do here, though, is offer 3 simple tips to improve interface copy.

Write verbs first. Thanks to eye tracking studies, we know that most users scan through content before deciding if they want to continue. Verbs immediately catch the user’s attention and indicate that the text or label reflects action. For example, a CTA with “Send money” is more direct and clear than “Give money”.

Be unmistakably clear. On a related note, “Save” doesn’t mean the same as “Submit.” Just like you measure alignment for visual elements, read carefully into each word that you add to an interface.

Omit needless words. Writing advice 101. Delete unnecessary words, leaving only a crisp flow. Consider the difference between:

Text is a lot better without all that unnecessary extra weight.

… and …

Text is better without extra weight.

The Shared Tools of Writing and UX Design

Take a look at this list of common “tools” used by both writing and UX design:

Pacing. The structure of your writing, as we mentioned above, affects the way information is presented to your reader, which then affects how well it’s processed. This same structuring increases the effectiveness of your UX design. Consider what you want your user to see first, second, third, etc., then structure your visual hierarchy to align with this pacing.

Tone. Along the lines of perspective, the tone is how you present your argument. Playful like MailChimp? Logical like Campaign Monitor? There’s no wrong answer, as long as it matches your users. Just make sure the tone of the visual design matches the tone of the copy so you create a unified design personality.

Clarity. Never sacrifice clarity in the design for the sake of being clever. “Cool, let’s roll with it!” is rarely a good substitute for a simple “Send” button.

The link between writing and UX design is a two-way street.

Storytelling

Advanced writing techniques break into the art of storytelling, an area quite prevalent in UX design.

Storytelling in UX design mean establishing emotional connections with the users and hooking them into continual usage of the product. As you can imagine, this isn’t something that can be taught in a single article.

An open book for some reason.

We won’t explain the full art of storytelling here, but if you’re interested, we’ve included these two free resources for further reading:

Try It Out: User Flow Exercises

Here’s a practical exercise that directly impacts your UX design: writing out your user flow.

When you write out a user flow, you don’t just create the overall pace of the experience— you also think about the exact copy used for important labels.

You create a user flow by mapping out the steps required to accomplish a goal.

Let’s create one for, say, a banking app. The scenario: someone wants to turn on auto deposit. Note in the outline below, content in [brackets] represents action buttons/links.

Step 1: Would you like to set up auto deposit?

[Set auto-deposit]

 

Step 2: Select Deposit Frequency

[Once per month][Twice per month]

[Every other week][Every week]

Step 3: Deposit Once per Month

[Select calendar day]

Step 4: Set Amount

Display amount field

[Set auto-deposit]

Writing this out for each step helps you better understand what your users will experience, how they’ll behave, and gives you a chance to hone the microcopy.

To learn more, check out UX Designer Marek Bowers’s popular article on user flows, in which he explains what they are, why they help, and two different methods for creating them.

Additional UX Advice

To learn more UX best practices, check out our new 109-page e-book The Elements of Successful UX Design. We’ve deconstructed examples from 24 companies like Buffer and Slack to explore why their products are so successful.

Download this free e-book with 109 pages that deconstruct the seven elements of successful UX with 24 examples.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you