Good website design is always about words, especially when there aren’t many of them. Brevity is of vital importance when engaging readers, because, as we know, Hell hath no fury like an inpatient user scorned. That’s where microcopy comes into play.

MicroCopy

What is microcopy, you ask? It can take on a variety of definitions, though its simplest breakdown is as such: The snippets of text that answer questions and nudge your readers toward conversion. Everything from navigation to ad to button text could be considered as microcopy.

Of course, it’s more than just that. Microcopy is as much an educational tool as it is a pathway toward improving User Experience (UX). It should set expectations, promise to meet those expectations, then exceed those expectations. Most importantly, good microcopy should be so unobtrusive in its use that your readers won’t be consciously aware that they needed it. All in as few words as possible.

What may seem like a task so daunting it borders on impossible, writing your site’s microcopy is certainly doable. When done correctly, you’ll enhance your users’ experience with functional text so fluid it’ll feel like a swimming pool—in a good way.

Let’s swim through ways you can expertly craft delightful microcopy that stays in step with your company’s voice and establishes a rapport with your readers.

Reading & Understanding the Fine Print

It might not be a sexy topic, but microcopy is like the knob to your site design’s front door. So, how welcoming is your entrance? If the answer is “not very,” then you may be in need of some word beautification.

Choose Your Words Carefully

You probably know that using the verb “buy” likely garners more clicks than the verb “get.” Good—that’s microcopy at its core. As true as it is when writing poetry, a single word or term can completely change a reader’s impression, interaction, and comprehension of the intended pitch. Whether in a form field, error message, button, or navigation, microcopy can have a massive influence on conversion and click-through rates.

Consider this image from Veeam as a prime example. Changing their link anchor from “Request a quote” to “Request pricing” increased their clicks by over 161%. Nifty.

Veeam Before

Veeam After

Photo: conversionxl.com

Clarity Seekers

A lot of company’s failures also come from the “clarity” department.

We tend to get lost in our own minds, grasping at industry terms and jargon as if they were our dying breaths. Users don’t want that—not typically, that is. If you operate an e-commerce site or are a client-facing local business, don’t get caught up in slang. Unless your industry and audience warrants technical jargon, it’s better to use short, snappy language and identifiable terms. Even if you do use industry language, simplify it, fool! (If you need an example of simplification done right, check out Etsy’s legal page.)

Slang also includes abbreviations, excessive hyperbole, and acronyms. Using these can add distractions, making it more difficult for readers to understand the underlining substance. Ultimately, the goal of creating microcopy is to help the user roll through your site as if it were a well-laid train track. Any added contextual diversion just gives them a reason to get off at the next station. No—we want their experience to be based on a seamless transition from beginning to end.

There is a caveat, however; if slang adds to your brand voice, use it in microcopy when the opportunity arises. Seamlessness works both ways—just be sure there aren’t two trains running into each other to do it. Over-branding on actionable microcopy (think: form labels, buttons, instructions, etc.) can be a risk, so always consider how your voice might impact a user. In theory, though, branding should probably be the crux of most business endeavors.

Design & Microcopy (or Show & Tell)

You might not be a graphic artist—or maybe you are, in which case I begrudgingly congratulate you—so you should think doubly hard about how microcopy aids in a compelling design. After all, it’s your job to design the flow that a user should follow. (Hint for all you writers: Think of this task as if you were approaching a poem, where your goal is to eliminate abstractions and focus on concrete imagery with words.)

A standard starting place for page design is the “Z-Layout.” Most people will view a site in this manner, which should provide you enough of an outline for your microcopy (and website optimization in general). Consider your navigation anchor text and how each will influence readers. People tend to skim, so start with your important links first, and end with a “Call To Action” (CTA) somewhere above the fold.

Z Design

Photo: webdesign.tutsplus.com

 

Remember, ideal microcopy should be intuitive and minimized in the background as an accessory to design. It shouldn’t stand alone.

The Nostradamus Effect (Testing)

If you were able to forecast the future, wouldn’t you want to avert disaster by correcting problems before they arise? That’s what proper user and A/B testing does with microcopy.

With user testing, you can observe and take notes on more than just metrics. You can monitor facial expressions and body language for signs of confusion or frustration, listen to voices when reading aloud, and even pose unbiased questions for a better idea of what the popular opinion might be. Let others be the judge of your site and copy before you make it official—it could save you a ton of headaches and improve engagement rates from the get-go.

Then there’s A/B testing, the backbone of pay-per-click marketers like OppMax. This type of split-testing can determine truths no matter the opinion of the writer, designer, or owner. No BS, no bias—just facts about which microcopy choices work best and which should be tossed into the rubbish bin. A/B testing is a great tactic to predict how well your copy will perform, and might give you a list of some qualified verbs and phrases for future projects.

The case study below is solid proof that A/B testing works wonders with microcopy.

Review Order Button

Photo: optimizely.com


Insound
launched a new checkout shopping flow and tried different versions using general A/B testing. As you can tell, the “Review Order” microcopy performed much better than the three other options. Their rationale? Reviewing an order would provide an expectation to the user as to what is next. Perhaps shoppers want reassurance that they will have that opportunity to review a purchase before paying.

This data not only benefitted Insound on this occasion but also gives them a sturdier platform for any future related A/B tests.

Microcopy Models You Can Use

What kind of person would I be if I didn’t offer some microcopy examples to you lovely readers?

Call To Action (Buttons)

The role of a CTA button might seem obvious, but there’s some psychological trickery at play regarding the microcopy in its label. Using the Insound case study above as evidence, the button should clearly indicate what’s next. Instead of your form submission button reading “Submit,” perhaps it should read “Get Your Quote.” Generic words like “submit” are less likely to elbow your user further down the rabbit hole toward being a customer.

To identify what word choices would work best—aside from user testing and A/B testing, of course—you should try to answer your customers’ questions and address their concerns during the button’s creation.

  • What is my motivation for clicking?
  • What should I expect from the next screen or step?
  • Am I sure I want to continue?
  • Is this really where to start?
  • How do I find _____?

Example 1: Signing Up

Etsy Call to Action
If you are looking to open your Etsy store, it couldn’t be more apparent how to start. Instead of a “Start Now” or “Click Here” button, they use language that directs users toward the first step toward being a shop owner. They also include pertinent links at the bottom of the section that a prospective shop owner might need. (I wish I had a skill in needle-point right about now.)

Example 2: Ordering, Buying, and Downloading

I Want This CTA
I stumbled upon this resource recently and thought its use of microcopy merited a peek. It’s the perfect specimen of the “practice what you preach” mentality, as this CTA button is microcopy’d nicely. Well done, The Standardistas.

Example 3: Signing In

Amazon Sign In Popup
One pet peeve of mine is an unobvious sign-in button. Amazon used to be at the top of my undesirable list for this very reason, but with their implementation of a pop-up button to sign in, they’ve been crossed out. How it works: go to the Amazon homepage and click the button that pops up. Yeah—it’s that easy now.

Forms

Users are more likely to fill out and submit a form than they are to call because it’s convenient and doesn’t produce seemingly insurmountable social anxiety. It’s, therefore, important that you create a form that will procure submissions. Forms should be instructive, slang-free, and alleviate users’ fear of demons privacy invasion.

Example 1: Order Forms

Order Form Microcopy

Photo: conversionxl.com

No one likes giving out their phone number (if they wanted to talk to someone, they probably would have called). In this order form, added microcopy helps to curb the submitter’s fear of receiving spam, unnecessary calls, or junk email. By indicating that all information provided is private and in no way given to third-party organizations or used to be an annoyance to the user, your form should generate more conversions and fewer bounces. It’s all about privacy, yo. Thanks, Snowden.

Example 2: Sign-Up Forms

Facebook Sign Up Form

Photo: uxplanet.org


Facebook
takes form creation into the stratosphere by utilizing all the essential microcopy techniques and components nearly flawlessly.

  • It’s instructive (placeholder text in fields)
  • It alleviates fears (“Why do I need to provide my birthday?”)
  • It has other links to information you might want (Terms; Data Policy; Cookie Use)
  • It tells the user why to continue (“It’s free and always will be.”)
  • It has a CTA button that’s aligned with user expectations, though it is somewhat generic
  • It doesn’t use slang

Example 3: Apps, Add-Ons, and Software

Yoast SEO Add-On
The Yoast SEO plugin for WordPress is a favorite of many online marketers and SEO experts, us included. It’s intuitive and matches with the overall theme of the Content Management System itself: being simple for anyone to use. Nearly all features of the add-on come with instructive microcopy like the example above.

Error Messages/Pages

Errors—we all get them, but it’s how they’re worded that form our reactions. A properly crafted error message could be the difference between a conversion and total abandonment toward another site/store/company. Instead of alerting a user that an error was made, no matter whose ownership it can be attributed to, your messages should explicitly detail which errors were made and how to correct them.

Example 1: Login & Form Error Messages

MailChimp Login Error


MailChimp
, among other things, really thinks about its users. When logging in (or pretending to, in my case) with a faulty password or username, the form pops out an alert that isn’t a generic “error: you suck” message. Instead, this error tells you what might be potentially wrong and links to a page that will help you solve the issue at hand. Plus, it’s conversational, which sticks with the company’s branding of being fun, quirky, and super conversational without coming off as being bombastic.

Example 2: 404 Pages

Whether you’re an expert of the interwebz or someone like my Grandma—”just click the mouse, Granny!”—landing on a dreaded 404 page stings. With good 404 microcopy, your users might not bounce, though. Changing the standard “Page Not Found” error will help with that bounce rate by doing two things:

  • Be helpful
  • Be branded appropriately

Yelp 404 Page


Yelp
does a good job with its 404 microcopy; it’s branded, fun, and instructive with a search feature and links to the main page.

Amazon 404 Microcopy


Amazon
also has a decent 404 page that leads you in one of two directions: back to the home page or into a phenomenal “Dogs of Amazon” section of the site. Where has this been my entire life?

Meh.com 404

One of my favorite sites, Meh.com, has a 404 page that isn’t quite on par with the other two above, but its use of a catchy YouTube song and video helps it make the grade. [Watch it here]

Search Bars & Text Fields

Rather than leaving a search bar or post/text field blank like the stares of its users, it’s a good idea to use placeholder text. These fields can be populated however you see fit.

Example 1: Posting Text Areas

Facebook Post Area

Once again, Facebook, the ever-popular social media platform, makes it simple for users to post whatever they want. Instead of leaving the posting area white, it populates it with microcopy that tells the user exactly what it should be used for.

Example 2: Search Bars

Zappos Search
Placeholders in search bars are almost essential now. And a best practice is to follow Zappos and insert lead-in microcopy to help direct your users toward specific items, topics, or categories. Through Google Analytics, simply discover your most popular search terms or terms you’d love to see receive a bump in traffic and use those as placeholders in the search field.

For instance, if you own a Chevy dealership, you might want to use microcopy like “Camaro, Corvette, Cruze, Malibu, etc.” Or go broader and use placeholder text such as “SUVs, Sedans, Trucks, Minivans, Etc.” To each their own.

Branding & Inspiring Confidence

As I’ve already mentioned, you should seek to brand any copy you write, within reason. Nothing stands out of place more than generic copy where non-generic copy is expected, and vice versa. If your brand’s voice is on the youthful side, consider adding some color to things like email marketing sends, and toning it down when instructions are warranted (e.g. forms).

Example 1: Email Marketing

Email Marketing Micro-Copy

Photo: impactbnd.com

Jay Acunzo of sorryformarketing.com humanizes an email marketing campaign by adding a little energetic blurb at the bottom of its email sends. It is on-brand, creative, and doesn’t take away from whatever content is shared above it. Plus it’s gluten-free, apparently.

Example 2: Inspire Confidence

Basecamp Login
Basecamp’s sign-up form helps inspire confidence in potential users by informing them that more than yada-yada companies have signed up for their services over the last week. Reminders that signing up is a fool-proof plan should settle the stomach of those unsure.

Basecamp is not only a solid example of how to exceed expectations, but they also utilize many of this blog’s previously mentioned microcopy strategies. It’s got placeholder text as instructions, a perfectly fine CTA button, copy that assures users that it’s free, and is branded appropriately.

The Ultimate Microcopy Example

Perhaps the most useful bit of microcopy is found on Slack’s sign-up page. Let’s see what it has going on.

Slack Chat Microcopy

  • It uses a very good CTA button that informs the impending user of what to expect.
  • The design flows in the “Z” format.
  • It adds links to other pertinent pages that may be of more use to the user.
  • It is on-brand from top to bottom but doesn’t feel forced.
  • It uses instructive placeholders in the form field.
  • It inspires confidence by mentioning that even aeronautical engineers of the Curiosity Rover use Slack.

It’s no surprise, then, that Slack Chat has grown leaps and bounds over the years. The copy team uses clever microcopy to generate leads, convert users, and prevent unnecessary bounces. The user experience from the sign-in screen is impeccable.

Microcopy: The Key to Understanding Your Customers

In all, microcopy serves to help you better understand your customers’ desires, needs, and expectations. If you aren’t diligently considering how these small patches of text could have a macro-level impact on your users’ experience, you might run into a brick wall known as “low click-through rate.”

So, stick to the script by eliminating the excess calories and all the hub-bub that comes with traditional copy. At the end of the day, if you aren’t resonating with your users, they’ll leave you for someone who will—someone without love-handles, probably.

What do you think? Any other tips on how to craft some damn good microcopy? Leave us a comment.

 

 

Sources:

https://www.smashingmagazine.com/2013/06/five-ways-prevent-bad-microcopy/

http://www.copyblogger.com/cut-worthless-words/

http://conversionxl.com/everything-cta-size-location-color-works/

http://conversionxl.com/microcopy/

http://baymard.com/blog/checkout-experience-seemingly-unnecessary-information

https://gumroad.com/l/WKvpI

https://www.justinmind.com/blog/microcopy-improve-ux-with-these-10-examples/

http://goodmicrocopy.com/

https://webdesign.tutsplus.com/articles/understanding-the-z-layout-in-web-design–webdesign-28

https://blog.optimizely.com/2013/10/02/ecommerce-checkout-funnel-test-insound/

https://www.impactbnd.com/blog/use-microcopy-to-delight-your-website-visitors

https://uxplanet.org/microcopy-tiny-words-with-a-huge-ux-impact