UX: Are You Overlooking Your Website’s Microcopy? [+ 7 Key Takeaways]

— 7mins 41secs —
wireframing ux design

When thinking about creating a good user experience for your website, it’s common and perfectly natural to zone in on the bigger stuff like design, fonts, content and user flows. But there’s another essential element to creating good UX, and it’s often overlooked. It’s called microcopy, and it’s a big deal.

What is microcopy?

Microcopy is the term used to describe the smaller pieces of copy found on a website or app that help users carry out certain tasks and get from one place to another. Common microcopy examples include things like:

  • Buttons
  • Error messages
  • Contact form instructions
  • Typing prompts
  • Tooltips

Ranging from single words to short sentences, microcopy elements all serve a very important purpose. And, given that these little words seem so minor when compared to the design and build of a website, you might be surprised at just how big their impact can be.

When done well, microcopy can help users complete tasks, get to where they need to go, and even increase conversions for your website (that might be a completed sale or a customer filling out an enquiry form, for example).

Deceptively simple

Again, because they’re so small, instances of microcopy might sound simple to implement, but they can be tricksy. Let’s take a simple button as an example. You might use ‘Make an Enquiry’ as your button copy to encourage users to click through to a contact form page about, let’s say, a new kitchen. Makes perfect sense.

But what if your users are browsing on your website thinking ‘I wish I could ask a question about this kitchen range before I go any further’?

That simple variation in wording (‘ask a question’ v.s ‘make an enquiry’ could make all the difference when it comes to how many people will actually click that button. If it ‘speaks their language’ and matches their mental model (what the user believes about how a product or experience works), they’re more likely to click it.

Which leads us on to …

A quick note on microcopy research

Understanding how your target audience ‘speaks’ is a key step to nailing your microcopy. You can do this through a series of simple research methods including interviews with users who match your target audience demographic, user testing exercises on your existing website, and a technique called ‘social mining’, whereby you visit forums, social media groups and reviews of your own (or competing) products and highlight keywords that are used most often. Those keywords will then give you a list of tailored language guidance that you can use to inform your microcopy.

How, why and where you should use microcopy

To get you started on your microcopy overhaul and application, here’s a rundown of the most common places and reasons you might need microcopy on your website or app.

Reassure and alleviate users’ concerns

Microcopy is one of the best tools in your arsenal when it comes to reassuring users as they navigate your website or app. This is particularly important on sites involving making purchases or making long-term commitments to a service, where users are more likely to experience feelings of doubt or concern. It’s in these cases that a little reassurance can go a long way.

Take this example from Grammarly, which uses clear and direct microcopy on this call to action button, while also adding a touch of reassurance for the user with ‘its free’.

screenshot of grammarly app

Just in case anybody was thinking ‘hang on, there might be some kind of hidden subscription costs behind this button’, this tiny bit of copy eliminates that concern completely.

Other examples might include saying things like ‘we won’t pass on your details to third parties’ or ‘we won’t ask you for this information again’ – anything that might help build trust, make users feel more secure or make them feel more inclined to interact with your website by alleviating common concerns.

Inform and Instruct (error messages & tooltips)

Good microcopy needs to be present at every stage of the user journey to help guide them through the steps you want them to take, and to set them back on the right track if something goes wrong.

Error messages are a key area where many websites fall down. Common mistakes include using jargon (like displaying developer software error codes), blaming the user (‘You didn’t enter your email address correctly’) and not telling the user what went wrong or how to fix the problem (‘Oops, something went wrong!’). All of the above error messages will lead to confusion, frustration and even potentially the abandonment of the user journey, so it’s important that your copy helps to avoid this at all costs.

A good error message should do three things:

  1. Tell the user what the problem is
  2. Tell the user why the problem happened
  3. Tell the user how to solve the problem

Here’s an effective one from Mailchimp (a widely-recognised microcopy champion), which offers a polite apology and provides the user with some help in solving the problem, complete with a hyperlink to click and move to the next step.

mailchimp login page

As well as providing assistance when a user (or your website) makes a mistake, microcopy can also be used to direct and instruct users to help mistakes being made in the first place. These come in most handy for filling out online forms, where user errors and ambiguity are common barriers.

Let’s head back to Mailchimp for another example. You’ll see in the screenshot below, the form includes a handy dynamic prompter section beneath the password field to help users create a password in the correct format and with all the required elements. This helps head off any frustrating error messages before they occur.

In this instance, the user knows they still need to add a number and a special character to make a suitable password.

mailchimp sign up page

Keep it snappy

Microcopy is so named because it’s supposed to be ‘small’. It exists to aid and assist your users, so think about the actions you want them to take and the results you’re looking for when scripting your copy.

Users don’t want to read long-winded instructions on how to fill out a form, they want to get from start to finish as quickly and as easily as possible. There is always a way to achieve this with short, snappy, simple words and phrases.

Here’s an example from Basecamp. Notice the short, to-the-point sentences beneath the request for the email address?

basecamp enter email field

These tell the user why they need to enter their email address and what the address will be used for. It also gives a gentle prompt to get users to double check the email address is correct, which will help prevent those error messages we want to avoid.

Try reading your microcopy snippets out loud. If it sounds too long, and if it looks too long on the page, the odds are it is too long. There’s no harm in testing out several variations on your users to see which one works best, so don’t feel pressure to get it absolutely right in one attempt.

Keep it relevant and pick your moments

Microcopy is all about placement as well as what you say. Well-placed and well-timed copy can mean the difference between a user completing an action you want them to take, or losing interest and/or changing their minds. Remember our ‘It’s free’ button copy example earlier from Grammarly? Take a closer look at the additional microcopy below it.

grammarly add to chrome

It’s deliberately subtle so as not to be pushy, but this little extra snippet of microcopy is expertly placed and timed at the pre sign-up stage to give users that little extra incentive to click that button. These little extras can be added at all crucial stages of the user process, whether it’s a ‘Free Delivery’ promo icon beneath an add to basket button, or if it’s a little boosting fact like Grammarly’s above, these are great ways to use microcopy. Just make sure it’s always in a relevant place within the user journey (and nowhere else!).

Those are the basics of applying good microcopy to your website or app. Here’s a summary of the most important takeaways and tips you can use to inform your microcopy creation:

7 Key Takeaways:

  1. Write for humans. Always use plain language, free of jargon and overly-complex words. Have a conversation – think about how you would say it aloud if you were speaking to a real person.
  2. Make button labels describe the exact action a user is taking when they click it. e.g. ‘Start Your Free Trial’ or ‘Proceed to Payment’. The user needs to know precisely what will happen when they click that button. If unsure, they might not click it.
  3. Always tell the user how to fix a problem with clear, considerate error messages.
  4. Use microcopy to address user concerns and help alleviate them. Conduct user research first to find out precisely what those concerns are.
  5. Only show microcopy at the exact place and time when it becomes necessary to the user.
  6. A/B test your copy * and revise it regularly based on the insights you gather.
  7. Have some fun. There’s plenty of opportunity to weave elements of your brand identity into your microcopy, don’t miss out on this!

*Read more about A/B testing, user testing and analysing the impact of your website copy and design in our post about Conversion Rate Optimisation.