Eye tracking is a technology that allows you to “put yourself in the shoes of your visitor” and precisely know where they are looking as if you were that person.
How cool is that?
It’s been used for a while now for the goal of improving user experience (UX) and optimizing conversion rate (CRO) be it a lead generation page, saas or ecommerce sales pages.
The amount of studies conducted on the subject reveals a lot of practical insights that could be implemented on any business right away.
This is especially important when it comes to web forms.
Amount of Cash You’re Wasting is Shocking
Any conversion that takes place online goes through a form of some sort: from a simple “Your Email” field to the most complex B2B multiple pages forms.
Before we dive into it, let me say a few words on what the scanning is made of.
There are two main components of an eye tracking scan – fixation and saccade.
The former is when the eye remains stable for at least 50-60ms. The settled look on one point indicates that the user is interested in that point, making it valuable for further analysis.
In contrast the latter is a rapid motion between two fixation points.
And together both components make a scanpath.
Now, when you’re familiar with the terminology, let’s get right into the takeaways of the studies.
Use the correct input types
There are two types of text inputs that look essentially the same – one that accepts free text and another that allows only entries that match the existing list.
To put it simply, one is, for example, “Name” input where you can type whatever you want and it’s going to be fine. And there’s another one.
It’s still a text input where technically you can write anything you want, but your input has to match the items in the preexisting list.
Like “Your skills” input, which should work in a similar way as Google: you start typing the beginning of the word and you see the dropdown with options that are exact matches or closely related to your word.
That’s how it’s supposed to work. But it’s not the case on many websites.
Some developers simply ignore the dropdown part and the form becomes a mess since the user expects the inputs to be a free one by default.
Yet when they enter the values, the form shows an error!
It’s the type of situation when you’re asked to enter your skills, you type “User experience design” for example and it shows that there’s an error in that input without specifying the nature of the problem.
And what is the user supposed to do?
The issue could be as trivial as the letter case at the beginning of each word, so the “correct” input would be “User Experience Design”.
It’s confusing and definitely leads to form abandonment and as the result cuts off the supply of new customers.
Don’t get me wrong, it’s a good idea to use such inputs as it’s more convenient for the user to start typing and then select the right option.
However, make sure the dropdown part is working correctly and the error messages make sense.
Get rid of dropdowns
In plain English – they suck.
So the job of the person in charge of user experience and conversion rate optimization is to get rid of them and replace them with something more user-friendly e.g. regular inputs.
This applies to all inputs across the board as the images of eye tracking scanpaths constantly demonstrate lower amount of fixations on text inputs which leads to… you guessed it – a smoother user experience and thus more conversions.
In comparison, regular drops that are used practically everywhere (chances are that they are on your website as well) lose to text inputs by 10x fold!
Could you imagine that?
Ten times more fixations as the user has to click each dropdown, then find the right row, then click it and repeat the process as many times as the number of dropdowns.
There’s 3 at least on the date of birth input.
Your Competition Will Destroy You
In modern day and age users have a very short attention span.
If you’re wasting your users’ energy left and right by having poor forms that means you’re not only losing money, but people who interact with your forms are going to hate you for this.
Optimize your forms. Please.
Don’t fire an error message right away
Have you experienced this: once you start typing in a multiple input field like date of birth there’s an error message that pops right away?
You didn’t do anything wrong but because you haven’t completed the input it already shows you that annoying red text.
The thing that pops up right after you’ve interacted with form elements is called inline validation. As the name suggests, that type of validation provides an instant feedback on your actions with the form.
You don’t have to press the “Submit” button in order to see what’s correct and what’s not in the form.
The inline validation takes care of it right away and displays the appropriate message next to each input.
But as you see sometimes it can be… too instant to put it this way.
That’s the worst thing for the users as it confuses the hell out of them since as said earlier what they’re doing is perfectly fine, but the label says otherwise.
If you have already replaced the dropdowns with text inputs in your forms – congrats!
But it’s not over yet.
As you see there’s another way to screw the UX up even with some positive changes already made.
Talk to your developers to make the error message appear at a more appropriate time.
For example, if the user has finished interacting with the date of birth field, give them 1-2 second pause and display the error message only afterwards.
If there’s an actual error of course.
Make the error messages clear and position them appropriately
This advice is closely related to the previous one however it’s a bit different.
The key here is to make the error messages themself as clear as possible and of course place them as closely to the input that error had taken place in.
Who wants to fill a long form and get a default “An error has occurred. Please try again later” thing.
Admit it, you hate it as much as I do.
What error? Where did it happen? What should I change? Why try later, is it going to solve itself?
In this case the most logical thing to do from the user’s perspective is to say “f#ck it” and go to another competitor’s website.
You’re not alone in your market, are you?
But even if your error message is crystal clear and makes sense at a glance, the location of the message could hurt the conversion process.
If the message is located at the bottom of the form, it would take a triple effort to fix an error.
One scanpath to the bottom of the form to get the message, another back to the input to change the value and back to the bottom to hit that submit button to make sure everything is correct.
There’s a ton of fixation points and saccades wasted here.
Just imagine how much time and effort it would cost to the user.
Even in medium sized forms the number of fixation points could easily pass 200 because of this.
"We 2X Profits in 4 Weeks"
I don’t know about you, but I would drop that clunky form and go somewhere else.
200 times moving my eyes to fill out the form? No wonder why some businesses don’t make enough money and think that it’s their product’s fault.
Just get a properly designed website for a start.
Stop asking for the same information multiple times
Imagine you’ve just met someone for the first time. After a small talk you ask the person’s name:
“What’s your name?” – you say.
“John, nice to meet you. And yours?” – the person politely asks.
You tell them your name.
“But what is your name?” – that person asks again.
That’s strange, but you reply once again.
“What is your name?” – you hear the same question for the third time in a row.
What a weirdo, you think.
Better off getting out of here. And not to appear rude you reply with something “I gotta go, I have an urgent call”.
Strange interaction, right? Barely happens in real life. But it’s not the case for the online world.
That’s exactly what some businesses are doing.
They bombard their prospect with the same forms over and over again.
“What is your name?”, “What is your e-mail?” multiplied by 3, 4, 5 times would make furious even the calmest guys out there.
The general rule of thumb – ask the least amount of information and certainly only once.
It’s perfectly fine to ask for some more info later to make sure the product or service you’re delivering is catered to the prospect’s needs and much better to do it after building some rapport first.
Good microcopy costs fixations as well
To this point we were talking about bad stuff, more specifically how to avoid it.
But this one is a bit confusing – too much of good stuff is also bad.
Here’s what I mean.
It’s always a good idea to instruct the user how to fill a certain input in the form by placing a small text next to the input so they can avoid confusion and interact fast and efficiently.
Here’s the catch though.
Every additional element in the form be it a small paragraph of microcopy or a tooltip has its cost of longer scanpaths.
The more elements you have the more attention scatters across all of them.
That’s why if you put an explainer text next to every input it would ruin the UX as much as complete absence of thereof.
Don’t put obvious suggestions like “Enter your date of birth” next to the date of birth input.
When you see captions like this you may think “Seriously? I would’ve been totally lost if it didn’t tell me what to do with that “Name” input”.
Save the “attention bank” for more important elements where additional guidance if really necessary.
It’s vitally important to make your forms work the way they are supposed to be – correctly and as smooth as possible.
If your business is purely online there’s no way it could survive if your forms are broken regardless of the business type – b2c, b2b, lead generation, ecommerce, info products.
The eye tracking findings show how it’s easy to waste users’ already short attention span by making mistakes in designing and implementing web forms.
Even small issues result in an exponentially increasing number of fixation points and saccades which in turn lead to form abandonment and turning to another competitor.
Here at Skyrocket Clients we design landing pages according to the best UX and CRO guidelines so they deliver massive results and don’t confuse your visitors.
Meanwhile, check out the guide we create for you below. It can make some drastic changes in your business.