Microcopy as a great way to improve your interface fast
Today I will tell you about microcopy and phrasing. It’s vital, because “one of the fastest ways to improve an interface is to improve its text part” as per Joshua Porter.
He first mentioned this term in his article “Writing Microcopy” where he showed an example of how he added the description in the checkout field and this prevented a lot of errors that users encountered. The description was “The billing address is the address that is indicated on your card”.
The fastest way to improve your interface is to improve your copy-writing.
http://bokardo.com/archives/writing-microcopy/
Now a little about personal experience. There is a certain subscription service that was famous for the fact that the users had problems cancelling a subscription. When cancelling a subscription, users “fell off” at one of the steps without completing the process, after which there were complaints that they unsubscribed, but the money is still being debited. After looking at the analytics, we found out that users leave the subscription cancellation window by clicking on the “Cancel” button, instead of “Continue” in order to end their journey. Let’s look at an example below.
After the analysis, we changed the title text and text on the buttons. It’s also great to check out whether this popup is needed in the system overall. And thus many errors that could arise were prevented.
If you look at Nielsen Heuristics, 4 out of 10 are related to the text content.
- System status — tell the user what is happening with the system, whether it is frozen or still loading, etc.
- Consistency and standards — it’s a convention, in which there are some generally accepted terms, clear calls to action that do not differ in different interface parts, etc.
- Error prevention — help user to understand what will happen if they do something, or clearly explain what action will take place.
- Help the user prevent errors by helping to diagnose them.
What is Microcopy?
These are small snippets of text in the interface, the purpose of which is to help the user to solve a problem.
Microcopy is not a...
Marketing text, that is, everything related to how to make the user click somewhere in order to sell something. It is not documentation of all kinds and is not SEO or Smart Text.
Where is Microcopy used?
- In the description of buttons and action links;
- These are all texts in forms, labels for forms or text blocks;
- These are messages, alerts, tips, and errors that tell the user where to go next;
- Confirmation dialogs in which we ask for confirmation of some actions;
- And including navigation.
Buttons
Any ideas on how to improve the design of the button? Add a shadow? Choose a contrasting colour? Round the edges? The answer is — just start with a verb!
- Start with a verb as an action;
- The description should be precise but clear and understandable everywhere;
- CTA should be specific enough to be more understandable to the user. Do not use general concepts, because they can be incomprehensible and vague;
- Use the WYLWIWLT Check technic to recognise the better direction with your naming.
Let’s imagine that there is a site creator who communicates with their users through the site. And the creator asks the users — “Would you like to … (create a plan)?”. And the user repeats their action — “I would like to …”. And if the call to action that we use sounds logical and natural, it means we have chosen the right one.
For example, “Need help?” without a verb, with a question mark, and as a button, it is better not to use. As an additional link, somewhere in the corner of the screen — maybe, but if you decide to use such a phrase as a button, then it’s better to use “Get help”. A similar case with “Quick Search”. “Quick Search” is not a verb, it’s a noun. If you use such a CTA, then it is better to use Find or Search.
Or “Get My Direction” — if you remove “My”, the link becomes clearer and cleaner. After all, it doesn’t matter whose they are, but if you use the product most likely the Directions are yours, YOU JUST GET THEM AS A USER.
Forms
It is better to use concise and understandable labels and hints on why to fill out this form and where it will lead next. Or in what format and what data is better to specify.
In the placeholder, it is advisable to duplicate the title information or indicate a call to action and specify what needs to be done. As an example “Enter event title”.
It was also tested that if you enter an example in the form without the word “Example”, users will assume that this field is already pre-filled instead of them.
The example below shows the name of the Title field and a placeholder with the text “Enter event title”. Since we moved the title of the “New Event” form, everything below will visually refer to it and because of this, it is not necessary to repeat the Event title in the field label.
The same applies to Date and Time — there is no need to repeat text to each field — we just need to write “Start” and ”End”.
Messages and Alerts
Don’t forget about Human Language so that the user doesn’t get lost in things like ‘Server Error’ and doesn’t decode errors like 404, 403, etc.
Even if we cannot say what exactly happened, we must explain that this is a technical failure, indicate the reasons and/or indicate whose fault it is — the user or the system.
Also, do not forget about your target audience. For some people, the example of Human Language may be just the first example.
Confirmation Dialogs
The question for which we want to receive confirmation is better to use immediately and briefly in the title, without “Are you sure?” etc.
You can add any possible negative consequences in the description after acceptance if any.
For example, if the user allows the Google location service then this data will be anonymously sent to Google and it is desirable that the user knows about it. Action buttons are clear, specific and resonate with the question. In our case, we combine “Use” in the question and “Use” in CTA, which helps the user to make the right decision faster.
Confirm-shaming
This is a negative message from the system, often with a rebuke if the user declined its’ offer. This type of microcopy is more often used as a marketing ploy, but it can also be found in simple interfaces. Shaming may be harmless, according to the author, but can create problems in the long run. We also need to understand that this is more of a moral side of the content creators and a dark design pattern.
Now a set of confirmer buttons that lead to a dead-end and cause laughter overnight. If you want to confuse the user — text is the best method.
Let’s look at examples:
- Do you want to cancel? — Cancel/Ok
- Cancel background compile operation and proceed? — Ok/Cancel
- With instruction — Cancel. Are you sure you want to cancel this action? Click ‘Ok’ to cancel the current action or ‘Cancel’ to continue. — Ok/Cancel
- There is also an example of localization so that it is understandable for an English-speaking audience, we will translate. “Should we cancel the changes? If you want to leave the page all unsaved data will be cancelled. ‘Cancel/Deny(Dismiss)’.
If you are not sure about the quality of the written text, spend a few more minutes/hours, ask for advice, or rewrite it several times so that your grandmother can understand what will happen if she presses the button.
Navigation
Navigation is more about information architecture, but there are also some nuances.
- Intuitiveness — the navigation item should already give some understanding of what will be inside.
- Consistency of speech — if we use one part of speech (noun, adjective, etc.) then we continue to use only it. Often this concerns first-level navigation.
- Consistency in navigation, header, and breadcrumbs.
My vs Your
My
If the user is the creator or owner of the content, then it’s better to use “My”. Example: My youtube channel, My photos, and so on.
Your
- Publisher/service speaks to the user
- A tool or feature used by a user. But the user uses it and puts something in it.
Example: the purchases will be the user’s — My Purchases, but the cart will be the system’s — Your cart.
- Another example is — Publication you liked.
How to make microcopy even better?
Know your users:
- Native speaker or second language speaker;
- Previous experience;
- User background.
Human language:
- Avoid technical jargon (but if your user is a technical specialist that speaks jargon — you can use it);
- Avoid internal abbreviations (the same abbreviation can have different meanings depending on the companies or products);
- Use a proper tone of voice.
Consider the context:
- Avoid ambiguity;
- Answer the possible questions (even here you must be a UX designer and cover all user pains);
- Guide the user.
Care from the very beginning:
- Consider microcopy in the first iterations (your client will say “Thank you” for that);
- Avoid using “Lorem Ipsum”;
- Suggest and check (discuss possible namings with a team and with users);
- Learn the product better.
Some mini-tips from the Platea team
- Do not give more than one option for the names of buttons, fields, etc. It is better to keep in mind and, if necessary, offer.
- If possible, offer your text, which will clearly and concisely show the actions the user needs.
- Stick to the consistency in CTA. It is your design language and part of the design system.
- Be confident in your work, and do not doubt the suggested solutions.
Resources & materials:
- A 6-point microcopy checklist
- Microcopy: Tiny Words With A Huge UX Impact
- Where Microcopy and Video Games Meet
- Goodmicrocopy.com
