October 28th, 2015

Welcome to part two of our three part series on critical elements of user interface design that are often ignored, but have the power to make or break your user experience. In Part I, we dove into the importance of preserving white space to ensure that you give content room to breathe and be presented in a hierarchical manner, which will give your users a path to follow as they navigate your site.

Today, microcopy is in the spotlight.

Microcopy – like it sounds – amounts to small bits of text strategically placed throughout your interface to bring clarity to the actions you want users to take. It’s the words used on form labels, error messages, small bits of instructional text, loading screens, and buttons. If you think microcopy sounds insignificant or frivolous, think again. It’s everywhere on the web and in the apps you use.

A collage of microcopy examples showing instructional text, field labels, error messaging, dropdowns and confirmations.

The usability of your interface often comes down to having the right microcopy in the right place so that a user never has to think twice before taking action. The icing on the cake is that you can use microcopy to inject personality into your site which will pay dividends for your brand.

This opportunity rests on using approachable language when implementing microcopy – so write conversationally, as if you are helping someone face-to-face. If your microcopy reads like an instructional manual, rewrite it.

Consider a login screen, for instance. Helpful microcopy should appear if a user enters an invalid username or password. That text should both be friendly and instructive. “Invalid entry” or “Error Type 8654” does not provide help for the user or convey a sense of warmth from your company. Instead, consider phrases like:

“Oops! Your email and password combination do not match.”

“Something isn’t right. Don’t forget, passwords need at least one capital letter and number.”

“It doesn’t look like we have you registered in our system. Sign up here.”

Check out this screen from PNC which is a result of entering incorrect login info:

Log in screen for PNC with error message - We are unable to verify the information you entered. Return Code P1250879

Not so friendly, right? The error language used is robotic and ambiguous – and it doesn’t tell me what is wrong with the information I entered. A clearly internal error code should never be exposed on a front-facing screen because it won’t help the user solve their problem – and it results in an unnecessarily alarming experience for users.

Now, check out this login screen from MailChimp.

Log in screen for MailChimp with error message - Sorry, that password isn't right. We can help you recover your password.

First, how can you be upset or frustrated when a friendly monkey is looking at you? Moreover, the micrcopy reads like a real, human conversation. The simple, instructional text tells me what I did wrong and offers Mailchimp’s help if I can’t remember my password.

It doesn’t take a lot to of effort to make an error message friendly but as you can see, it makes a big difference in how users perceive your brand and the comfort level they establish with using your site or app.

So remember this – microcopy is the small text that makes a BIG difference. It deserves careful consideration (and hopefully user testing) before launching a project so make sure to reserve space for it in your budget and timeline.