Form design

Discussion articles

  • 5 ways to make sure that users abandon your forms
    "Here are my top 5 ways to make sure that customers don't complete your forms. Use these in good health and be sure to overstaff your call center. You're going to need the extra help."
    (Eric Myers)

  • Accessible CSS forms
    "Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade."
    (Andy King)

  • Accessible forms
    "This document is concerned with what the user of a website form "sees" and interacts with. It outlines how you can create forms for the web that are more accessible and describes the appropriate use of label, fieldset and tabindex elements."
    (Roger Hudson)

  • Better web forms
    Making a good web-based form is tricky, and not often done well. There are things that can be done to make web forms more easy to use, as well as being more useful on the back end. Most of these things involve making the form as simple as possible.

  • Build accessible online forms
    Ask anyone who has had to fix a website that's littered with accessibility howlers, and top-most in their list of problems encountered will be forms, closely followed by tables. These two topics always seem to present the most difficulties, but they needn't be a problem. For the most part, forms are a problem because the extra accessibility tags are simply not known to the web designer -- after all, it looks right, it seems to work... what's the problem? Only by switching off the monitor and using a screen-reader can our oblivious web developer understand the issues.

  • Colons at the end of labels?
    "You are writing captions or labels for fields in forms, for example “Name” or “Date of birth”. Should they be finished with a colon, or not?"
    (Caroline Jarrett)

  • Creating bulletproof and easy to complete web forms
    This is a sample chapter from Defensive Design covering guidelines for creating web forms.

  • Designing intersection flows
    "When forms give users the option to continue in two or more alternative directions, such as registering as a new customer or signing in as a returning one, unfortunate users will take the wrong turn if it isn't unmistakably obvious which way they should go. In this article, we'll take a look at a few intersection flows that have caused users problems."
    (Henrik Olsen)

  • Designing usable forms: the three-layer model of the form (PDF)
    If you want to create a usable form, the first step is to understand what a form is. The 'three-layer model' considers forms from three points of view: perceptual (layout), conversational (questions and answers) and relationship (the
    structure of the task).

  • Developing an online form
    Creating an online form can present developers with many challenges. This case study reviews how a paper-based form was taken through the usability engineering process to develop a functional online version. We discuss the steps in planning and research, prototype development, test design, and the usability test results.

  • Evaluating the usability of search forms using eyetracking: a practical approach
    "In this article, I’ll present findings from eyetracking tests we did to evaluate the best solutions for label placement in Web forms."
    (Matteo Penzo - UXmatters)

  • Forms: the importance of getting it right
    Published research and statistics state that a form's completion time and error rate can be greatly reduced by good design. This results in enhancing a customer’s experience of an organisation's brand, encouraging retention and building on reputation.

  • Forms vs. applications
    "Once an online form goes beyond two screenfuls, it's often a sign that the underlying functionality is better supported by an application, which offers a more interactive user experience."
    (Jakob Nielsen)

  • Four ideas for better forms
    "Do you have an uneasy feeling that your forms aren't working as well as they should? Or are you simply looking for ways of making them even better? Here are four ideas for better forms."
    (Caroline Jarrett)

  • How to indicate required or optional form fields
    "There are generally two ways of showing required and optional fields: 1. Grouping required and optional fields in different groups (fieldsets) and 2. Indicating next to each field or label if this field is required or not."
    (Thomas Watson Steen)

  • Label placement in forms
    "In using eyetracking to evaluate the usability of search forms for my previous article for UXmatters, 'Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach', we discovered much interesting data. I'll provide an in-depth analysis of that data here."
    (Matteo Penzo - UXmatters)

  • Moving forms to the web (PDF)
    A presentation by Ginny Redish advising on how to move paper forms to the web and outlining 17 guidelines for consideration when designing web forms.

  • Prettier accessible forms
    "It can be time consuming to make web forms both pretty and accessible."
    (Nick Rigby - A List Apart)

  • Registration forms - what to do if you can't avoid them
    "The sad thing about registration forms is that users hate them. Stick a form in front of them and they leave your site, they lie, or if they are really web-savvy they use a privacy protection service. But organisations love them. 'We'll justify/protect/market/leverage this content by asking people to register for it.' So the first line of argument is: try to avoid asking users to register at all. But I know that this is an unrealistic position. So how can we limit the damage and make the registration process as easy as possible?"
    (Caroline Jarrett)

  • Sensible forms: a form usability checklist
    "Sometimes it’s the little things that drive you nuts. As many of us have probably noticed during this season of holiday shopping, usability problems in online forms can be infuriating. Brian Crescimanno helps solve the problem with a checklist of form-usability recommendations."
    (Brian Crescimanno - A List Apart)

  • Sentence or title case for labels?
    "One crucial issue in legibility (possibly the most crucial) is the question of familiarity. The most familiar presentation of sentences is in sentence case. Most reading is reading of sentences. Therefore, sentence case is easiest to read."
    (Caroline Jarrett)

  • Should I use a drop-down? Four steps for choosing form elements on the web (PDF)
    You are designing a form for the web and you want to make it easy for your form user to choose answers to your questions. There are five HTML form elements available: drop-down box, radio buttons, check boxes, type-in box and hyperlinks. Which one is the most usable?

  • Simple tricks for more usable forms
    Web developers loathe the task of building forms almost as much as users loathe having to fill them in. These are both unfortunate facts of the Web, but some smart JavaScript and intelligent CSS can go a long way to remedying the situation. In this article, I'll introduce a number of simple tricks for improving the usability of forms, and hopefully inspire you to improve on them and create your own.

  • The piece of HTML created just for me: reset
    Reset buttons are everywhere, but who are they for? Caroline Jarrett, a consultant whose specialty is usability of forms, says she loves reset buttons, but she doubts that they cause anything but confusion or bother for most users.

  • The power of defaults
    "Search engine users click the results listings' top entry much more often than can be explained by relevancy ratings. Once again, people tend to stick to the defaults."
    (Jakob Nielsen)

  • Two-column forms are best avoided
    "It's perfectly OK to use a two-column layout... if you don't mind that users will frequently fail to notice the second column altogether with consequential confusion and annoyance."
    (Caroline Jarret - Usability News)

  • Usable forms
    Are you designing forms for your users or for your database? There is a growing interest in providing services to an international market. Whether you are a North American company wanting to sell overseas, or within Australia or Europe and wanting to service a massive US market, you absolutely have to consider the differences in information likely to be provided by your users.

  • Understanding the Costs of Data Capture - paper, automatic and with the Internet (PDF)
    Organisations have sometimes been surprised and disappointed when they re-engineer a forms-based data capture process but fail to achieve their anticipated savings.

  • Usability and HTML forms
    Visitors don't enjoy filling out HTML forms. That makes good usability doubly important. Here's a detailed look at forms for e-commerce--individual form elements such as dropdown boxes and radio buttons, plus validation and error messages.

  • Usable and accessible form validation and error recovery
    "Form validation is the process of testing to ensure that end users enter necessary and properly formatted information into web forms. Error recovery is the process of guiding the user through fixing missing or improper information as detected by form validation. The Web Content Accessibility Guidelines 1.0 state that you should, "ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported." Older browsers and new portable technologies may not support scripting; and there are many reasons why users may have scripting disabled. As such, developers should not require client-side scripting in order for the web form to be accurately completed and submitted. However, web developers can utilize the benefits of both server-side and client-side validation and error recovery to ensure that their forms are completed in a usable and accessible manner."
    (WebAIM)

  • Web application form design
    "Quite rare is the Web application that doesn’t make extensive use of forms for data input and configuration. But not all Web applications use forms consistently. Variations in the alignment of input fields, their respective labels, calls to action, and their surrounding visual elements can support or impair different aspects of user behavior."
    (Luke Wroblewski)

  • When what they see is what you get – but satisficing isn't enough
    "This study (and others in the works) clearly demonstrates that presentation design not only can, but does influence respondents' choice behavior. The choice of response format in web surveys can influence the response distribution."
    (Kath Straub)