I’ve given advice before about writing field labels and button copy. It’s a hard task:
- The text needs to make sense out of context from the design but needs to remain short.
- It should be friendly without imposing the voice of the brand on users at a stressful point in the buying process.
- It should be reassuring but also persuasive.
All so users feel comfortable filling in your checkout form and don’t experience any mental strain doing so.
Content strategist, Bill Beard, describes microcopy as,
“the little text that can make or break your user experience.” – @writebeard
Despite discussing the importance of microcopy in other posts, I haven’t given many examples of great copy. So, here are some good examples you should go ahead and steal for your own forms:
Never rely on design alone to communicate
Microcopy has a big job to do sometimes. What could be communicated without words via design could save space on the page. However, worldwide 8% of men and 0.5% of women have a colour vision deficiency. Another 39 million are blind and 246 have low vision so communicating with visual-only cues isn’t inclusive.
Here are two examples of shopping delivery calendars. Each have ‘green’ options, where the delivery vehicle will have lower environmental impact:
Only one of them communicates the ‘green’ option without colour though:
Give users a heads up
“Before you start…You’ll need to:..”
This isn’t quite ‘micro’ but the copy that precedes this form prepares users well, specifying restrictions and required documents users should have to hand.
Apply this forms where users will have to enter card details, provide travel documents for travel or simply will need to enter their membership number.
“E-mail Address:”“(This will be your username)”
I love to see email addresses used for login, rather than asking users to think up an original username. It saves mental strain at the signup point and every time they log in. What I like even more, in the example above, is that the signup form clearly explains that’s how it will work.
“You will have the opportunity to save your information for a future visit.”
Another great way to speed up signup forms is not to force users to sign up before they complete their purchase. Some guest checkouts are introducing post-purchase sign up. Microcopy can convey that users are free to progress through the checkout without restriction.
The example above doesn’t mention ‘creating an account’, it subtly keeps all the focus on the benefit to the user, framing it as an ‘opportunity’ and alluding to future purchases.
Precise field labels
CafePress, like many other ecommerce sites, allow shoppers a different shipping and billing address. Knowing the order could be for someone else, they’re careful to gather the right information by asking for ‘Recipient Name’ rather than just ‘Name’, avoiding the chance the shopper will mistakenly put their own name.
“Your name as on Card”
This label is designed to help users fill out the form correctly the first time. If the label only read ‘Name’ users could enter any variation of their name, however as this is a payment form, the precise detail of the variation matters.
Data entry instructions
“…billing address as shown on your credit card statement.”
Similarly to the field label mentioned previously, this note above the form makes is clear that the address you enter must match the address your bank hold on file for your payment card.
One issue I have with this is that I assume that they accept debit or laser cards as well as credit cards. However using ‘credit’ card as a blanket term for a payment card could confuse some users.
“Having trouble fitting your address or city?”
This address form has a link underneath the form fields to a pop out containing hints and tips for abbreviating your address. While this isn’t ideal, it would be preferable to use address lookup or only take key parts of the address, it helps users adhere to this form’s data requirements.
“Enter all 13 digits on your card with no spaces:”
This instructive message reminds the user that a proper card number is 13 digits long and warns them to enter it without spaces, a good distinction as many cards print the number with spaces.
Mailchimp’s instructions for password creation look lengthy, there are five bullet points underneath the form field. However, they’re visually very easy to read and the copy is easy to understand.
“Check out faster next time with a MyLowe’s account. Create a password to enjoy faster checkout plus all the FREE benefits of MyLowe’s.”
This message comes at the end of a purchase form. Shoppers are not obliged to create an account in order to buy but this message highlights some great reasons why they should. Lowe’s say creating an account will mean ‘faster’ checkout next time and that account holders get ‘FREE benefits’.
Sensitive data questions
“Only used if…promise!”
“To keep you updated on your order status”
Firebox are a pretty fiery company, the copy on their product pages doesn’t shy away from controversy and represents a very strong brand. However, when it comes to the microcopy, they know when to keep it simple.
They also know that people are pretty sensitive about sharing their personal information. They don’t force shoppers to provide a phone number, making the field optional, but also reassure you that if you did it would be strictly used to contact you about your order, “promise!”. Likewise with your email address, they tell you what they’re using for, “to keep you updated”.
Although I don’t recommend any quirky writing in instructional microcopy, there are some nice ways of keeping the voice brand flowing into the checkout process.
”Our couriers have a very particular set of skills. They will find you. They will deliver to you.”
This playful addition above the address form, parodying action movie, Taken, appeals to Firebox’s demographic. Notice though that the heading above it, “Where would you like this delivered?”, isn’t quirky, leaving the instructional copy alone.
I’ve touched on the subject of button copy before. User experience expert, Chris Callaghan, says the most persuasive button copy is outcome oriented, not task oriented.
“Make CTAs outcome modelled rather than task modelled to show the user what they’re going to get, not what they have to do” Chris Callaghan, @CallaghanDesign
“Click to get the formulas”
Not the strongest example of an outcome modelled call-to-action but it does focus on the result of clicking the button.
“Get My Free E-book”
Michael Aagaard, conversion optimisation consultant, found that using the word ‘Get’ in button copy increased conversions in a particular test by 14.79%.
Aagaard’s post, 10 Call-to-Action Case Studies, shares some interesting results from button tests.
Daniel Melbye, suggests alternatives to ‘Submit’ and ‘Donate’ try on donation pages:
“instead of “submit” try:
- Donate Now
- Make a Difference
- Send Your Gift
- Support Mothers
- Save the Environment
Errors trigger stress in users. Part of your error-handling strategy to get users over this pain point should be great error messages.
There are a few things you need to avoid in error messages, such as repeating the field label and writing copy that puts blame on the user e.g “Your entry does not comply”.
Sara Wachter-Boettcher’s talk, Everybody Hurts: Content for Kindness is an excellent reminder that we must write for real people and we need to sensitive.
“Please include ‘@’ in the email address. ‘hahzeefjlfd’ is missing an ‘@’.”
This error message is good for several reasons:
- It’s polite.
- It identifies the error and tells me how to rectify it.
- It relays back my input to me for easy checking.
The message is dynamic too, giving a different message when I added ‘@’:
“Please enter a part following ‘@’. ‘hahzeefjlfd@’ is incomplete.”
With extra thought to the smallest of copy you can make great optimisations to your form’s user experience.
Even the best checkouts suffer abandonment. Wondering what other sites are doing about it? Take a look at this gallery of exit-intent popups on Nudgr.