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
TIP: Ecommerce guidelinesRead Chui’s ecommerce product page guidelines in her What people see before they buy blog post.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
TIP: Eye trackingFind out more about eye tracking.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).
- Left-aligned horizontal labels
- No grouping applied
- No indicators (all fields required)
- Right-aligned horizontal labels
- Grouping, separated by lines and bold headers
- Asterisks at the front of labels
- Right-aligned horizontal labels
- Grouping, separated by lines and numbered, coloured headers
- No asterisks, uses italicized text for optional field
- Vertical labels
- Grouping, separated by shaded headers
- Asterisks at the end of labels
- 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
Table 1: List of forms selected for the research
Google Mail sign up form
Hotmail sign up form
Yahoo! Mail sign up form
eBay sign up form
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.
Figure 1: Gaze fixation diagrams (between 30 – 40 seconds) showing eBay has longer gaze fixation duration than Yahoo’s last name field
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).
Figure 2: Yahoo places its secondary labels inside the text boxes which disappear when users start typing
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”.
Figure 3: Heat map gaze opacity diagram for Hotmail showing participants did not pay attention to the grouping headers.
Figure 4: Heat map gaze opacity diagram for eBay showing participants did pay attention to the grouping headers.
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”
Figure 5: Heat map for Hotmail showing participants how did not pay any attention to the asterisks indication (for required fields)
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.
Figure 6: Placing the term ‘optional’ in the text boxes to indicate optional 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”
Figure 7: Heat map for eBay showing participants looked longest at the phone number fields
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.
Figure 8: (a) Heat maps for Hotmail and (b) eBay showing participants were more likely to read messages which were highlighted and placed within or parallel with the forms
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
Figure 9: Snapshot of Yahoo, providing a real time feedback (tick or error messages) at the end of the field
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.
Figure 10: Heat maps showing participants paid more attention to Hotmail’s real time tips (at the end of each field) than Yahoo’s real time tips
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
Figure 11: eBay’s tips on password should be placed below the ‘Create your password’ field instead of the ‘Re-enter your password’ field
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:
Summary
TIP: Design & research blogsRead more about user experience and design in our design and research blogs.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.
About the author
Chui Chui has done a lot of work with accessibility and written several papers on the subject. She is great at making really complex problems simple. Chui Chui loves food, and is very fond of sugared squid! Email Chui Chui, or call +44 (0)117 946 3930
Subscribe to the RSS feed
Great set of guidelines. It’s very interesting to see eye tracking results and I think you’re right to concentrate on user satisfaction rather than completion speed alone.
Agreed. Lots of interesting points raised here, especially the subtle ones that normally slip through the net!
Thanks Chui!
Hey,
Thats some excellent research Chui Chui. Form design is often rushed or based soley on the information the developer needs with very little consideration given to accessibility or usability.
We’ll definitely be taking your findings into account when designing forms in the future.
Great study, we design forms to feel right intuitively – very good to have the eye tracking analysis to confirm or correct our intuitions.
Thanks for sharing this research! Great tips on the more subtle but successful details of form design.
Very handy indeed – very interesting reading. Need to look at a couple of my forms…
Very interesting, thanks for sharing.
Thanks for the great research.
Chui Chui, that’s a great article. thanks.
Thanks for this. Best bit of UX research I’ve seen for a while. Well done CXPartners!
Very interesting indeed. Validation on postcodes should be done very carfully there are still countries (such as Ireland) where they are not used at all. Postcode validation is a constant source of confusion for Irish form users.
Wonderful piece of research. This made me to think over all the forms that i worked on. Really appreciate your work.
Great article. Thank you for sharing your research!
Great useful article but could you link to slightly bigger images for the forms? would be nice to expand the examples of the forms at the start ! Thanks
Great piece of research on the forms using the real world examples. Will keep in mind the guidelines you shared. Thanks for sharing!
Very interesting and comprehensive artice. Very helpful, keep up the good work.
Have you got any thoughts on how the peripheral vision is used by the persons who fill out the form. Does you eyetracking equipment catch that at all? I am thinking this is used a lot to “read” e.g. headlines and help text…
Good article. Thanks!
your article is great but the in-line images are almost impossible to see, which diminsh the quality of your article because you cant compare what you are saying to the images.
Interesting..
Some ‘no brainers’ here, but still sometimes people seem to miss the seemingly obvious!
Point number 5 concerning asterixes made me stop and think – I’d natually assume asterixes would work best (as most users would be comfortable with this, as it’s commonly used in paper forms..)
Am interested in how some of these trends extend to other standardised forms, specifically checkouts – where the required content would be quite familiar and predictable (delivery addresses, contact info, card details).
First of all, thanks for all your nice comments! Glad that you enjoyed the article and found it helpful. We’re aware the images are difficult to see and are looking at updating this to make it easier.
@Mikael, eye tracking data tells us where users direct their central vision. Unfortunately eye tracking equipment is unable to capture peripheral vision. However I believe, peripheral vision definitely plays a role when users fill out a form. Via peripheral vision, users determine if content (e.g. help text, heading, images) interests them or is relevant to their primary task before they look directly at it. The point I made in guideline 9, for example, participants were more likely to read help text that appeared at the end of the fields and when the form has a ‘tidier’ layout. We can definitely argue that participants used peripheral vision to decide whether they wanted to read the help text or not while they were looking directly on the main fields. After all, it is a norm that we (humans) are more attracted to pretty, clear and tidy things and reject messy, unclear content.
Hi Chui Chui
Thanks for taking the time to share your work with the community. It’s so important that web design is based on research rather than just personal preference or what we “think” users might want.
Having said that, I think there are some fairly major problems with the way your research was designed. In my view these methodological issues mean it is inappropriate to draw any conclusions (and in turn to put forward guidelines).
You and your readers might be interested to hear my reasoning on this front. They are published on my website at http://formulate.com.au/articles/eyetracking-research-and-forms-design/.
Great article, I like the different approach of this research and the way its results are reported
“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.”
That, or Hotmail form had bad field labels and users needed tips, which wasn’t the case with Yahoo/Google. Or maybe they were more distracting when they appeared. I guess we won’t know.
Excellent information, great observations and the perfect reporting method.
One thing came to mind:
Guideline 7 – Avoid multiple tasks. If needed, ensure the important message stands out enough
in this you have given the example “information and message on the top of form” for eBay and Hotmail signup forms. I feel there is a difference in the context of use for these two websites and that may make lot of difference for this information and important messages.
Any observations from this perspective also would be helpful.
Great tips….thanks Chui
Thanks Chui Chui Tan,
I learned much from this article.
I will take care in my future form designing.
Jessica’s point about statistical validity (14 June) is a good one – and essential in academic studies and in advancing public knowledge.
Our point of departure was the experience we’ve had over the past six years.
Chui is building on our work user testing with scores of participants and in creating forms that have boosted the performance of live websites with millions of transactions.
In other words, the blog post is based on a great deal of data. But we can’t publish that data because it’s from commercial studies.
Instead, this study allows us to illustrate key findings without breaching commercial confidence and to share useful guidelines with others in a transparent way.
Even though our experience has been gained on commercial projects, I’m sure people will find it valuable.
Very interesting, thanks for sharing.
Giles, thanks for clarifying that this set of guidelines is based on a lot of other data that you haven’t been able to publish.
It’s a pity that the original article didn’t explain the basis for the guidelines.
On the whole, I think that following your guidelines would not harm a form – and might even improve it.
But I also notice that the four forms chosen for this research are all from well-known, important web presences where the user is very likely to want to engage with the organization, irrespective of the sign-up form experience.
Also, the four forms are all at least adequately designed. They’d have to be: millions of users have managed to make their way through these forms.
So: if you’re designing a registration form for a brand-name, major web presence – then you can use these guidelines. No problem. (But don’t forget to do loads of usability testing: your users may have different ideas to these ones).
If you’re designing any other type of form: by all means consider these guidelines. Thinking about them won’t do you any harm and might do you a lot of good.
But don’t get the idea that these guidelines on their own will guarantee a good form.
For example, you need to think about the crucial importance of asking the right questions at the right point in the relationship: should you have a sign-up form at all? What about forms for other purposes such as check-out? What about more complex forms such as job applications?
And you also need to think about every step of the user experience and how your form fits with it. For example, guideline 10 “Tell users how many steps are left if it’s a multi-page form” is OK, so far as it goes. But there are many other things to think about if your form goes onto multiple pages, such as:
- whether that’s too much burden on the users altogether
- what to do about saving the form page by page
- whether to force the users to fill the form in strictly in the order you thought of it, or to allow them to skip about according to when they have the answers ready
- and so on.
Now, after all that criticism: congratulations on tackling some forms research and publishing it. I’m always glad to see attention paid to this important topic.
best
Caroline Jarrett
http://www.formsthatwork.com
While I don’t necessarily agress (and I’ve done user studies, with eyeball lasers no less, of reg forms I have designed), probably the only thing I’d change is to expand recommendation #6 and move it to #1.
Fight for good data, good processing and non-silly business rules most of all, before you get to designing the UI of the form at all.
For example, instead of agonizing over the layout for first and last name, why not do like your very own comment fields do, and just put a name field? Maybe there’s a reason, but the DBA saying he needs to values is not a valid reason; someone can write software to parse this.
And while it’s talked about for phone, addresses are the same issue. It’s possible to check those for validity, but also to over-check them. One of my least favorite things is that I live on Russell Ave but the USPS thinks it’s Russell St. Some sites INSIST I have a known-to-the-USPS address, and even one character off is invalid. Why? If so, is typing the address even the way to go, or maybe I need to set it up as a search for an address instead?
Nice bit of research with some interesting results. Certainly plenty to take into consideration.
Great! Thanks for sharing…
Could be nice with bigger screenshots.
yeah, nice tips
Greatly useful article. All webdesigner must read it.
Thanks for sharing the research guys, and some pertinent comments above about the nature of the forms used in this research kind of dilutes how useful this may be for my purposes.
I’ll try to distill the information above so that it applies to my 4-field contact form on my own website. Incidentally, I have the field names *inside* the fields as the default text.
Pro – less space taken up
Con – user must delete default text to insert their own, and once it’s gone, user then doesn’t know what field is for what.
Any thoughts on that?
Thanks Darren. Glad you found this post useful.
The inline label disappears when the user enters some texts in the field. However, if the input text is deleted/removed, the inline label should appear again so that users know what the field refers to.
Take a look on http://www.me.com – a good example for this. In fact, they go even further where they use darker grey fonts for inline label which is currently not in focus.
Cool article.
Just a note about putting labels within fields, sometimes this is a problem if users start entering data, or click in them and then are distracted from completing. the label has now disappeared and no easy way to retrieve them.
Thanks Aaron.
I’ve responded to the same point made by Darren above regarding inline label. It shouldn’t be a problem. The label should appear again if there is no input data in the field (as in me.com)
Great job. useful tips. I design websites and for sure I will take into account what is written here.
Thanks Chui. Its great job. I want to translate this article into Russian. Do you mind?
Thanks Юзабилити. Feel free to translate the article into Russian. Please also link it to the original blog.
Thanks Chui – I’ll check the above re inline labels and see how the design works out on my website ;-)
Really interesting research, Chui, thanks for sharing.
One thing I have a small concern with is using one label for multiple fields (as in guideline 3). I have read in the past that, in the interests of accessibility, each field on a form should have its own appropriate label.
I’ve also read in the past that pre-populating text boxes as a substitute for labels isn’t very accessible either, particularly with regard to screen reader technology.
Have cxpartners experienced any accessibility problems with the approach suggested in guideline 3 that might contradict the points above? I appreciate that’s a different kind of user testing, but I’ve only read anecdotal reasoning with regards to the “a label for every input” and “don’t pre-populate text” arguments in the past (I can’t recall where I found these now, sorry).
I’ve used pre-population – and adjacent hint text – more lately and it’s proved successful, but the accessibility arguments are still a concern.
Very interesting article.
I disagree, however with the guideline #5 about required fields.
The fact that no one looked at the prompt that identifies the asterisk as indicating required fields does NOT mean that they don’t know what they mean.
Your point that people enter a form expecting to fill it out is a good one, and that they only consider whether a field is required if they do not want to provide this information. I have observed people in usability tests making this mental calculation. “I don’t like to give that information. Oh, I see that there is no asterisk.. I don’t have to.”
I also disagree with pre-populating fields with hints. Although it may seem to make the page tidier, it also makes it harder to scan a form to see what fields are filled or blank. And, as Pete mentions, it’s an accessibility problem, because the information is not contained in the LABEL. This means that someone using a screen reader will only find out whether the field is required if they actually enter the field.
One thing I often do, to address the “a label for every input” argument is to offscreen[1] sessential-but-cluttering labels which would otherwise break the visual design.
And a workaround for the “pre-population of text values” issue is to only populate text boxes via JavaScript after page load. I’m wooly on whether or not JavaScript is executed in the most modern screen readers though, so appreciate this may be no workaround at all.
[1] http://css-discuss.incutio.com/?page=ScreenreaderVisibility
@ Pete and Whitney, thanks for your comments.
Regarding the accessibility issue for prefill text box, it is possible to make it accessible. It is down to how you write your HTML code. Here is a simple example for a field which has no label (visually it doesn’t exist), and inside the text box, it has a pre-populated text: Enter your first name.
<label for="first name" style="display: none;">First Name</label>
<input type="text" name="first name’ id="first name" size = "35" maxlength="60" value="Enter your first name" />
For this, JAWS 8 will read (in Forms mode) something like this:
“Tab” (This is when user use Tab to move from previous field to this field)
“First Name” “Enter your first name” “edit, type in text”
Some quick explanation about the code:
Most inputs should have a ‘label’ element to tell the user what that specific control needs or what it’s used for. The value of the ’style’ attribute is set to ‘none’ so that it is invisible (which means there is no label for this field).
Note that, the value of the ‘for’ attribute on the label element is the same as the value of the ‘id’ attribute of the input. This labelling technique will work with screen readers no matter where the inputs and prompt are positioned.
@Whitney, regarding your comment about required fields (guideline #5), some participants in our user testings actually told us that they did not know what they mean.
Thanks for the example, Chui. That’s very much what I had in mind and typically use already. I think I’ll switch to using “value” as the element descriptor now though, instead of “title” as I have done in the past.
One detail, though: I was led to believe that elements with “display: none” are ignored by screen readers, and so best practice is to “hide” unwanted – but essential – screen elements using the “offscreening” trick I linked to earlier.
Very interesting research.
Reagarding the inline labels solution that me.com use (commented earlier here). You say that it should not be a problem. What do you prefer to use, and when should it be used? Do you think we will see more of inline labels in the future? Thinking of that they are not specially common these days around the web.
/Mike
Good news! Rosenfeld Media, the publisher of Luke Wroblewski’s ‘Web Form Design‘ has kindly offer a discount code to share with you all. Use the code CXPARTNERS to get 15% of all products of their Web storefront (http://rosenfeldmedia.com). Hope you enjoy the post and the discount!
Merci pour l’information, je la cherchais longtemps!
Our Number 1 Form SEO tip is to Make the form SEO friendly and also make sure it validates with W3C.
Your article has opened up an entire office discussion about web forms.
nice screenshots
hey nice article. Seems like you have spent good amount of time and some very good and keen observations.
It shall help the readers ofcourse.
Great Article! I’m going to bookmark it and come back to reference whenever I create a form.
Thank you! Good to know, especially when it comes to convincing clients.
I don’t really understand the findings of the vertical forms being completed better then horizontal though. How is it possible to compare these two, while “All the forms tested in this study had a vertical layout” ?
Very instructive ! Thanks for thoses guidlines and tips, I will try to apply it on new web forms.
Very nice article. helpful for knowing the things which are most liked by users. we will take care of it. thanks for sharing such important info and looking forward to see such information.
Very cool , I found it very interesting , thanks for the article
Thanks Chui – I find myself constantly referring back to this article.
I’m developing an(other) CSS site framework, and I’ve gotten to the form elements, for a company which heavily relies on forms for overall conversions. These findings are an asset to the online UCD industry!
Keep up the great work!
Very interesting since I have just read the book – can only recommend it
Absolutely a great article ;)
well done!