Web form design guidelines: an eyetracking study

Forms can be found on almost every website; from contact or feedback forms in small websites to bank details in commerce websites, from registration to communication, from banking to searching.

What we wanted to do, and why we wanted to do it

At cxpartners, we have designed and tested numerous new and existing forms for websites from different companies. We use a set of golden rules that we use as a reference for form design that we have developed over the past six years.

We wanted to validate these rules and seek further insights into various aspects of web form design. This lead us to carry out an eye-tracking study to observe how people react to different form designs, and to find out where users look when they are presented with a big list of text boxes.

We also wanted to find out how we can optimise our layouts when designing a form, to ensure users understand what they have to fill in and ensure users focus on their primary task(s) when filling in a form.

Lastly, we want to provide a list of form design guidelines with supportive data that can help us, and other designers design a better forms.

Relevant research

In his book 'Web Form Design', Luke Wroblewski has recommended a number of best practices for form design. Based on his recommendations, Matteo Penzo and his colleagues have carried out an ad-hoc eye tracking test measuring saccadic activity and saccades times for different label placements, formatting and types of form content (common input fields). They designed and built four separate forms specifically for the test where each of them consists of four input fields.

How our research differs

1. Unlike Penzo's studies which focused on efficiency (movement of eyes between fixation points and how long it takes to travel from one point to another), we were interested in ease in completing a form and the users' satisfaction.
   We sought to find out how to design a form that users enjoy using and is easy to fill in without unnecessary distraction - the quality of a form design.
2. Instead of designing new forms for the research, we used four existing, and familiar registration forms - Yahoo! Mail, Googlemail, Hotmail and eBay. We chose these forms as we wanted to reflect real-world conditions as much as possible and cover a wide range of designs.
3. The four registration forms we chose have a good combination of designs. For instance, each represents different layout designs, different ways of grouping fields and different ways of indicating mandatory or optional fields (as shown in Table 1).

Table 1: List of forms selected for the research

Google Mail sign up form

• Left-aligned horizontal labels
• No grouping applied
• No indicators (all fields required)

Hotmail sign up form

• Right-aligned horizontal labels
• Grouping, separated by lines and bold headers
• Asterisks at the front of labels

Yahoo mail sign up form

• Right-aligned horizontal labels
• Grouping, separated by lines and numbered, coloured headers
• No asterisks, uses italicized text for optional field

eBay sign up form

• Vertical labels
• Grouping, separated by shaded headers
• Asterisks at the end of labels

Statistical relevance

It is worth mentioning that the main objective of the research was to look for trends in best practice when designing forms.
It might not be statistically valid. However, we have tested with target users which are familiar with online forms, have used real world existing web forms, provided users with a comfortable testing environment and encouraged them to use the form in the way they would do at home. The findings of this study are going to be the basis for further work.

How we did it

We tested with eight participants (six female and two male) at our office in Bristol. The participants' average age was 27, ranging from 22 to 33. All participants had online shopping experience or use webmail accounts in their daily life, where they are familiar with web forms.

Two forms were randomly chosen for each participant, and the order of the forms was counterbalanced over the group of participants. The participants were requested to fill in the forms, assuming they were registering for the webmail service at home.

In this research, we not only listened to the participants’ comments about filling forms, we also observed their actions and analysed their eye activities. By combining all the data, we were able to provide insights into the behaviour of users when filling in forms, the optimum design for forms and what should be considered when creating forms.

What we found:

Guideline 1 - Vertical, not horizontal

Users complete web forms from top to bottom. Therefore forms with a simple vertical layout are always better than multi-column layouts.

All the forms tested in this study had a vertical layout with different label alignments. We found that vertical aligned labels are preferable (e.g. eBay) as compared to right/left aligned labels. Participants found that it is easier to scan down a column, rather than scan from left to right.

"It's easier to look down as my eyes will look down to find the next box".

Quick tips:

Use a simple vertical layout and vertical aligned labels where possible.

Guideline 2 - Left-aligned labels are clearer (anecdotally)

Sometimes it is not possible to have vertical aligned labels due to some design restrictions (like having a minimal amount of vertical space), horizontal aligned labels are the alternatives.

Both Yahoo and Hotmail have right-aligned labels, whilst Google Mail's labels are left aligned. The eye-tracking study we carried out did not produce a conclusive answer as to whether left or right aligned labels are preferable by participants. However, labels with left aligned labels are anecdotally clearer.

Although they are claimed to have the slowest completion rates because it requires more eye fixations and longer eye movements, it is not necessarily a bad thing depending on the objective of the form. Left-aligned labels have a tidier, clear layout and they enable users to quickly scan each label increasing the readability of the labels.

In their test, Penzo concluded that bold labels should be avoided if possible, as they are more difficult to read. However, our findings show a contradictory result. It conforms to Luke’s recommendations where bold fonts can emphasis the labels from the foreground of the layout. Our participants found forms with bold labels easier to fill in.

"Googlemail is easier to read because it's bold"

Quick tip:
If vertical aligned labels are not possible, use bold left-aligned labels.

Guidelines 3 - When breaking the 'one column' rule

There are some exception cases where the 'single column' rule can be broken. Users expect to see names (first and last name), dates (year, month and day) and time (hour and minute) written on a single line. Nonetheless, when putting more than one field on a line, they should be designed carefully.

Yahoo and eBay have both first and last names on the same line. Many participants commented that they felt awkward having to skip from left to right to fill in both fields for eBay, and then continue filling in the rest of the form (in vertical direction).

However, participants did not make the same comment about Yahoo. As shown in Figure 1, eBay has more eye fixations and longer viewing duration than Yahoo on the last name field. We suggest this might be due to two reasons:

1. The gap between both fields is smaller on Yahoo's page; and

2. Most importantly, both fields share the same label (same for birthday: day, month and year in Yahoo). Psychologically, participants treated both fields as a single question and did not feel that they were entering two pieces of information.

Another interesting design point, Yahoo cleverly places the secondary labels inside the text boxes: First Name and Surname, with light gray fonts which disappear once users start typing in the boxes (Figure 2).
We like this approach as there is no extra eye movement required and it is impossible for users to miss reading the labels. One thing to bear in mind when using this kind of design is to make sure the coding is done carefully to support accessibility.

Quick tips: When more than one field is placed on a line, ensure that they are designed to look like a single piece of information (e.g. sharing a single label, or putting them closer to each other).

Guideline 4 - Use coloured or shaded grouping headers ONLY if they are important

One of our golden rules is to break a form into manageable chunks, putting relevant fields together to make it 'feel' shorter.

In the tests, Googlemail was the only site which did not break the form into logical content groups, whilst the other three forms group related fields and provide a header for each group.

From the eye-tracking study, we found that the participants did not pay much attention to the headers (see Hotmail heat map gaze opacity in Figure 3 which shows what participants saw and did not see on the page). Shaded headings (see eBay’s heat map gaze opacity in Figure 4) or coloured heading fonts are more likely to catch users attention.

“It [shading] is much clearer”, “[Yahoo] Well chunked, good use of purple for the headings, fields nicely grouped, instantly see the groupings”.

Grouping related fields into appropriate chunks is definitely useful. The question is: do users always have to read the grouping headers? It might depend on the purpose of the headers and how important they are in the form. Our suggestion is that if you want users to see the headers, use shaded headings or coloured, emboldened heading fonts. If they are not important, don't bother to do so to avoid distracting users from filling in the form.

Quick tips:
Emphasize the headers (coloured or shaded) if you want users to read them.

Guidelines 5 - Don't use asterisks, make clear optional fields

There are always arguments whether asterisks should be used to indicate mandatory fields, or to use the word ‘optional’ for the opposite. Both eBay and Hotmail use asterisks for required fields, whilst Googlemail does not have any indication, which presumably means that all fields are required. Yahoo is unique in using italicized text to indicate optional fields, e.g. ‘alternative e-mail’.

None of the participants were aware of Yahoo's optional field as it's italicized text does not stand out from other labels. Data also shows none of our participants paid attention to asterisks and its indication on top of the page (see Figure 5, showing there is no fixation at all). Participants tended to fill in all the fields. Some of them mentioned that they would only pay more attention to the asterisks or optional symbols when they are unwilling to provide specific information or they thought a question is unnecessary.

“I won’t think of it (asterisks or optional) unless I thought the question is unnecessary”

People go on to a form expecting to fill in everything. If possible, only ask users for information that is absolutely required. If for marketing purpose or for some other reasons where optional fields are needed, we suggest to mark optional fields clearly instead of indicating the mandatory fields.

From our previous experience in observing hundreds of user tests, we found that not all participants know what asterisks '*' mean. Therefore, we recommend placing the word 'optional' inside the text boxes in grayed fonts, as shown in Figure 6. In this case, it is not possible for users to miss it and there is no extra eye movement needed to read it. We are yet to test this design with users.

Quick tips: Only request for required information. If optional fields are needed, make them clear instead of using asterisks for mandatory fields.

Guideline 6 - Use single field for numbers or postcode

During user testing we have carried out over the past few years, we've seen that participants are easily confused and uncertain how to fill in fields involving numbers, such as postcodes and phone numbers.

eBay has two fields for phone number, including an international code. Although there is an example shown below the field, it is not clear how a mobile phone number should be entered. As shown in the heat map for eBay in Figure 7, the red spot or ‘hotspot” indicates users looked longest at the phone number field.

“How do you put in a mobile number?”

“Not particularly friendly”

There are a few ways to avoid this. One of our golden rules - simple is better. A single field is often more effective than two or more fields. It is also important to have good system validation such as using string analysis to determine whether the users have entered a valid input. Users often are not sure if they should include a space in a postcode. A good design should be able to accept both conditions, with or without a space. If not, a simple, clear error message should be presented.

Phone numbers can be a tricky one. International codes can be written as '00' or '+'. Clear indication of which format is accepted should be shown. In addition, individuals remember their phone numbers in a specific way. For example, for a UK mobile phone number, 07812345678, one can remember in the format of 3-4-4 (078 1234 5678) or 5-3-3(07812 345 678). Allowing any form of input would be the best.
Quick tips: Use single field for numbers or postcodes, allow input in various forms. If not, use a good system validation and provide clear error messages if invalid input is entered

Guideline 7 - Avoid multiple tasks. If needed, ensure the important message stands out enough

When users are filling in a form, they often want to focus on the task, get it done quickly and move on to their primary task - making a purchase or registering for a service. Placing any additional unimportant information which requires users to read, may slow them completing the form and therefore should be avoided.

However, if there is an important message that needs to be conveyed to users, it should be highlighted and stand out to ensure users read it and don't miss it.

As shown in Figure 8a, the participants hardly looked at the information section on top of the Hotmail page. They skipped the section completely and went straight to the form. However, on the eBay page, participants read not only the message above the form, but also the message box at the right column (see Figure 8b). Both of these messages caught the participants' attention because they were highlighted in a box and were placed within or parallel with the forms.

Quick tips: Let users focus on their task and avoid distractions. If a message is an important one and it needs to be read by users, make sure it stands out enough to catch users' attention.

Guideline 8 - Be wary about introducing real time feedback

Yahoo provides instant feedback each time users fill in a field by showing a tick at the end of the field. Each tick disappears after a few seconds (as shown in Figure 9). The majority of the participants commented they did pay attention to them. However there were mixed opinions from the participants on the animated ticks. Some of them gave positive comments, whilst others thought they were distracting.

“The tick is useful. It saves the hassle of having to recheck what I’ve put in”

Real time feedback is useful to present information that needs to be conveyed urgently and requires users' instant attention.

Quick tips: Use real time feedback carefully and in an appropriate manner

Guideline 9 - Place tips at the side (if possible) of the relevant fields

eBay and Googlemail have tips below each field, whilst Yahoo has real time animated tips at the end of fields. Hotmail, on the other hand, has the descriptions below and at the side (animated).

Overall, participants preferred descriptions that appeared at the end of the fields rather than below

“I prefer it that they are at the end, it makes me read them”

Descriptions underneath fields can easily clutter the page especially if they are all black fonts, for example, as in Googlemail.

“Looks like there is a huge chunk of writing, very messy”

Yahoo and Hotmail both have descriptions at the end of the fields. However it is interesting to find that participants read the descriptions on Hotmail page more often than Yahoo (comparison between heat maps for Yahoo and Hotmail in Figure 10). Hotmail has a ‘tidier’ layout where all the fields are in the same size and are aligned, both vertically and horizontally. On the other hand, Yahoo has quite a big mix of text boxes and drop down boxes with different sizes, and they are not aligned. Therefore when the description appears at the end of a field, users can easily ignore or miss it.

In addition, when providing tips for each field, it is vital to ensure that they are placed with the correct field. For example, eBay provides tips on how to choose a password (e.g. require six or more characters or numbers). However, it is placed below the ‘re-enter your password’ text box. Instead, it should be shown to the users before they first enter their password, along with the ‘Create your password’ field (see Figure 11).

Quick tips: If possible, place tips at the side of the relevant fields and ensure the fields are well aligned

Guideline 10 - Tell users how many steps are left if it's a multi-page form

We suggest that it is better to allow scrolling than building a lot of short pages of forms. Although all the forms we tested in the eye-tracking study had all the fields on one page, participants made a specific comment that they would like to be informed how many steps left and what lies ahead when they are dealing with a multi-page form.
Quick tips: Provide users with a progress indicator showing them what they would require to do in order to complete a registration or payment process

Other guidelines

We have four other golden rules which are not mentioned above:

• Always remind users what they want first, then ask who they are in order to build trust (e.g. 'Brochure request (please complete below sections')
• Use cookies to remember users' details (not passwords) so that they do not have to keep filling in the same information again and again
• Never use a complex or overly legal statement to confuse users, for example when asking users to agree to receive monthly newsletter. Users do not like companies who try to trick or confuse them into giving their details

Summary

Users do not like to be visually distracted when filling in forms. They often want to get it done as quickly as possible. Therefore it is vital to design a clear and tidy form. Users do not mind filling in a rather long form with easy to understand and neat design than a short, visually cluttered and complicated form.

If you found this research interesting, we'd be happy to talk more about it with you. You can contact us either on +44 (0) 117 946 3930, or via info@cxpartners.co.uk.