Research: Eye Tracking on Contact Details in Web Forms

In the second of our blogs discussing our recent eye tracking study in collaboration with Nudge Insights, we compare how 6 online journeys ask for Contact Details. (You can read our previous research on date of birth fields).

The rationale behind asking for contact details is straightforward, but how that manifests itself in online forms varies. We’ll be taking a look at address inputs in a future blog, but even excluding that, there are a number of possible form fields that can be added to a ‘contact details’ section, including:

• Email address
• Confirm Email Address
• Primary Phone Number
• Alternate phone number
• Mobile /Home/ Work / Daytime Phone number

GoCompare

Post office

Halifax

Little Loans

Santander

RAC

Eye-tracking Results

‍

Top Performers:

The necessity of additional information will vary from one form type to another, or depend on the kind of information you are asking for. RAC and GoCompare are both top performers and ask for the fewest pieces of information (one phone number and a single email field).

RAC Visualisations:

GoCompare Visualisations:

GoCompare have a nice clear process for asking for contact information, and their page may have performed better than the RAC form if it wasn’t for the additional information distracting a number of our participants.

GoCompare’s averages were potentially brought down by the number of fixations required to look at their information boxes, which are display when focussing into every field:

*Note, we haven’t included the visualisations over the real screen, as these include personal data of our participants.

Whilst help text is fantastic when looking to reassure users or guide them on certain inputs, having large amounts of text always visible can prove to be a real distraction from the main task of form-filling.

Alternatives to the ‘always-on’ approach include have easy to find links, buttons or inputs that display help text when needed:

A user above have to choose to click on the help link in order for the text to show. The information is available if needed, but does not distract a user who is happy to enter the information un-guided.

Poor Performers:

Santander and Little Loans ask for 4 pieces of information and were the worst performers.

You can see from the scanpaths of the Santander form that although the layout wasn’t too poor (the spacing of the fixations isn’t too broad) there are a large number of fixations here. This should be easy to recall simple information for users (their own personal details are generally easy to remember), but inputting the amount of information that Santander has asked for has clearly taken considerable time and cognitive effort.

The Santander form stands out as being a particularly poor performer in this test. Digging deeper into this, a large part of this is probably due to how Santander handles situations where people make mistakes in the data they enter.

If you make a mistake when entering any of your contact details, the form does not let you know if there are any formatting issues immediately. It waits until you try to submit the form, and then the following messages and indications appear:

At the top of the page, a vague instructional message asks you to look out for red asterisks in the form, but does not say where the user has made a message. Then when you scroll down:

The asterisks are there, but with no help text or useful information about why the information provided failed validation. Good error messages provide guidance on how to fix errors rather than simply pointing them out.

If we look at the scanpath of a user who had errors in their form, we can see how broad it is and how arduous their search had to be to complete the form:

Compare the Santander subtle red asterisks with the error messaging from Little Loans:

The above messages appear immediately, and are fundamentally helpful since they provide guidance on how to correct an error.

This is a scanpath of a user for whom the error messages popped up in the Little Loans forms:

They move clearly from the error message, to the field in question. A user can quickly understand their mistake and correct it quickly.

Little Loans:

Little Loans stands out as a form that has ostensibly a nice, clean UI, but performs badly in this study.

It’s the only form in this study that requires three phone numbers as part of their process. The site does allow you to quickly copy your mobile number into each field, but this is problematic for two reasons:

1. Even glancing as the fields, a user may start to try and think of three different numbers that they could, in theory, provide. Most people will have two, at most – their mobile and a home number. Few will have three, and just by thinking about what they could enter, expend mental energy.
2. If a mobile phone number can be copied to all three fields, why make them required? A single number is enough to continue, so why not remove the requirement around fields two and three?

The scanpath below is another user who got distracted by the “additional information”:

A broad spread and a large number of fixations – both likely to be detrimental to the overall experience of filling out the form.

Optional, additional information can cause problems in two ways:

1. The user leaves them blank, in which case they must still look at them and evaluate whether or not to complete the information asked for. They add no additional information to the organisation that owns the form, but require additional cognitive load simply by being there
2. The user fills them out, increasing the opportunities for errors, frustration and abandonment.

We would therefore advise any website owners to seriously consider the merits of having optional fields in their form.

Why ask for email and phone number twice?

A common feature of online forms is the requirement to enter certain pieces of personal information twice. This is usually an email address and password, but can also be a phone number. The strangeness of this is highlighted nicely by XKCD:

So taking a user’s input only once for the coordinates for a rocket launch is fine, but we must double-check your email address just in case. The above comic highlights the priorities of the organisation vs yours as a potential customer. If you’re getting car insurance, a loan or a credit card, you as a customer would want the following to be absolutely correct, with zero chance of errors:

• Your car registration number
• The loan amount
• Your bank details
• Your address

None of which you’re asked to confirm more than once. By the logic of ‘by only asking once you risk a user entering the wrong information’ you could in fact insure the wrong car, get a loan with an extra zero on the end of amount, have a credit card delivered to the wrong address… But, if you think of a company’s priorities in terms of how they can contact or market to you, the email address and phone number will be top of that list. And those are the details that get asked for twice.

By this logic, if you are trusting a user to enter vital information about their requirements the first time around, then consider doing the same for personal details.

Key Take away:

Asking for more contact information has a detrimental effect on user experience, Ideally ask for the minimum amount of information required, and ask for it once.

A reminder on definitions related to this study:

The data we’ll be using is Fixation Count, Fixation Duration and Total Fixation duration. Below, Dr. Eleanor Trimble from Nudge Insights defines each of these and what they indicate with regard to user behaviour:

Fixations and Saccades
A fixation is a measure of a users eye-movement remaining stable for a minimum of 60 ms, and a saccade is the rapid eye-movement between two fixations. When looked at in chronological order, the fixations and saccades make up a scanpath

Fixation Count
The fixation count is the number of fixations during a segment of the form. A high fixation count indicates that the user had more difficulty with this part of the form. Their eye-movements are unlikely to have been smooth and natural, instead requiring effort to find the information they needed. A further look at the scanpath
can indicate the level of complexity the form causes for the user.

Average Fixation Duration

The average fixation duration is the mean length of the fixations during a segment of the form. There is a direct link between average length of fiations and the cognitive load of the user, however fixation count more relevant measure of form performance when information required for section is relatively intuitive.

Total Fixation Duration
The total fixation duration (also known as the dwell time) is the cumulative duration of the fixations during the chosen section of the form. A larger total fixation duration indicates the the user had the most difficulty with this section of the form, possibly a combination of high fixation count and high individual fixation durations.

Note: Eye-movements are highly task dependent, and in different circumstances fixation metrics can be interpreted differently.

If this has whet your appetite and you’d like to learn more about eye-tracking, Nudge has also written a Beginners Guide to Eye-Tracking, an easy introduction to the techniques and terminology that eye-tracking analysts use.

‍