The importance of microcopy for forms

This article provides some tips for when you are creating forms.

Forms must be simple, clear and non-threatening. The reason you have a form is because you want the user to do something. It might be to sign up for a newsletter, subscribe to a site, or purchase something. Because you want the user to do something, they automatically become wary. Why do they want my email address? Will I be inundated with spam? Are my credentials safe? And the list goes on.

This article assumes that you have got past the first hurdle and that the user has clicked the action button and sees the form. Congratulations. Now all you need to do is get them to fill it in and submit it. Correctly.

Before the form:

Create a catchy heading, not something that only refers to the pain (providing details) without the gain.
Remind them of the value of whatever they are signing up for. For example, “Amazing reductions on all items for club members”.

The form itself:

Make the form as short as possible. Think about every field and if it is necessary. For example, do you really need the subject field on a contact form?
Make the field names as clear as possible.
Put yourself in your user’s shoes. What are they worried about? Is there more than one way to answer as far as they are concerned? If so, provide help wherever necessary. For example password rules, phone and date format, or billing address.
If you are asking for their credit card number, make sure to emphasise how secure your site is. If you are asking for their credit card number before they start a free trial, make sure to emphasise that no money will be deducted at this stage.
Make sure to reassure users that their email address is safe with you and won’t be shared with anyone.

After the form:

Make the action button a real call for action that provides the benefit.
In the confirmation alert, make the user feel good about the action they have taken.
For error messages, don’t make the user feel guilty. It is not their fault. Make sure they know what to do – the message must be clear and practical.

I'll post separate articles dealing with error and confirmation messages.

In my first post (What is microcopy) I mentioned Joshua Porter, the person who coined the term “microcopy”. In the article (link here), he described how microcopy cut down the number of billing errors for online transactions. He looked at the form from the viewpoint of the user, saw that the billing address field was problematic and that most probably they were providing their home address (often one different to their credit card address). So that’s where he added a sentence:

“Be sure to enter the billing address associated with your credit card”.

Following are examples of the good payment details form from Claire's (www.claires.co.uk). I came across this website while researching English-language sites for Kinneret Yifrah’s book (Microcopy: The Complete Guide). They have most definitely invested in understanding their voice and tone, which is reflected in the microcopy. First off, they separated the name the billing address and the credit card details, so that the form wasn’t too intimidating.

The billing address field had the appropriate help text.

The credit card section emphasised how secure it was up-front, then repeated the message just before the action button. The button itself says it all “Pay Securely”.

Also, most forms ask for the CVV code. Here they don’t use such an intimidating term, and they show you where to find it, both as an image and text.

By the way, the payment failed, but the error message was lovely. They made it their fault and told me what to do to correct it.

“Well this is embarrassing, we haven’t been able to process your payment. But not to worry, we’ll get it sorted for you – simply double check all the details provided, make any necessary changes, and try again. Alternatively, you could try a different card.

If you continue to experience problems, ring our lovely customer service team…”

For more examples and details check out Kinneret Yifrah's excellent book Microcopy: The Complete Guide.