Zuko Blog

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:

GoCompare

Go Compare asks for your phone number and email address

Post office


Post office asks for mobile phone and/or home telephone number, email address, and asks you to confirm email address

Halifax

The Halifax asks for email, then confirm email, main phone number, other phone number
(optional), phone type drop downs, and an international dialling code.

Little Loans

Little Loans asks for
email address, mobile phone number, home phone number, daytime phone number.

Santander

Santander asks for mobile phone number, home phone number, email address, confirm email address

RAC

The RAC asks for primary phone number, email

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:

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.

Looking to improve your form conversion?

Submit your form to get a free health check showing you:
  • Likely friction points leading to abandonment
  • Form elements contributing positively
  • Other areas for UX improvement
Zuko's Big Guide to Form Optimization and Analytics Cover Shot

We wrote the book on form optimization!

"The best book on form design ever written - 80 pages of PURE GOLD"
Craig Sullivan, CEO, Optimise or Die
DOWNLOAD THE EBOOK
(No email needed)

More from our blog:

Video Workshop: eCommerce Checkout Teardown
We review an eCommerce checkout, looking at the good, the bad and the ugly
Video Workshop: Fixing your forms
Check your form for these common UX issues that are causing abandonment

Zuko is the most powerful form analytics platform available on the market. Find out how to improve your form and checkout conversion by taking a product tour.

PRODUCT TOUR
zuko full colour logo
Formisimo Ltd, Colony, 5 Piccadilly Place, Manchester, M1 3BR
VAT Number: GB181252425
Registered in England as company number 08859680
New Business: sales@zuko.io
Support: support@zuko.io