The term “microcopy” refers to the small bits and pieces of text that are ubiquitous in the things we consume and experience every day. That includes the copy you see not just on websites and apps, but also ads, packaging, road signs... you name it.
Microcopy is often not formed into full sentences (hence the “micro-”), but these fragments of text pack more than a full punch in meaning.
The craft of words at a micro level, considering how words can satisfy a functional requirement by aiding and improving design interactions, enhancing interfaces for both function and delight, and helping a user on their journey.
The label on a form field? That’s microcopy.
Confirmation text after placing an order? Microcopy.
That punchy button enticing you to push it? Microcopy.
Quippy, one-liners that stick in your brain and get you to read on? Microcopy. Microcopy. Microcopy.
In essence, microcopy helps the user navigate a product (what to do, and how to do it), provides context to their experience, addresses user issues (can you say “error messages”?), and helps to construct a concise brand narrative, however short the snippets of words themselves may be.
Once you understand what microcopy is, you’ll start to see it everywhere—because it is everywhere.
You might expect that snappy “call to action” to be the work of a content marketer or PR professional, or for that disclaimer about user privacy to be the work of a robust legal team. But they’re just as likely to have been created by a proactive UX designer well versed in the power and importance of strong microcopy.
Why microcopy matters
Now that you’ve grasped the fundamental idea behind microcopy, you may be wondering why it’s such a big deal. Well, the answer to that is: lots of reasons.
First, studies show that people don’t read in the same way online as they do offline. On the web, people skim-read, with most only scrolling through 50–60% of an online article. Interestingly, this has actually changed the way we read and comprehend longer-form writing.
In 2008, Jakob Nielsen of Nielsen Norman Group conducted a study that further solidified the trend in—and the need for—brevity on the web. He found that, on average, users read less than 20% of a website’s content.
This wasn’t entirely new information—the writing was on the digital wall following studies conducted over a decade earlier. Back in 1997, testing found that websites with concise, scannable, and objective writing improved usability by a staggering 124%.
Eye-tracking testing indicates that online users read in an F-pattern.
Big blocks of text can intimidate web users and cause a lapse in attention long enough to lose them altogether.
Microcopy, on the other hand, is short, targeted, and specific—so the stakes are low when it comes to cognitive load. When microcopy is done well, users can easily navigate the bite-sized text without confusion.
It may seem like microcopy plays second or even third fiddle to the design of logos, interfaces, even the interactions themselves—but in reality, these tiny clusters of choice words have the potential to directly and massively impact sales conversions and, ultimately, business success.
How, you might ask?
By addressing user pain points through small, seemingly simple and easily implemented adjustments that improve the overall user experience. All of these incremental improvements in turn increase engagement and translate to more sales and more profit.
An e-commerce site that increases its purchase rate by just 5%, for example, could see results amounting to hundreds more orders and tens of thousands more dollars a month—ultimately a huge boost in revenue.
What are you looking for today? Go ahead, type it in here! (Also, notice how Yelp’s layout here is composed almost entirely of microcopy elements used graphically).
Just look at the example of Yelp’s homepage banner. With the additional of three simple, seemingly unrelated words, Yelp has done an effective job of telling the user exactly how their product is meant to be used without having to explicitly spell it out. Here, by giving the user a little jumpstart of inspiration, Yelp’s microcopy shows the user what to do, rather than explaining it to them.
According to a study of 27 different websites by marketing agency Branded 3, users who use site search convert more than twice as often as those who don’t—from 2.41% to more than 5.45%.
Good microcopy elevates the entire user experience and makes it more persuasive.
Examples of good microcopy
Have you ever been excited about trying a new platform, only to get hung up on something simple? Like picking a darned username?
The best microcopy results from paying attention to users and how they behave, what makes them nervous and where they often get tripped up.
I’m partial to “GreatPoetryKoala”—thanks for the suggestion, Tumblr!
Tumblr’s solution for the intimidating business of selecting a username was twofold. First, they provide a list of suggestions, including “GreatPoetryKoalo,” which I happen to love. Second, they alleviate the stress a user may have over making such a monumental decision regarding their online persona by adding the disclaimer, “You can always change it later.”
These six words remind the user that nothing—not even their username selection—is permanent. By doing that, they resolve the hesitation the user might have had about making the wrong choice. Had the reassurance not been there, that user might have abandoned the signup process entirely.
This also shows that, if we want to write good microcopy, we have to take the time to get to know our users.
Do you find that your checkout process is often riddled with errors, particularly around the billing address associated with a user’s credit card?
Image credit: Bokardo
Be sure to enter the billing address associated with your credit card.
This simple, clean reminder will reduce that error drastically.
A study conducted in 2012 found that many users were frustrated by the requirement for seemingly unnecessary personal information through the purchasing process.
During user testing at Apple.com one test subject refused to give up her phone number, anxiously clamoring: ‘Look, why do they need my phone number? What do they need that for? They don’t need it!’
Image credit: Baymard Institute
Every test subject, at one point or another, complained about this—but when the business added a little bit of microcopy explaining why that particular information was needed, the user was surprisingly quite forgiving, and accepted the requirement.
Microcopy can take these little interactions and improve upon them, and when taken to the next level, they can even move into the realm of delight! If you follow the InVision blog or get their emails in your inbox, you may have noticed that their button copy is on point:
Just look at those punchy buttons!
By opening up their button copy to be more than the predictable “read more,” or “click here,” they’re adding character to their brand and delight to the user experience—in turn improving their chances of getting the reader’s attention. Also, if you’re a millennial like me, the 80s references abound. (Can you say, “Bueller? Anyone?”)
Examples of bad microcopy
It’s surprising how often microcopy is entirely overlooked in the design process, or treated as an insignificant afterthought.
It's undoubtedly a serious misstep for a UX designer to ignore microcopy in a design process—because bad microcopy can seriously undermine user experience once the product is live.
While the website functions well, the page not found error messaging could use a little pizzazz.
Happily, as the industry gets wise to the power of strong microcopy, egregiously not-thought-through examples are getting harder to find.
Though I suppose no one can blame Blockbuster—with only nine bricks-and-mortar stores still open across the United States—for investing their design bandwidth into something other than error pages.
Blockbuster Seattle is no more
By failing to design for a standard “page not found” error, Blockbuster misses an opportunity to keep the user engaged. Falling back on the default browser “404” page also means they lose control of brand voice, and interrupt the user’s overall experience of the website.
Little design concessions like these over time can slowly chip away at the esteem and trustworthiness a brand conveys to its users.
However, sometimes these concessions are not as obvious. Here’s an example from PayPal’s desktop sign-up screen:
Is “Next” good button copy here?
On the whole PayPal’s microcopy isn’t bad—the company have refreshed their brand over the years, and the site feels up-to-date and is generally in line with contemporary design conventions.
But, perhaps surprisingly, their button copy leaves a little more to be desired.
The next screen has the very same “Next” button.
The button does partially describe the action. But it doesn’t effectively inform the user of what the “next” step actually is (in this case, it turns out to be more input fields about personal information, followed by another “Next” button). For a busy user without time for a lengthy signup process, this lack of insight could cause them to abandon it altogether.
Maybe they come back to it later, or maybe they don’t. Maybe they decide to look into a competing service like Venmo, and are swayed by their compelling microcopy.
The button microcopy alone tells users they can connect using Facebook with just one click
The actual process of setting up accounts with both PayPal and Venmo, and linking them to your bank details, is likely quite similar. But by making its landing page microcopy more specific, Venmo does a better job at showing new users just how simple it is. We, the user, know it will take just one click to connect our account through Facebook. And in a world where users are often crying out for simpler flows and fewer clicks, this really does matter.
Stash, an online “robo-investment” service, has a simple two-set account creation set up, supported by clear and concise microcopy.
Microcopy dos and don’ts
It’s true that not every project warrants investment in every conceivable detail of microcopy. But almost all projects will benefit from working on the following microcopy essentials:
Form field labels
Contextual form field error messages
Page not found (“404”) screens
If you address these in the planning stages, determine what your microcopy needs are (hint: ask your users!), you’ll lay firm foundations for successful implementation.
Even with more and more designers, developers and businesses jumping on board the microcopy bandwagon, there are quite a few ways to undermine its effectivity.
Here are a few of my top what-not-to-dos to avoid bad microcopy:
Make sure it’s not too wordy. People don’t read like they used to, remember? And if your microcopy is too long, it’s not “micro” copy at all. It’s easy to want to stuff your sites with SEO search terms, but the leads they generate are useless if the product isn’t authentic and attractive enough to catch a user’s attention in seven seconds or less. Keep it short and punchy, people!
Write for your users, not you. The world is filled with external products written for an internal audience, complete with all that corporate jargon that’s meant for the design team and stakeholders, not for users. Remember who your real audience is. In order to appeal to them, you’ll need to drop the industry buzz words and write in a way that speaks to them directly.
Ease direction, not misdirection. This is one of the easiest mistakes to make with microcopy—the lack of helpful actionability. Remember that the whole point is to ensure the user doesn’t get lost. Copy is there to light up the path for the user. If a form doesn’t explain an error well, the user may get frustrated or confused and give up before they figure out how to fix the problem. Make it easy for them by incorporating directional microcopy.
And don’t forget, this is just a start. There are tons of resources out there with thoughts on how to take your microcopy from bad—or non-existent—to top-notch. Check the “More Resources” section below for further reading.
One of my favorite examples of thoughtful microcopy, converting the frustration of Evernote’s error page with a bit of delight.
7 steps to building better microcopy
To wrap things up, let’s talk a bit about process. Everyone’s is different, but here are a few of the steps I’ve worked into my microcopy routine that have served me and my clients well.
Step 1: Build microcopy into the design process
Allocate time and resources for this at the beginning of the design process and save yourself countless hours of re-iteration later. And if there’s no one on your team with copywriting experience, hire a professional copywriter. Your clients will thank you later.
As a user myself, there are few things as satisfying as Mailchimp’s encouraging “Rock On!” schedule confirmation messaging.
However you tackle it, make sure you plan for microcopy at the beginning of the design process. As famed author John Steinbeck said, “Bringing writers in at the end of the creative process is like trying to put toothpaste into a tube.”
Step 2: Know (and write to) your user
Just like in all other aspects of UX design, familiarity with your user will help you zero in on your users’ needs, and identify how you can best facilitate their experience through the addition of a few choice words.
First, pore through your user interviews, or if you’re already at the prototyping stages, your usability tests, and take special notes of frustrations, motivations, and pain points that could be addressed with a little bit of designed microcopy:
Where are the instructions unclear? Is the user getting lost anywhere along the primary task flow? If so, what is the source of the confusion?
Is the navigational flow straightforward and easy to move about in?
Does the user get caught up wondering “why” they’ve been asked to do something?
Compare the before and after of these two screens from my KAUS Insurance project in Phase 1 of UX Academy:
Before: a low fidelity form-filling screen from my KAUS Insurance prototype
After: a couple iterations later and… voila!
Usability tests indicated that users were a little put off by being funneled into field entry screens without any indication of how long the form would take or how many questions they would have to answer. Adding the numbered step navigation alleviated this frustration and the hesitation that came along with it, and allowed the user to easily navigate back and forth between questions.
Adding a bit of microcopy to describe the steps was a suggestion that my mentor threw in as a way to further elevate the experience. It keeps the whole interaction on-brand, while giving extra help to the user.
Step 3: Keep it short
Copy should be a guide, not a crutch—so be brief. This is especially true of microcopy. It’s all in the name. You can’t fix your design with copy, but you can improve it. Use copy to solidify how your product speaks through the design, and allow it to complete your user’s experience of the brand.
Remember, most online users don’t read both at length and in depth, so keep it to the point. Hers’s a good rule of thumb from Bill Beard at Smashing Magazine:
If you can’t explain what a user needs to do in eight words or fewer, then reconsider the design.
Step 4: Write (on brand) with authenticity
Every piece of microcopy within your product is an opportunity to reinforce your brand’s values and tone of voice—but don’t get carried away with humor where it’s not always necessary. Remember, you’re writing to your users, aka other human beings.
Setting a strong tone for your brand is essential, and can make all the difference, but be wary of overbranding, especially on instructional or otherwise straightforward interactions, like navigation elements. Overdoing it could mean that you end up confusing the user rather than clarifying things.
Step 5: Contextualize
The “content-first” approach is great, but content is nothing without context. Every time you iterate, take the time to go back and trace the user’s “contextual flow,” i.e. their experience of moving through various steps and tasks. Pay special attention to consistency in messaging.
For example, somewhere down the iteration timeline with KAUS, I realized that I had built in some mixed messaging to my prototype.
The top view of my the KAUS Insurance landing page.
On the KAUS Insurance landing page there are two call-to-action buttons that. Essentially, both of them funnel users into the “My Custom Policy Builder Tool”, but the messaging for each was quite different. On the top CTA, the button says, “Get a Quick Quote!”
Alternate CTA on the bottom of the KAUS Insurance landing page.
On the bottom CTA, the button messaging says, “Build Your Policy!”
When I revisited my KAUS purchase user flows, however, I realized that this mixed-messaging may be confusing for a user who finds the landing page via a Google search for a quick insurance quote.
KAUS Insurance purchase user flows.
This context is key for capturing that particular user, and is something that I will need to address in future iterations.
Step 6: Associate action
Every bit of microcopy should be supporting users and guiding them through the various actions you, as the designer, are preparing them to take. Microcopy without an associated action can easily become clutter. And even if it’s the most cleverly written copy on earth, if it lacks a distinct purpose and function, it’s likely no one is going to read it anyway.
If you’re unsure how your carefully crafted microcopy ended up in this no-man’s-land, go back and review Steps 3 through 5.
Step 7: Test and iterate!
The best way to see if your microcopy is clear, contextual, and actually supporting the usability and overall experience of your product? Test it with real users, iterate, and test again.
When I first start writing out my microcopy content, I go through the low-fidelity wireframes first and start jotting down action points that are aching for some quippy copy. I then do some quick brainstorming of 5-10 alternate lines, words, and formulations, so that I have multiple options for each element. (Check out the SCAMPER Technique for some ideas on rapid idea generation).
Consider different variations of microcopy
I narrow down my favorites to a choice three or so, and then create different versions of the prototype, each with the associated microcopy, and run some A/B testing (or in some cases, A/B/C).
Yes, let’s do this thing!
This is how I jazzed up a simple sign-up button, which got a great response from my test participants! At this point, the user has already gone through the entire quote process and built a custom policy that fits their needs; they’ve adjusted the price and coverage, and customized their purchase.
All that's left is creating their account (by typing an email and password) and inputting payment details. They’re near the end of the process, and they know it. The microcopy effectively delivers a reward for making it this far, and amps them up for the final step.
However you choose to approach your microcopy, the moral of the story is: whatever you do, just don’t ignore it altogether—the worst thing you can do is nothing at all.
Interested in reading more? Check out the below resources for more in-depth study of microcopy philosophy and methodology.