How form usability can increase your ecommerce conversions

This post is from guest author Giles Thomas, founder of AcquireConvert. Enjoy!

According to a MarketingSherpa study, the more often you conduct usability evaluations on your website, the faster your business will grow.

40% of marketers who only test their site’s usability when there is a problem see slow-than-expected revenue growth.

So in order to get the conversion rates you want (and your business needs), you must be constantly evaluating and improving on your e-commerce store’s usability and form usability.

In this article, you’ll learn best practices and conventions for form usability and how to employ them to make more money from your e-commerce store.

You’ll look at form usability guidelines you should be following and how usability fits into a complete conversion optimization process.

What you’ll learn:

• What is usability and why is it important?
• Form usability guidelines
• The truth about conversion optimization
• How usability fits into a complete conversion optimization process
• Free bonus area: 247-point usability guideline checklist

Usability affects your bottom line

Before you learn how to improve the usability of your forms, let’s first remember what usability is and why it is important to your business.

Usability is a quality attribute that assesses how easy an interface or site is to use. If your site is hard to use, your visitors will leave without making a purchase and your business could fail.

13 form usability guidelines

Let’s learn about some best practices you can test on your website forms to try to get more of your visitors to buy.

These are some lesser-known form usability conventions.

1. Your fields should contain default values

It is helpful for visitors if your form fields have default values. This guides the user as to what their data could look like once complete and acts as an instructional aid alongside the form’s labels.

Form fields with example default values

To technically achieve this you can use the placeholder tag (not to be confused with and used as a label itself!) or jquery input masks.

The default data should also show the format the data is expected in, for example with date picker fields or for telephone fields.

2. Your interface should be compatible with source documents (when needed)

Ensure that when a task involves source documents (such as a paper form), the interface is compatible with the characteristics of the source document.

This means your form should reflect the source document’s data fields.

Nathan Barry took this idea one step further and even created a visual design that matched his source documents.

In this example, the visitor must supply their credit card (source document) details to complete the form conversion. Nathan matched the form fields to the source document data and even designed the experience so it’s very clear for the user what data goes where.

This clever form makes it easy for users to tell what information to enter.

3. Form fields should automatically enter formatting data

Make sure your users do not need to enter characters such as “£” or “%” and that the site automatically enters field formatting data.

Numbers should format without requiring the user to enter symbols.

4. Text boxes on forms should be the correct length

An oversight I often see is form fields not being long enough for their requested data.

Make sure the input is long enough for the biggest possible data input you could expect. That way, users can view everything they have typed into the field without using the cursor to move left and right.

These fields are long enough that the user can see what they’ve entered.

5. Clearly distinguish between required and optional fields in your forms

Make it clear for users which fields they have to fill out and which ones are optional.

This is often achieved with a red asterisk. You can also use a key to explain what the asterisk represents for explicit clarity.

Red asterisks indicate which fields are required.

6. Your forms should warn users if external information is needed

If your form requires external information like a passport number, be sure to let users know at the beginning of the form—especially if your form has multiple steps that users could complete, only to learn at the last minute they are not in a position to complete the form at the moment.

7. Data should be validated before the form is submitted

Your forms should use ajax to validate the user’s data in real time so they know to update and correct erroneous fields before they click “submit.”

Real-time validation saves users from having to go back and correct errors after submitting the form.

8. Form fields should be ordered with efficiency in mind

Forms should allow users to stay with a single interaction method for as long as possible. In other words, users should not need to make numerous shifts from keyboard to mouse to keyboard. This will make your forms easier and quicker to fill out.

9. When form errors occur, the cursor should move to the first problem field

When a form entry has an error, you should position the text cursor at the location where correction is required. This makes it easy for user to make the correction with as little input as possible.

This form makes it easy for the user to identify and correct the error.

10. Field labels on forms should clearly explain what entries are desired

Ensure your form field labels are explicit in their requirements and describe the desired data clearly.

If you didn’t already know how to find your security code, you do now.

And when field labels on forms take the form of questions, make sure the questions are stated in clear, simple language.

11. Labels should be close to the data entry fields

Your labels should be close to the fields so eye movement is reduced to a minimum. This will speed up the time taken to complete the form.

12. Form questions should be grouped for long forms and have appropriate headers

For longer forms, ensure the form questions are grouped logically and have section headers explaining the purpose of each section.

The section break makes this form feel like two smaller forms.

13. Forms should use autofocus where appropriate

With screens that primarily focus on form completion, place the cursor where the input is first needed. This is known as autofocus in html5 form inputs.

Autofocusing eliminates the unnecessary step of clicking into the first field.

You now have a number of ideas you can test to improve the usability of your site’s forms.

But what does this have to do with conversion optimization?

The truth about conversion optimization

You all know that to increase the percentage of your visitors who checkout or buy, you need to use conversion optimization.

But the big mistake people make again and again is misunderstanding what conversion rate optimization really means.

Many people think it means A/B testing. But A/B testing is just a small step in a much bigger complete conversion optimization process.

Other people think it means looking at your analytics. Now when you think of digital analytics, such as Google Analytics, this is quantitative data. This tells us what happened, on which page, when and how much was spent.

But in conversion optimization, there is another type of data you can collect and analyze for customer insights and A/B test hypothesis ideas…

…Qualitative data.

Qualitative data is collected through the exploration of user behavior.

Where quantitative data tells us what happened, qualitative data attempts to tell us why.

Just like for the big questions: “What is the meaning of life?”

Quantitative data can only take us so far; it can never explain the why.

And this is true for conversion optimization too: quantitative data can only take us so far.

Fortunately, unlike the meaning of life, in conversion optimization you can discover the why using qualitative data collection and analysis.

Some examples of qualitative data sources are live chat transcripts, customer development interviews, user testing videos and usability evaluations.

With this data, you can generate ideas for A/B test hypotheses. You then test new website changes based on the data you’ve analyzed, rather than coming up with random ideas or copying your competitors.

A complete conversion optimization process

As we mentioned earlier, A/B testing is only one small part of a complete conversion rate optimization process.

In fact, conversion optimization is not really about increasing the percentage of people who complete your forms…

Conversion optimization is about increasing company profits through a better and deeper understanding of your customer.

Increasing your conversion rate is actually easy: simply reduce your price, and shazam! More conversions! (Okay, not what you had in mind?)

Increasing your conversion rate and profits is not so simple. But it is possible, if you follow a proven process.

So what does the complete process look like?

Let’s walk through an overview of the CRO process together.

Conversion rate optimization is an ongoing process

Step 1: Set business objectives

You should constantly be setting, measuring, and iterating on your:

• Objectives
• Goals
• KPIs
• Targets

For example:

Objectives

A business objective for an e-commerce store that sells swimsuits might be:

“Increase our sales by receiving online orders for our bikinis”

Goals

Goals are taken from your business objectives.

A goal for our swimsuit business could be:

“Increase the number of swimsuits that are sold”

This directly correlates to the number of form submissions visitors complete, this illustrates the importance of your forms’ usability.

KPIs

The difference between some random data or metric and a KPI is when is it measuring something connected to your business objectives.

For example, for the objective:

“Increase our sales by receiving online orders for our bikinis”

Our KPI would be the number of bikinis sold in a given time frame, like the number of bikinis sold per month. (Or, you could think of it as the number of bikini order forms submitted per month!)

Targets

For your KPIs to be actionable, they need to have targets. Targets can be taken from your historic data and defined for each KPI.

For example:

If we sold 200 bikinis last month, a good target for the next month would be a 5% increase. Therefore, our target would be to sell 210 bikinis in the next month. (Or 210 form completions!)

Step 2: Collect data

The second step is data collection. The data you collect during the CRO process can be categorized into two types: quantitative and qualitative.

Usability evaluations and user testing are great examples of powerful qualitative data sources you can collect as part of your new CRO process.

Step 3: Analyze data

The third step is collecting and analyzing all of the data from your various sources.

You do this using software for quantitative data and by aggregating qualitative data, which basically means looking for patterns to gain insight.

You can use the usability checklist in the bonus area at the end of this post to analyze your website.

Step 4: Create hypotheses & customer theory

The fourth step is creating your list of hypotheses. These are ideas you’ve generated about your customers after studying the data. They are ideas you would like to test as ways to improve your conversion rate and profits.

You then execute the changes, update your website design and code, and run your A/B tests.

The process then starts all over again.

Remember: Conversion rate optimization is not “one and done.” It is an iterative process that should never end. Markets and customers are continuously evolving. So should you.

Getting more sales requires research, not random testing

You all want more of your visitors to complete a purchase on your website.

Today you learned that simply coming up with random ideas and running A/B tests is not the most efficient approach to conversion optimization.

The key to explosive business growth, higher conversion rates, and more profits is following a proven process for conversion optimization.

And usability evaluations and user testing are some of the most important sources of qualitative data you can collect and analyze to inform your A/B test hypotheses.

Get more sales for your company

You can improve your conversion rate too, but you need to take action on what you learned here today!

So for those of you who are super serious about getting super high conversion rates, I’ve put together a free bonus area download.

What you’ll get:

• 247 Point Usability Evaluation Checklist: Increase profits for your e-commerce store
• Hypothesis Prioritization Worksheet: Learn what A/B tests to run first
• PDF – 25 Conversion rate best practices to test: Get ideas for testing and website changes

Click here to access the free bonus area