I finished reading Web Form Design recently on the recommendation of a mentor. The author makes a good case about web forms being a high leverage area to invest design efforts. The combination of forms being mandatory, complex, and not particularly sexy, results in an experience that is often the worst part of a user’s interaction with your product. He then breaks down the form into the building blocks of Labels, Input Fields, and Actions, then lays out best practices for each. Here are a few snippets from the book that resonated with me.
Labels
Top-aligned labels – “The results of live site testing across several different geographies have also supported top-aligned labels as the quickest way to get people through forms. These studies also had higher completion rates (over 10 percent higher) than the left-aligned versions of forms they were tested against… One of the reasons top-aligned forms are completed quickly may be because they only require a single eye fixation to take in both input label and input field. [50ms compared to 240ms for right-aligned and 500ms for left-aligned labels] … Top-aligned labels, however, do take up additional vertical real estate.”
Right-aligned labels – “The resulting left rag of the labels in a right-aligned layout reduces the effectiveness of a quick scan to see what information the form requires … That said, in cases where you want to minimize the amount of vertical screen space your form uses, right-aligned labels can provide fast completion times.”
Left-aligned labels – “Left-aligning input field labels makes scanning the information required by a form easier. People can simply inspect the left column of labels up and down without being interrupted by input fields… Unfortunately, a few long labels often extend the distance between labels and inputs and, as a result, completion times may suffer. People have to “jump” from column to column in order to find the right association of input field and input label before entering data. The reason left-aligned forms are the slowest of the three options to complete may be because of the number of eye fixations they require to parse.”
Inside-alignd labels – “In cases where screen real estate is at a premium, combining labels and input fields into a single user interface element may be appropriate… Because labels within fields need to go away when people are entering their answer into an input field, the context for the answer is gone. As such, labels within inputs aren’t a good solution for long forms… It’s also generally a good rule not to use labels within inputs for non-obvious questions. That is, questions that may require people to reference the label while answering.
Input Fields
Tabbing behaviour –“Web form designers should consider what the experience will be like for the large numbers of people who move between input fields using the Tab key, and they should design accordingly.”
Radio buttons – “Allow people to select exactly one choice from two or more always visible and mutually exclusive options. Because radio buttons are mutually exclusive, they should have a default value selected (more on this later). It’s also a good idea to make sure both the radio button and its label can be selected to activate a radio button selection.”
Input switching – “[Sequential] basic text boxes … lead users to skip back and forth between their mouse and keyboard … in order to complete the interaction.”
Length of input fields – “The way we display input fields can produce valuable clues on how they should be filled in… In the eBay Express example … the size of the zip code input matches the size of an actual zip code in the United States: 5 digits. The size of the phone number text boxes match the number of digits in a standard phone number in the United States. The rest of the text boxes are a consistent length that provides enough room for a complete answer.”
Required/optional fields – “If most of the inputs on a form are optional, indicate the few that are required. … When indicating what form fields are either required or optional, text is the most clear. However, the * symbol is relatively well understood to mean required.”
Actions
Secondary actions – “When you reduce the visual prominence of secondary actions, it minimizes the risk for potential errors and further directs people toward a successful outcome.”
Success vs. Error messages – “The key difference between error and success messages, however, is that error messages cannot be ignored or dismissed—they must be addressed. Success messages, on the other hand, should never block people’s progress—they should encourage more of it.
Animating success messages – “Because human beings are instinctively drawn to motion—we had to avoid sabertoothed tigers somehow—animated messages that transition off a page can let people know their actions have been successful. The most common transitions utilized for this are fades, dissolves, or roll-ups.”
Effective in-line validation – “Inline confirmation works best for questions with potentially high error rates or specific formatting requirements… When validating people’s answers inline, do so after they have finished providing an answer, not during the process.”
comments powered by Disqus