Microcopy: an essential guide to becoming a more literate designer
By: David Hall
Tags: Product Design, Ux Writing, Writing, User Experience, Microcopy

The obvious difference between these two onboarding visuals is that option A is devoid of words and is absolutely useless. No direction, no guidance, or calls to action, nada. This point is so blindingly obvious (I’m yelling at the screen), that it’s impossible to deny.

Over many years, I have noticed designers having a blind spot for words and language, leaving it till the last minute to dollop text unceremoniously from a height onto the beautifully rendered design. Not through any malice of designers, but through the demands and expectations of the job. I have been guilty of doing this myself. We are all sinners and I am now flagellating myself in public.

Make or break the user experience

Microcopy is the small text you find on websites and apps such as button text, section captions, page titles, form labels and error messages. Small words have a big impact, visually and psychologically, but this separation of words and image in our visual mind is an easy trap for designers to fall into.

I like to think of microcopy and textual content as another design element that can make or break a user experience.

Good microcopy helps the user navigate their way through a digital experience, maximising meaning in a condensed manner, and with space at a premium, every word should count.

Don’t be mere decorators, be literate designers

Being a literate designer means paying attention to the text, thinking of microcopy as an essential consideration in the design process, an element that can alter the concept, and influence the solution. Aesthetics and words go hand in hand. It is also a basic skill that all designers should cultivate.

Why don’t we do it? Well, it can be bloody hard work to write good microcopy that serves the user well. If the budget allows, we can bring on UX writers to our team, which is ideal, but in reality, many companies see this as a luxury they can’t afford.

In the absence of those dedicated UX writers out there, we need to become more rounded designers and start crafting better microcopy.

Graphic designer Lucine Robert wrote some time ago that, ‘Designers are not just decorators and aesthetes — pattern-makers using letterforms as their palette of marks — but individuals responsible for the intake of information.’

Examples of microcopy

I’m almost fond of these classic and spectacularly awful error messages you see from time to time, even though they cause heartburn.

Really?

Arghhh, I don’t know what to read. My eyes are bleeding.

But let’s not concentrate on the bad. When done correctly, we immediately reposed to well written, clear, and concise microcopy.

Mailchimp signup

Mailchimp is renowned for its friendly tone using clear titles, unambiguous supplementary text, and clearly presented password rules.

FigJam onboarding

Figma’s whiteboard tool uses attractive tooltip onboarding to guide the user. What works here is the combination of good visuals with clear text.

Asana Messages

The well-considered input placeholder text guides the user. I like the hint text on the side panel. The well-placed text to the left of the Discard and Send buttons gives reassurance, and alerts the user to the number of people being notified.

The Noun Project password reset

The Noun Project injects a little dry humour in what is an inconvenience, yet it is also clear what will happen next.

What all these screens have in common is clarity, with well-written sentences that tell the user what to do or what will happen. Yet they also have a hint of personality, and don’t feel like an afterthought.

The important roles of microcopy

Microcopy fulfills a wide brief and has many roles