4 ways to introduce guiding microcopy in forms
Every instruction or hint we write on a form comes with a conflict:
On one hand, we don’t want to overload the form with text so it doesn’t look intimidating or complicated to fill.
On the other hand, it’s important we have a ready-made answer to every question a user might have, and an adequate response to each reservation that might arise in them. This will result in less users abandoning the form, and show all of them that we were thinking of them and their needs.
So, do I add microcopy to the form, or not?
Mini case study #1
In Joshua porter’s post (the one in which he coined the term Microcopy) he describes a problem that led to 5–10% abandonment rate on the payment form page. He overcame this obstacle by adding a specific instruction, an entire sentence, near the address field (“Be sure to enter the billing address associated with your credit card”).
This is an excellent example that sometimes being lean on instructions, so as to avoid as much text as possible in a form, can make life harder for users trying to complete a task instead of helping them, thus decreasing conversion rates instead of increasing them.
Mini case study #2
This is especially true in complex systems. In her excellent post Friction as a Function, Merav Har-Paz shows how sometimes adding microcopy to a form, even an already crowded one, allows users to effectively complete a task with a higher level of confidence and certainty.
Mini case study #3
During a public speaking engagement he gave, Yakir Reznik, Sting TV’s head of digital, spoke about an A\B test they ran. In version A they asked for the user’s name and phone number on a “clean” form which had but one instruction (“Now all we need is your name and phone number”). In version B they added an explanation that this information was needed in case the user needs to recover their username or password.
This fairly long sentence, that ‘burdened’ more text on the form, and even required extra scrolling on mobile, boosted conversion rates by 11%.
Why?
Because users generally dislike giving that information, and the extra sentence reassured them by supplying a reasonable explanation to what they were about to do. When the text is important for the users — they’ll read it and pay attention to its meaning.
That is why the question isn’t how much microcopy to add to a form, but: do users need help? If the answer is yes — go ahead and add written guidance.
If you encounter a place on your form where users might go astray, make a mistake or feel unsecure — don’t hesitate to write down the answer to the question nagging them, or the reassuring words they need at this point.
On the contrary, they’ll be glad to get your support in these friction points and be able to easily find what they are looking for without contacting support or giving up on doing what they had their minds set up on.
The instructions should, of course, be as short and succinct as possible, the kind that offers maximum information with the fewest words.
You can also keep the instructions hidden until the exact moment they are needed, or present them in various ways according to context.
4 ways of introducing microcopy in forms
1. Static
The microcopy is shown permanently on screen, without appearing, moving or vanishing. It’s just there, accessible and out there all along, in front or beside the controls.
Main advantage: you can’t miss it.
Main disadvantage: clutters the form’s visibility.
Best for
When the instruction is critical to understanding how to take action, or essential for the users and you would like to make sure they don’t miss it.
Munchery uses a static microcopy to notify users about an irreversible action:
Notice that these instructions should be placed in front of the field to meet accessibe microcopy requirements.
2. Shows up on demand
Microcopy that appears (usually in a tooltip) when the user clicks or hovers on top of an icon (?,!,i) or a link.
Main advantage: always easily accessible to everyone, but un-obtrusive for those who are familiar with it.
Main disadvantage: users might not click on it, and miss important information.
Best for
a. When there’s a lot of information or instructions to present that might create a visual overload and it’s better to hide it.
b. In actions taken many times, so on the second or third time users can complete it without referring to the information icon. Thus new users get highly accessible information they need, while veterans can move swiftly along without stopping, but can still refer to it should the need re-arise.
These tooltips appear when hovering over the ? icon in two websites that are very rich with information and instructions - Booking.com and PayPal:
“But in complex systems we’ll have to place an icon besides every field!”
That might be so. But look:
If you ask a user of your system to choose one of these two options:
- Open the user guide or help center and search for the meaning of each term and the correct way to fill up the form
Or
- Have the relevant information be accessible via hovering over icons near each field right there in the UI
What do you thing they’ll choose?
True, a “clean” form can make it easier for users. But if it makes it hard on them, generating more work — there is no point in it being “clean”. Its best to add guiding microcopy to it, and if there’s a lot of information to share, hide it under i icons. With the proper design it can even look good.
This is Facebook’s UI for creating ads. They placed an i icon next to each control, but the icons don’t get in the way. On the contrary, they deliver accurate, accessible and helpful guidance for every term and decision I need to make.
Tip
Use a link and not an icon to resonate questions users might have, and use their own words. For example: How did you calculate this? Why are you asking? Where can I find this info? How does it work? This is how you strengthen the user’s feeling that you get them and they can find with you an answer to what they need to know.
When I had to choose a license on The Noun Project, the question beneath the buttons was exactly the one spinning in my head:
3. Appears automatically
The microcopy automatically appears exactly when the users need it (i.e. when the field is in focus), and stays visible as long as they need it. Once users move on in the form — it disappears, and a new guidance will replace it.
This excellent tooltip appears automatically when placing the cursor in the Alt field on Wix blog:
Main advantages: always accessible when needed, doesn’t burden the form, no chance of instructions being overlooked.
Main disadvantage: will appear again and again, even for returning users who don’t need it anymore.
Best for
a. When there is a lot of information or instructions that might create a visual overload and thus should better be hidden.
b. On one-time actions, like setting up an account.
c. When you want to give users the feeling they are being accompanied hand in hand, like when making financial actions, enrolling in an academic institution or making an expensive purchase.
d. On important and infrequent actions, like buying air tickets.
BTW, it doesn’t have to be a tooltip. This screenshots are from Zeplin sign up. The copy on the right appears automatically and disappear when you move on to the next field.
Wix uses this technique to guide users on the menu. The help on the right changes according to the category the user hovers above:
This tooltip, from Wizzair website, appears automatically when the password field is in focus, and stays with you until a valid password is created:
They could have wrote it much shorter though:
* 7–16 characters
* Must contain numbers and letters
* No special characters
4. Placeholder
Microcopy usually written in a lighter shade in the field, and disappears when the field comes into focus.
These are the placeholders on Simply Hired:
Main advantage: it will not be missed.
Main disadvantage: it disappears and the user cannot see the information on demand.
Best for
a. Tiny instructions.
b. When there’s no risk the users might want to see the information again once the placeholder disappears.
c. When the input required from the user is long or sensitive and you want to give them a thread or a short leading question to start with.
d. To give the users a short example on how to correctly fill in the field.
These directive placeholders are from PayPal:
See more ways to use placeholders on chapter 10 of Microcopy: The Complete Guide.
Of course, don’t use all of the 4 ways in one form; consistency is, as you know, a virtue. Use each way appropriately to meet your users needs, to make simple relaxing forms that are easy to use.
