The Power of Microcopy in Web Design

“Copy” has turned into a buzzword. Have you noticed it? People are putting more and more importance onto the words you use on your website. They are trying to put value in copy and it’s a wonderful idea! Words are a prominent way of communicating online. And it’s the small things that matter, especially when it comes to user experience.

Words help enhance an experience at both functional and delightful levels. Words set the tone, voice and brand personality. Words should always be considered as part of a design, not just where they are placed and how are they displayed but also what they actually say.

But, what is microcopy? It’s small bursts of copy which helps you along. Microcopy includes things such as error messages when you incorrectly fill out a credit card form, or the copy on the form’s submit button. It’s the page title, the copy by the terms and conditions agreement checkbox, sign up instructions, form labels, loading screen message, placeholder text, or disclaimers that your email won’t be shared. Microcopy is all over your website.

Microcopy Improves Users’ Lives

Let’s take credit card errors, as a starting example. If you get an error which says “invalid input” versus “your credit card number is too long,” which one is more helpful? The former doesn’t help you figure out what’s wrong if it doesn’t specify which input was incorrect, it simply states there is a problem and does little to help you fix it. The latter specifically tells you what the issue is so you can address it. The latter is also a better usability and user experience practice as the former can leaves users confused.

You Are Being Vague

I perused Dribbble and found a few shots that help illustrate bad and good examples of microcopy. The shot below tells you when you incorrectly log in that either your email or your password is incorrect. Which one was it? It’s easy for an application to determine if an email is on file for a user, if it isn’t then it must be the email as it’s not recognized; if it is on file yet you can’t log in, it must be the password. It’s not that hard to tell, so tell it like it is.

Robin Developer Sign In

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

You Are Not Helping At All

With the following shot, the error specifically identifies the password as the problem but mind you this is a sign up form, not sign in. Therefore, it’s not an easy assumption that the password is incorrect. If you are having people create a password and it’s not up to your standard, tell them what they are missing. Is it too short, should it contain a number?

Sign UP

Be Specific To Be Functional

Here we have an error that tells it like it is.  The entered email is not a valid one, therefore you should look into making sure the email syntax is correct. Does it have an @ symbol and a period? Straightforward instructions, or guidelines, make all the difference. There is no guessing game for the user who receives this error, and more importantly, there is no confusion or frustration.

Form validation

Delightful Microcopy

The three examples above contain functional microcopy where text simply helps the experience be easy or usable. There is another level of copy and that’s to delight. A good example of this is a form that flatters you by saying you have a pretty name. It’s unexpected, and often unnecessary, but delightful. The below screenshot is taken from an account form at Poll Everywhere.

Login

What’s The Fuss About?

When you think about it, none of the examples are a big deal; they are simple and obvious. Yet, how many websites delight you with bits of humor, flattery or just plain politeness? Not that many, actually. Otherwise, websites like MailChimp or Woofoo wouldn’t be talked about like they are gods for having cheeky copy. Now, when you really think about it, most copy on the internet is impersonal. Some of it is clever and useful – sure – but how much of it is actually funny or enjoyable? I’ll repeat myself, not that much.

Actually, let’s take a step backward. How many websites have informative copy? There are way too many instances where copy is vague, where you don’t know what simple words like “skip” or “ok” really mean. When things are unclear, it’s a failure of the design. Just because it is not visual or aesthetic doesn’t mean it’s not a design failure.

How Do You Create Good Microcopy?

When it comes to creating effective microcopy you need to realize two things. First, the content needs to be informative, as you’ve seen with the error messages. The copy can’t be delightful if it’s not functional. Then you can add delight, which will depend on the tone of the message. By adding a bit of humor to your copy, politeness or whatever your brand’s personality is, you can achieve delight.

Learn By Example

Let’s skip over all the talking, as I can talk all day. Instead, let’s see some examples:

Virb

Virb

The sign up page has a very lovely line on it. Can you spot it? “Don’t stress, you can change this at any time.” It’s lovely because it reassures users that what they choose as a their domain is not set in stone. Additionally, the language is casual, which makes it seem like it was written by a friend rather than a corporation.

Campaign Monitor

Campaign Monitor

The support page is something else as well. Instead saying: “Describe the problem you are having,” I wish it said “Describe the problem you are having to me.” I can see why it doesn’t but look how much more personable it would be. What’s more, they provide an example in the place holder. Brilliant!

Github

Github

Oh Github, you are full of personality. On the contact page, there are a bunch of little things that are funny, cute and amazing. How many instances of great microcopy can you find? For starters: “If you just want to say hi, that’s cool too.” Sounds like a real person wrote that, better yet, said that! In the message placeholder is microcopy gold: “If you use 140 characters or fewer, we’ll give you a gold star.” Why? Because not only are they trying to get you to keep the message short, they do it in a charismatic way. It makes you smile and it makes for a good experience. Chances are you are more likely to oblige to their request because of this.

So about this power…

I hope that you realize how powerful microcopy can be. The biggest argument I can make for it is this: At the end of the day you are trying to get conversions, right? Functional microcopy is the first step because it will make you stand out, something not enough websites take advantage of. If your site is memorable, you win. (Because people will come back, they will like you and tell their friends. Come on, did I really have to spell it out for you?!)

Paula Borowska

Paula runs a user experience blog BeingLimited and an author of an upcoming book about mobile design, the Mobile Design Book. You can connect with her on Google+.

Newsletter

15 Comments
  1. Sascha Apr 17, 11:33 am

    Interesting article and thanks for the examples about how to deliver better error and notification messages. About the “being vague” aspect: it’s recommended to not tell if username/email and password just don’t match or if the username/email has not been registered to minimize intrusion risk (because an attacker can’t determine if he is using a valid username or email), being vague may be the better choice when dealing with all kind of login forms.

    Reply
    +45
    • Heidi Pungartnik Apr 17, 1:09 pm

      I came here to say that :) Good article, btw! It’s important that businesses finally realize how much better off they will be if they show some personality.

      Reply
      +5
    • Paula Borowska Apr 17, 7:15 pm

      I totally agree about log in security but I needed an example :p However, I’d argue it does depend on a service, like for my bank sure, but my Pinterest account, not so much.

      Reply
      -17
      • richard Apr 22, 11:41 am

        Agreed, but than you’ll assume everybody uses different password/username combo’s for every service you’ll use.
        From my experience people tend to use at least the same username, if not both.

        Reply
        0
      • Chris May 14, 4:40 pm

        Unless you use the same password on Pinterest as you do for your banking site ;)

        According to “Ofcom’s Adults’ Media Use and Attitudes Report 2013″, 55% of UK adults reuse passwords across multiple sites. What this means is that if someone compromises your credentials on Site X, then there is a pretty good chance that those exact credentials would work on Sites Y, Z and Q.

        Especially as the Internet becomes ubiquitous in society, usability and user experience are certainly highly important topics. However, they absolutely must be balanced with proper respect towards security and data protection.

        Reply
        0
    • Kurren May 6, 11:05 pm

      “minimize intrusion risk”

      Come, really? I thought we moved on ages ago on this.

      It doesn’t improve security at all, as most intrusions attempts are done programmatically (by some script/bot) or are a result of a system (usually DB) weakness.

      Reply
      +1
  2. Drew Palko Apr 17, 5:29 pm

    In the Simple banking app, under the help (or contact) tab it said something along the line of “Ask us a question or just chat with us! We’d love to hear from you!”… So I sent them “How do you make Spaghetti?” … I was surprised that they actually responded with a step by step procedure that ended with, “BOOM, Spaghetti in yo mouf!” It’s one thing to have good micro copy… But it’s a whole new level if your company can actually back it up!

    Reply
    +15
    • Paula Borowska Apr 17, 7:16 pm

      Oh, that is brilliant! But that’s exactly what I was talking about!!!

      Reply
      +7
  3. Joe Sokohl Apr 17, 6:15 pm

    I’d posit that the email/password error message is good–while it might be irritating, it’s also a security protection.

    I’d also posit that the Poll Everywhere screenshot is creepy and bordering on intrusiveness. Be careful that your text doesn’t suffer the “too smart by a half” (or its corollary, “too cute by a half”) syndrome.

    Reply
    +4
    • Paula Borowska Apr 17, 7:19 pm

      The only way to see the name comment is if you have enabled ‘fun mode’ in your settings to have access to a bunch of their quirky stuff. From what I hear most of the customers actually appreciate it, if they did not it would no longer be there.

      Reply
      0
  4. Rebecca Apr 17, 7:07 pm

    I just want to echo Joe and Sascha’s comment about the security risk of revealing that the username is correct, but the password isn’t. While, as a user, I find it helpful when a site tells me that my username is correct but my password isn’t, it also sends off warning bells in my head.

    It’s part of that never ending tug-of-war between privacy and personalization!

    Thanks for the post.

    Reply
    +3
  5. Daryl Wolfe Apr 17, 9:17 pm

    Great points on the topic! I agree with you 100%, however, I do want to mention something I tend to find… well… annoying. And that is using microcopy when it isn’t necessary in hopes to amuse or even instill personality. I know of this because I used to do it and, in hindsight, it only made me look like an idiot.

    A good example of unnecessary microcopy I’ve utilized in past websites would be something like my freelance portfolio website navigation. I would have my primary pages labeled as so:
    HOME | ABOUT | SERVICES and so on.

    Below each link, I would add a description like so (descriptions are in third-person):
    [HOME] where the heart is;
    [ABOUT] who is this guy;
    [SERVICES] the things this guy does;
    and so on.

    Don’t get me wrong, I think there’s a proper way to do this even with the simple things but, in hindsight and in regards to my own designs, it appears as though I’m trying too hard to be cool and, even, trendy. So I’m very careful these days about where I use microcopy and I make darn sure it’s warranted before I do.

    Thanks again for the article!

    Reply
    +1
  6. Bob Apr 19, 1:54 pm

    Great post! Another example is on the Tumblr signup page: when you’re entering your age, say 20, it’ll say 20 years old. But if you enter 50, it’ll change the box to say 50 years young :)

    Reply
    +7
  7. @auredagaz May 4, 11:30 am

    Paula, lovely article and brilliant examples. I am always ask to my teams (we are Man-super! agency) to provide the delightful experience of little wonderful unecessary things. But must admit that is not that easy fixing this totally relevant demand in the whole design process, where Client needs are very specific, bold, huge,…

    Do you have some tips? Best! Aureliano

    Reply
    +1
    • Paula Borowska May 4, 2:25 pm

      Well first of all, make sure you are solving the problem at hand no matter what. Make sure you are providing easy solutions for users and it makes sense for the business side of things. Only than you will be able to add these delightful touches.

      Reply
      0

Leave a Reply

*
* Minimum length: 20 characters