When it comes to building an app, it's easy to get caught up in the bigger picture. As we rush around to make sure that all of the features are present and working behind the scenes, it's easy to forget that users don't see that stuff—they're interacting with our user interface.
“The details are not the details. They make the design.”
— Charles Eames
It's for this reason that, if you're going to over-invest in anything, it should be making sure that your user interface is clear, easy to use, and friendly. While code quality is important behind the scenes, if your users don't understand your product, the fanciest code in the world is all for naught.
One detail that's often overlooked but makes the task of building a great UI far easier is leveraging microcopy.
What is microcopy?
Microcopy is text in your user interface that helps people find their way. It's designed to fill in the blanks when things go wrong, when the next step isn't clear, or when some additional explanation can benefit the user.
A real-world example of microcopy is the text on wayfinding signs at the airport—the one's that say "baggage claim this way" or "restrooms over here." The point of that copy is to help you locate what you're looking for and not get lost. In a user interface, microcopy serves a similar purpose.
Thinking about your UI as a conversation
An easy way to get started thinking about your product's microcopy is to consider how your UI speaks to users. Unlike a real-world interaction, a user interface acts as a proxy, taking the place of a human. When you go to a retail store, if you're looking for something and you're lost, it's helpful to have a human say "Oreos? Aisle 10."
Though brief, this is technically a conversation (a micro-conversation, if you will). Having someone guide you does a few things:
- It acknowledges your presence (humans like to be seen).
- It helps you find what you're looking for quickly.
- If done properly, gives you warm fuzzies about the store you're visiting.
When it comes to your user interface, you can simulate the same thing. For example, consider your product's signup form. For passwords, you require a specific number of characters, and a mix of capital letters and numbers. When a user fills out the form, your microcopy can act like a human standing nearby to guide them. "Heads up, make sure you use ten characters, and at least one capital letter and one number."
This makes all the difference. If you remove the microcopy in this situation, it's likely that these rules will come as an unwelcome surprise and frustrate your users. A great way to spot opportunities for avoiding this is to ask "what will the user need to know that isn't obvious?"
Bringing tone into the equation
Where microcopy can fly off the rails is with the tone of voice you use to write it. Depending on your product and its audience, even with microcopy bad tone can evaporate its value and leave users unhappy.
By tone, we mean how it sounds when the user reads it back. For example, consider a user forgets to fill in their name on a form. Some example microcopy for error messages might be:
- "First name is required"
- "Need a first name here"
- "What's your name, friend?"
Notice that all of these say the same thing, but the tone of each changes their interpretation slightly. Again, we want to mimic a human interaction with our microcopy. Depending on the context of your product—for example, an app for kids vs. an app for managing therapy patients—different tone can have a serious impact on perception.
Taking the example of an app for therapy patients, the "What's your name, friend?" may come across as condescending or undermining. Contrast that with an app for kids: "this app is so friendly!"
A great way to ensure you keep your tone in check is to replace your software with a human interaction in your mind. Ask "what would I say in this situation face-to-face with someone else?" This will prevent you from using tone that doesn't fit the situation and wording that sounds robotic.
5 easy opportunities to level-up your microcopy
Now that we know what microcopy is, let's look at some examples of how to leverage it in your own product.
1. Error messages
This one is super-easy. When a user is filling out—or submitting a form—error messages are an excellent form of feedback to help ensure they complete the task at hand. Keeping tone in mind, remember that errors can be frustrating. When a mistake is made, don't use language that "points a finger" at your user or makes them feel stupid.
2. Clarification on forms
On forms, especially big ones, there are a lot of considerations for a user to make. One way to improve your user's experience is to shine a light on hidden or not-so-obvious details. For example, when signing up for a subscription service, it's worth confirming what the user is doing so they don't feel surprised.
3. Button labels and "next steps"
Buttons are an easy spot to overlook when it comes to microcopy. While there's nothing wrong with "submit" or "next," those can leave a lot up to user misinterpretation. If you're building a UI with multiple steps, use microcopy to hint at what's "around the corner."
A great interface teaches its users how to use it, either directly or indirectly. Tooltips—popups that are usually hidden behind a circle with a question mark icon inside—are a great way to tuck-away microcopy that explains what something is or why you need it (e.g., asking for a social security number might seem odd in some contexts and warrants explanation).
5. Navigation labels
When it comes to your navigation—menu items at the top of the page or tucked away in a hamburger menu—the microcopy you use for item labels can make or break your app. A favorite (bad) example of this is the database hosting service Compose.
After you've create a deployment—their term for a group of databases—you need to create your first database. Unfortunately, they use the label "Browser" with the only indication that it relates to your databases being the icon.
Just call it what it is. Don't get creative or feel like you need to be original with labels.
6. Bonus: URLs
While URLs are technically not copy in the traditional sense, they are a secondary means of wayfinding for users. A good rule of thumb here is to keep your URLs simple and obvious. Simple so they're easy to remember (and share) and obvious so you users can easily guess them.
For example, if I want to buy a computer from Apple, I can guess that
https://apple.com/mac will get me close. If I want to buy a computer from Dell?
https://www.dell.com/en-us/shop/scc/sc/laptops?~ck=mn is far less intuitive.
The best advice for writing great microcopy is to be human, not robotic. If what you're writing isn't something you'd say to someone face-to-face, reconsider it. Take the time to think about how bits of microcopy can improve the users experience by being helpful and removing frustration from using your app.