Get in touch

+44 (0) 28 9099 2882
deeper@fathom.pro

Fathom

Microcopy: The next small thing in UX

Microcopy: The next small thing in UX

I wonder how many companies are put off investing in user experience because, when they hear it explained to them, they think ‘oh gosh, not another big website project to drive me over the bounds of sanity.’ But UX improvements don’t have to be big to be powerful. A perfect example of this is microcopy. If you’re not sure what this term means, keep reading. If you’re familiar with microcopy, and you’re just looking for some practical examples, scroll on down – there are tonnes of brands and platforms who are masters of microcopy.

What is microcopy?

Here is a nice definition of microcopy from a writer at Adobe:

‘The term “microcopy” refers to the tiny tidbits of copy found on websites, applications, and products. These short sentences tell a user what to do, address user concerns, provide context to a situation, and help tell the greater story about your brand, product, and the way you do business’ (Lyonnais, 2018).

Microcopy can be found on buttons, forms, email inboxes, billing information, set–up guides and just about anywhere you can think of.

Microcopy is a gift to your users. When it’s designed right, it gives your users what they need, it makes them smile (or at least feel less anxious) and it encourages them to behave in the way you want them to.

My micro–definition of microcopy is any instance where a designer has used deliberately thought–out language to go the extra mile for the user (or at least an extra line).

 

ebay microcopyEbay’s less robotic version of ‘404: page not found.’ Retrieved from https://www.ebay.co.uk/n/error.

OK, but why should I care about microcopy?

Joshua Porter, who is said to have coined the term in 2009, explains that examples of good microcopy ‘help to alleviate concerns of would–be customers. They help to reduce commitment by speaking directly to the thoughts in people’s heads. That’s why this copy can be so short yet so powerful.’

You should care about microcopy because designing it thoughtfully can alleviate a user’s worries, provide helpful error messages, make language less ambiguous and help provide context to user actions (Babich, 2016). From a business perspective, focusing on very small written details on your website or digital product to make incremental, testable changes has the potential to boost conversions at minimal cost (McCoy, 2014).

12 examples of good microcopy

Good microcopy is everywhere if you peel your eyes and look for it. It’s no surprise that most of the examples listed below are from well–known, hugely successful brands and online service providers. These companies recognise that even the smallest expressions of written communication deserve the same treatment of research and testing as other aspects of design. Let’s look at the results.

 

1. Instructions

One of the most common mistakes designers make is to assume the user knows what they’re supposed to do. One of the most common places we see this is on forms. Registering with O2 isn’t a typical process of entering name, email address and password – users are asked to enter a mobile number to receive an authentication code. Helpfully, O2 explain exactly what both they and the user will do next, as well as instructions for what to do if you already have an account. And look at those CTAs – nothing is left to the imagination with ‘Send me the code’, ‘Cancel – don’t register now’ and ‘Help me sign in.’

o2

 

02 registration page. Retrieved from https://accounts.o2.co.uk/register.


2. Errors

Top tips for error messages are: don’t be rude, don’t be robotic and don’t leave the user guessing what went wrong and what they can do to fix it. Take a leaf out of Slack‘s book – take responsibility for the error and offer a solution.

slack error message

 Slack error message. Retrieved from https://slack.com/signin.


3. Confirmation messages

Booking.com do a great job of recognising the anxieties that comes with booking a hotel room – ‘Do I need to keep this tab open until I’m near a printer? – Nope, my confirmation’s in my inbox. Ah, I forgot to book breakfast! Great, I can modify my booking right away. Hmm, how do I go about expensing this to my company? Oh good, pricing details are in the next section.’ Nice touch with the personalised ‘thanks’ and those rewarding green ticks too.

Booking.com microcopy

Booking.com confirmation message. Retrieved from booking.com.


4. Button labels

The most important thing about buttons is that the outcome should always match the user’s expectation – because life’s too short to worry about what will happen if you click a button. Look at how Airbnb have made it crystal–clear what will happen when you click the big red CTA – not only does ‘Request to book’ tell the user that there will be a period of consideration before the booking is made final, but below the button there is reassurance that your money isn’t going anywhere yet. I also have to give it to them for that bit of persuasive copy at the bottom.

airbnb microcopy

Airbnb booking form. Retrieved from Airbnb.co.uk.


5. Form labels

At Fathom, we are big fans of the Gov.uk Design System (GDS) and what they have achieved in terms of user–centred design and information architecture. We often draw on their research around accessibility and reducing the amount of content on the screen to ensure users don’t feel overwhelmed when making important decisions. Here’s an example of a form field in the application process for MOT reminders. Users may have multiple forms and documents to hand at this stage (such as their V5C vehicle registration certificate). Look at how they’ve supplemented ‘Registration number’ with ‘(number plate)’ and even given an example to clear up any ambiguity about what they’re asking for. There’s even a helpful details component at the bottom in case users are on the wrong page.

Gov.uk MOT reminder registration form

 

Gov.uk MOT reminder service sign–up process. Retrieved from https://www.reminders.mot-testing.service.gov.uk/vrm.

 

6. Form placeholders

A form placeholder is a piece of microcopy that tells the user what type of data a form field allows them to enter (and sometimes the format too, for example when entering a date). Skyscanner makes it clear that you can be as vague or precise as you want when entering locations, which is really useful whether you’re in a hurry to price a business trip or just perusing destinations for your honeymoon.

  Skyscanner placeholder copy

 

Skyscanner form placeholder microcopy. Retrieved from https://www.skyscanner.net/.


7. Empty states

Microcopy in empty states is another kind of placeholder, this time used to give the user suggestions or instructions, or simply to inform them that there is currently no content to show on this page or element. Harvest have cleverly played on the theme of time in their time–tracking platform; when you view a day where no hours have been logged, instead of a blank screen the user instead sees a randomly chosen quote from famous figures and literature about – you guessed it, time.

 

Harvest empty state

Harvest empty state microcopy. Retrieved from https://www.getharvest.com/.


8. Concern alleviator

One of the best ways microcopy can be used to increase conversions through improved user experience is by alleviating users’ concerns at critical points in their journeys. Right at the beginning of Netflix‘s sign–up process, before pricing is even mentioned, the user is presented with a list of bullet points that clear up three pain points that have likely come straight from user research: ‘Is the first month definitely free? How will I remember to end my trial before they charge me? Will I get locked into a yearly contract?’ Showing how many steps are left is also a tried and tested way of helping to move leads along the sales funnel.

netflix

Netflix sign–up. Retrieved from https://www.netflix.com/signup?action=startAction&locale=en-GB.


9. Persuasion

One line of text has the potential to persuade users to think, feel or behave exactly as you want them to. An effective way of doing this is to make promises to the user that are just too well–worded to dismiss. Have a look at Go–To Skincare‘s email sign–up form; this absolutely speaks the user’s mind by acknowledging that most newsletters we sign up to get opened once and never again because, well, they’re kind of annoying. Then there’s ‘Pop your email here and we’ll prove it’ – how could anyone who’s vaguely interested in Go–To’s products resist that bold self–confidence?

Go-to Skincare microcopy

Go–To Skincare’s email sign–up microcopy. Retrieved from https://www.gotoskincare.com/.


10. Social proof

Handing over your bank details to a faceless corporation on the internet isn’t something people do in a hurry (or at least they shouldn’t). But making people do exactly that is what keeps the lights on at PayPal. How do they do it? Have a look at PayPal’s homepage. At the time of writing this article, there are five separate occasions where the word ‘million’ is used:

  • ‘Shop on millions of websites’
  • ‘Find out why over 20 million UK shoppers use PayPal each year’
  • ‘Join 7 million businesses around the world’
  • ‘Join 200 million Paypal users worldwide
  • ‘With just one account, you can shop at millions of websites around the world.’

Social proof is the principle that says people are more likely to do something if it seems like a normal thing to do. PayPal’s number one value proposition to the average joe is probably convenience at online checkouts. Who has time these days to dig out their bank card and triple check they’ve entered those 16 digits correctly? But on PayPal’s sign–up page, there’s one solitary piece of microcopy above the form that tells you all you need to know – everyone’s doing it, so it must be safe.

Paypal microcopy

PayPal’s registration form. Retrieved from https://www.paypal.com/welcome/signup/#/email_one_password.


11. Loading and progress messages

Life’s too short to waste time looking at loading screens that aren’t providing value. Fortunately, site speeds are getting faster, which is itself a big factor in improving UX. But for the times when you simply have to let things load in the background, there is an opportunity to keep users engaged with small snippets of copy. Each time users search for flights on the Emirates site, they are presented with a different message conveying a benefit of flying with the UAE luxury airline, along with a nice animated graphic of airplanes circumnavigating a world map.

  Emirates microcopy

Emirates loading screens. Retrieved from https://www.emirates.com/uk/english/.


12. Delight

Is it really a blog on microcopy if Mailchimp isn’t mentioned? Behold the masters of creating moments of delight through short sentences. Every marketer can relate to that moment of dread before they send out an email to their entire subscriber list – you’ve proofread it, got someone else to proofread it, and proofread it again for good measure, but you’re still haunted by last month’s announcement that you were the company’s head of pubic relations. Mailchimp understands the pressures we endure, so to get us through these hairy (sorry) moments they not only provide a final chance to cancel the distribution of your email, but they create a sense of camaraderie by acknowledging the weight of this action: ‘This is your moment of glory.’

Mailchimp microcopy

Mailchimp pre–send microcopy. Retrieved from https://mailchimp.com/help/create-a-regular-email-campaign/.


Microcopy and UX

To go back to my opening statement, the term ‘UX’ has become so synonymous with lengthy workshops, months of sprint planning and notions of expensive digital transformation that organisations may think ‘we’ll keep doing what we’re doing for now, and see what budget we have available next year.’ But consider the examples above; in most cases, bits of microcopy have been added to the pages in such an unobtrusive way that very little work has been needed to change the design or build of the sites. Doing UX research doesn’t have to result in massive makeovers. Sometimes the best results come from simply asking users ‘what are you feeling at this point?’ and making small changes to show you understand their point of view.


References

Babich, N. (2016) Microcopy: Tiny Words With A Huge UX Impact. Available online: https://uxplanet.org/microcopy-tiny-wordswith-a-huge-ux-impact-90140acc6e42.

Jovanovic, M. (2019) Words and Actions – A Guide to Microcopy. Available online: https://www.toptal.com/designers/ui/microcopy.

Lyonnais, S. (2018) The four cornerstones of writing UX microcopy, on Adobe blog. Available online: https://theblog.adobe.com/four-cornerstones-writing-ux-microcopy/.

McCoy, J. (2014) What is Microcopy and How Can It Help Your Website? Available online: http://www.sitepronews.com/2014/12/23/what-ismicrocopy-and-how-can-it-help-your-website/.

Porter, J. (2009) Writing Microcopy, on Bokardo. Available online: http://bokardo.com/archives/writing-microcopy/.

Roberts, S. (2017) Microcopy: a taxonomy and synthesis of best practices. Available online: http://www.stratonroberts.com/projects/microcopy/Microcopy.pdf.

Yifrah, K. (2017) Microcopy: The Complete Guide, on Writing Microcopy. Available online: https://www.writingmicrocopy.com/.

 

By Andy Robinson

Andy was a UX Researcher with Fathom until July 2021, when he moved on to take up a role at Rapid7.

View more insights by Andy

Like to read more of our insights regularly?

Receive our monthly insights newsletter straight to your inbox.

To prove you’re a human please rewrite the following into the box below.
dszb6i7k

Latest from the blog

Our latest views and ideas

Our Cookie Policy

Find out more I accept

Like most websites, ours uses cookies to make sure you receive the best experience possible. These cookies are safe and secure and do not store any sensitive information. To continue, please accept the use of cookies.