Guidelines 222-231
Form conversions are the centerpiece of lead generation, sign ups and ecommerce sales. They are the gatekeeper to leads, revenue, and survival.
And nothing is more frustrating than filling out a badly designed form. (except for slow site speed…)
Form optimization is a key component of conversion optimization. It’s easy to measure, and optimizing bottlenecks in your forms is a way to produce solid ROI upfront.
Most forms are boring, uninspiring, and not fun to fill out. We therefore need to throw everything we have at them: analytics, copywriting, UX and UI design.
Your traffic and audience are unique and they interact with your forms uniquely. It’s good to research and test your specific situation, but here is a list of low-hangers to get things started.
I was annoyed that the order form required a phone number.
10 guidelines for ecommerce Cart & Checkout Forms:
- When designing forms: Fields should be ordered easiest -hardest to fill out.
- Make typing easy: autoformat, support copy/paste, make suggestions (not always!), etc.
- Indicate whether each field is required or optional, unless they’re all required.
- If a required field has been missed or incorrectly filled out, immediately create a visual alert.
- Expiration date format in form and on credit card should match.
- Name and phone number fields should be one field, not multiple.
- Form should be a single column (not multiple columns).
- Forms should offer radio buttons over dropdown box selection.
- Shoppers should be able to edit credit card information without pausing or leaving the checkout process.
- Don’t make coupon code fields prominent.
Guideline #222. When designing forms: Fields should be ordered easiest-to-hardest to fill out.
Have people complete shipping information before they get into billing. This puts Cialdini’s principles of commitment and consistency into action. Once people start doing something, they feel like they should finish.
They’ve already been asked to enter their name, email, and shipping info (which ideally is the same as billing address, so they don’t need to type it again).
Same principle applies for form fields — start with the easier fields first, like name. Credit card number field is the hardest so it should come last.
Don’t do this:
Guideline #223. Make typing easy: autoformat, support copy/paste, make suggestions (not always!), etc.
Autofill – Whenever possible do the work for the customer. When thinking about form fields, ask yourself:
- Do you have any good defaults for this field?
- What’s the history available?
- Do we have any commonly used values?
- Can you use the browser or mobile features or settings (camera, GPS, voice, contacts ) to populate it?
- Can you calculate it (e.g., state based on zip code)?
Autoformat – Do you allow users to enter field information it in whatever format they like? (e.g., phone numbers, credit cards). You should. And your system should be smart enough to allow for it. If so, it’s good to autoformat after the information is entered. This includes to enable and disable auto-capitalization appropriately, transform dates, etc.
And others:
- Support Copy/Pasting
- Provide the right keyboard for the field if mobile
- Do you account for typos or abbreviations?
- Don’t autocorrect for certain fields like names, addresses, emails
Cheeckout was really nice and simple in terms of the interface and I could easily get through the whole process without any difficulty as all the fields were very clear. The content in the checkout fields were very clear to understand and big enough that I didn’t have any problem interacting with it.
Guideline #224. Indicate whether each field is required or optional, unless they’re all required.
First, ask yourself hard whether you need those optional fields.
If you have optional fields on your form, you’re likely asking for “nice to have” information too soon.
L.L. Bean: come on, do you really need my title and middle name?! These four fields should be 1!
Initially, focus on what information is necessary to get the visitor started. The number isn’t so important. What’s important is that your visitors aren’t sitting at home thinking, “Why do they need this?!”
Why do they need my email? My phone number? These pieces of info are particularly interesting to request as people are all tired of Spam calls and emails. Giving that info away means yet another opportunity for more calls and emails.
There were a few extra fields that I don’t normally see during checkout, such as middle name and gender. I would remove them as I do not see them as necessary to complete my order.
I hesitated when I was ready to check out and then asked for an email. Maybe explaining why you need the email would make a person more willing to move ahead.
How to do it RIGHT
L.L. Bean
Tells us subtly that fields are not required with the inline ‘optional’ copy.
Crutchfield.com
Does it even better, starts with name (one field, good) and the easy stuff and clearly has the asterix that is universally understood to indicated a required field. They do this even though everything is required, maybe J. Crew thinks it’s unnecessary, but it is certainly more clear.
Guideline #225. If a required field has been missed or incorrectly filled out, immediately create a visual alert.
This should happen as soon as they start entering in the information in the field just below/after the required field.
J. Crew does a great job, see below as an incorrect phone number is entered just below the address and zip code fields that were skipped. All fields light up and tell the user what to do.
I also found it frustrating that during the checkout, an error was presented for not supplying an email address, however, i was not automatically brought to the place on the page where the error occurred. Instead, the page loaded and placed me at the top of the page with no indication of an error until I scrolled down the page.
I would make the form error messages more noticeable to the eye
I liked that I was given a second chance to enter my payment information if there was an error. Some websites will clear the order and your cart history so the user has to go through the process again by adding items to the cart and checking out a second time..
How to do it RIGHT
Crutchfield
Again, does it even better, the entire field and field label turns a shade of red, and it even indicates that I need to enter a full name via two words.
When done right it gives me a nice green-to-go color indicator.
Guideline #226. Expiration date format in form and on credit card should match.
This is one of those simple things worth mentioning but without need to explain. Don’t confuse your users!
Guideline #227. Name and phone number fields should be one field, not multiple.
Dividing up these fields isn’t worth the gain. Most people get it right, and for those who don’t enter 10 digits for a phone number or two words for a full name, just have a field-level error indication.
The main problem with multiple fields is interaction issues. Generally, the less fields the better. Imagine on your mobile device having to go through 5 fields for name and number (2 for name, 3 for number) instead of just 2?
Guideline #228. Form should be a single column (not multiple columns).
Always use a single column. Just how bad is a multi-column form layout?
A short study conducted through CXL Institute compared form completion time on a single column form vs. a multi-column form.
The single-column form was faster to complete.
Survey participants completed the linear, single-column form (n = 356) an average of 15.4 seconds faster than the multi-column form (n = 346). This was significantly faster at a 95% confidence level.
Guideline #229. Forms should offer radio buttons over dropdown box selection.
uxmovements.com published an article last month (16 June 2016) sparking our curiosity towards the use of multi-select form fields when another form field type would work. In their piece, “Why Users Abandon Forms with Select Menus”, they argue that forms with select menus often get abandoned because they “take more time and effort to complete”.
More specifically they say they slowed users down by interrupting user flow, being hard to read, and requiring dexterous mouse maneuvering.
BUT, they provide no data to support this.
Well, it’s easy enough to test. So we did. We were just launching a large survey on online trust perception, so we had a good opportunity to simply manipulate a survey form and ask different groups of people the same questions in different formats (multi-select vs. radio buttons) to see how form completion time compared.
The form with radio buttons was faster to complete.
Survey participants completed the radio button form (n = 354) an average of 2.5 seconds faster than the form with multi-select buttons (n = 354). This was significantly faster at a 95% confidence level.
Guideline #230. Shoppers should be able to edit credit card information without pausing or leaving the checkout process.
Past users’ information changes. If they’re in the middle of a purchase don’t make them exit out into an account page in order to edit information like changing a credit card.
Let them update payment information within the checkout process.
Guideline #231. Don’t make coupon code fields prominent.
When people see a “Enter coupon code here” field, they feel less special. “How come I don’t have one?” Many go to Google to find a coupon; many never return. Leaving the site in search for coupons is a common reason for shopping cart abandonment.
So this is not a good idea:
Instead, have a text link saying “Got a coupon?” or something similar, and clicking on the link makes an input field – like the one above – appear. Text links are not visually very prominent, so less people will pay attention to them.
Customers who already have a coupon code will be looking for a way to enter it – so unless you hid it really well, they will find it and will be able to apply their coupon code. And If a customer has received a coupon (via email) automatically apply it to total and display the discount.
The window to enter a gift card was before all other payment information and just seemed very out of place on site. I kept putting my credit card in that box.
The promo code in check-out was very prominent. I generally go and look at the internet to see if there are any promo codes when I see this.
How NOT to do it
Petco
Gets most things right with their cart but the coupon field is way too prominent.
