This is the 7th in a series of 8 articles on checkout usability that combine findings from our checkout usability research from 2011, and our 2012 benchmark of the 100 largest e-commerce sites.
During our checkout usability study and our upcoming m-commerce study the vast majority of the test subjects had trouble understanding various form field labels. This of course turned out to be critical in some cases when a subject was unable to make sense of a label for a required field, making it impossible for her to complete the purchase. In less severe instances the outcome was invalid data input – in some cases intentional (the subject simply filled the field with “N/A” or alike and hoped it would pass validation) but most often unintentional (due to misinterpretation of the label).
We observed that on sites without additional descriptions to the form field labels, the test subjects who were confused by a label essentially were left with one of four (less than ideal) courses of action: guessing / trial and error, visiting the help section, calling customer support, or abandoning the purchase.
Now, the solution is simple and stated in the title of this article: add descriptions to your form field labels. While this might sound easy, we’ve found that of the 100 largest e-commerce sites in the US a whopping 92% of them have “inadequate” form field descriptions one or more times during their checkout process. That is to say: it was very (very) few sites that consistently offered good form field descriptions throughout their entire checkout process.
Amazon doesn’t explain their password rules so the customer simply has to guess whether there’s a difference between lowercase and uppercase characters, if both letters and digits must be used, and so on.
Inadequate form field descriptions can be anything from sites that don’t explain their password rules (see Amazon above) to sites that don’t explain how they’ll use the customer’s e-mail address, from sites that just ask for a “CVV2” code to sites that don’t give examples of how to format your phone number.
In this article we’ll present 15 of these “common offenders” which you can use as a checklist to go over your own site and make sure you’re providing good form field descriptions to help your customers through the checkout process.
Understanding the Problem (+ 15 Common Offenders)
Not having descriptions for optional form field labels might not be the largest contributor to abandonments in itself since it’s not all of your customers that will need it. However, for those who do need it, it’s one of those things that can make the difference between a seamless checkout experience and a tedious process littered with validation errors, visits to the help section, and calls to support. (And if we’re talking of required form fields, the description may even be what ensures progress where the customer would otherwise have been stuck.)
Good form field descriptions are written to answer four common questions customers ask themselves when filling out a form field: 1) What is being asked for? 2) How should I format the input? 3) Where can I find it? and 4) Why do you need it?
1) What is being asked for?
If the customer doesn’t understand the label itself or is just unsure of its meaning, an additional description can help squash any uncertainty. The most common offenders to cause confusion are technical jargon, abbreviations, and special site / industry features:
Credit card security code – One value; many names. E-commerce sites are incredibly inconsistent in the labelling of this field, with some sites even relying on technical abbreviations such as “CVV2” which few customers will understand unless they are a frequent e-commerce shopper or a description is provided telling the customer what it is and where to find it on the card.
Address line 1 and 2 – It isn’t immediately obvious what part of the customer’s address should go where. For example, does my apartment number and floor belong in address line 1 or 2?
Industry-specific values – Don’t expect customers to be privy to your industry’s unique numbers and codes. For example, if you’re flying in the US you may have the option to enter a “Redress number”, which is hardly a universal concept to unaccustomed travellers and foreigners. Other industry specific labels include “Issuing bank” and “Purchase Order#”.
Abbreviations – Labels such as “M.I.” and “QTY” can be tricky to decipher, especially for non-native speakers. Similarly, when you’re asked to enter data it’s not always clear if you should provide the abbreviation or full name of a given entity such as an airport code vs the full airport name.
2) How should I format the input?
Without formatting examples and rules, the customer is likely to run into validation errors. This is especially true of data that has multiple standard formats such as a phone number with various separators and indicators included depending on the context. Consider the following examples:
Phone number – Should it be “(415) 315-9567” or “415-315-9567” or “415 315 9567” or “4153159567”? And should I include the country code? While your site should accept all common formats, giving the customer an example is crucial so she at least knows one accepted input formatting that is “safe” to use.
Password – What are the password requirements? Is there a minimum or maximum length? Are all characters allowed? Must it be a combination of letters and digits? Is there a difference between lowercase and uppercase characters?
Monetary amount – Depending on country and accounting style, monetary amounts can include decimal- and thousand-separators, which themselves can take multiple shapes (a dot, a comma, or a space).
Credit card number – Should I include the spaces seen on the physical card? Surprisingly many sites will reject the card number if spaces are included even though this is how they are printed on most credit cards.
Numeric dates – Depending on country, month and day may switch place (DD-MM-YY vs MM-DD-YY). Furthermore, some technical systems print the date in reverse order (YY-MM-DD). Misunderstanding the sequence can lead to invalid data input and misinterpreted delivery dates. (We recommend using month names instead of numbers to avoid any ambiguity. Similarly, you may use four digits for year or prefix it with an apostrophe for absolute clarity.)
3) Where can I find it?
Often the customer has to type data from a physical entity such as a credit card or a letter received in the mail. In these cases, telling the customer exactly where to find that data can speed up the process significantly and reduce erroneous inputs. Some of the most common examples include:
Credit card security code – Credit cards are packed with digits printed on both sides. This can make finding the security code a difficult task unless you know exactly where it is and what you’re looking for. To make matters worse, the security code is printed different places and in varying lengths depending on the card type.
Coupon code – If the customer has received a coupon or gift card (or similar physical token), you can help her by pointing out exactly where the code(s) can be found on the card.
Identification codes – Various types of identifiers are often used to tie offline data to online purchases. These identifiers are commonly printed on utility bills and receipts, and include account IDs, invoice numbers, and serial codes.
4) Why do you need it?
Even if the customer know what information is being asked for, how to format it, and where to find it, the customer may still question why you need it. Consider an e-mail address field: the label is unambiguous and it’s 100% clear what and how to enter it, yet the customer may still wonder how you will use her email – will you be sending her newsletters? Will it be shared with third parties? A description can alleviate such privacy concerns. In fact, during our usability testing, test subjects have proven quite forgiving as long as the site explains why certain information is required. Other examples include:
Date of birth – To ensure compliance with laws and regulations, the customer’s date of birth may be required in some cases. However, this is often considered a very personal piece of information and depending on your segment it might be outright rude to ask for. So instead of just merely asking for the date of birth, be sure to follow up the field with a decent explanation as to why you’re asking for it as well as how it’s used and stored.
Phone number – Customers are being flooded with an ever increasing number of robocalls and phone marketing, so increasingly the customer will think twice before handing out her phone number if you don’t explain why it’s needed. If you only require a phone number for order and shipping purposes, a small description stating this can alleviate the customer’s privacy concerns.
Stored credit card – Some sites offer to store the customer’s credit card details during account creation (sometimes with the possibility to opt-in/out). This is a good time to offer a storage policy tooltip. Similarly, because many sites store the card “silently”, it may even be a good idea to state if the card won’t be stored since the customer really has no way of knowing. (Note: this is primarily a concern when creating an account.)
3 Ways to Display Your Descriptions
The context of your description is crucial: it must be in the right place at the right time. But depending on the type of description needed and the design of your site, different ways of displaying those descriptions may be adopted.
There’s at least three common ways of displaying label descriptions: 1) Inline descriptions, 2) Tooltips, and 3) Dynamic descriptions.
1) Inline Descriptions
The easiest way to provide simple instructions, formatting examples and label clarifications, is by the use of inline descriptions. Inline descriptions are typically placed in conjunction with the main label itself or in close proximity to the form field, and are permanently visible to the customer. This way help is always right where you need it.
To avoid making the checkout form feel cluttered and overwhelming it’s recommended to subdue these inline descriptions (e.g. small grey text). Also, since they are permanently displayed these descriptions should be very concise.
2) Tooltips
Tooltips are a clever way to hide away in-depth descriptions until they are needed. Tooltips often take the form of a question mark icon or a “Learn more” link and can typically be activated by click or mouse hover (just remember to provide a proper fallback for touch devices as they have no hover state).
Tooltips are an ideal candidate when you have to explain in detail how the information is used, why it’s required, or where the customer can find the information.
3) Dynamic Descriptions
If you want to keep a very clean form design while still providing inline text descriptions, you can adopt a more dynamic approach and only reveal the description while the corresponding field has keyboard focus.
Twitter offers a good example. On Twitter’s sign up page the password rules are only shown when the password field receives focus:
At Kohl’s, the phone number field is auto-formatted as the customer types. This eliminates any formatting ambiguity the customer might have had.
The example seen here are for US sites / phone numbers – you should of course always use a formatting example that match your own audience (local ways of formatting).
Form field placeholder text can also be used for short descriptions and formatting examples, although they have the inherent drawback of disappearing as the customer types. Therefore, it should only be used for secondary details such as formatting examples to avoid the trap of false simplicity.
Conclusion
In this article we’ve seen the many ways in which form fields may confuse a customer. We’ve pointed to 15 “common offenders” that all benefit from a clarifying description in one way or the other. And finally, we looked at three common ways in which form field descriptions may be implemented.
Form field descriptions are certainly not the most exciting thing in this world but don’t underestimate their importance: those ultra-short contextual help texts can clear up ambiguity, ensure the customer doesn’t get stuck, and save your customer support a bunch of repeat questions.
By cleverly addressing what is being asked for, how the input should be formatted, where the input can be found, and why it is being asked for, these descriptions can answer all of the customer’s concerns at just the right time in just the right place.
Post a comment (2 so far)
Related articles
Form Field Usability: Matching User Expectations
3 Examples of Inline Help
Poor Copywriting – the UX Problem That Will Never Go Away?
Checkout Experience: Don't Require Seemingly Unnecessary Information (61% Get it Wrong)