Conference Review: UIE Web App Summit 2007: Part II

Day 2: Best Practices for Form Design: Bridging the Gap with Your Customers

Presenter: Luke Wroblewski

Luke Wroblewski (Figure 26) presented two back-to-back sessions on Day 2 of the conference: “Best Practices for Form Design: Bridging the Gap with Your Customers” and “Web Application Page Hierarchy.” I’ve heard Luke speak on many occasions, but this time he really kicked it into high gear. He delivered two great talks, and I hadn’t seen him present the majority of this material before. During his talk on forms, Luke showed numerous examples of Web forms, illustrating the various principles and guidelines he presented throughout his talk.

Luke told us, “Forms are … part of the conversation between companies and online customers.” As shown in Figure 27, they play an important role in e-commerce, access to information and services, and data input. Figure 28 shows some of Luke’s basic design principles for forms. He said, “We want to make things as easy as possible.”

The slides in Figures 29–31 cover the pros and cons of different alignments for labels in forms. “Top-aligned labels” that are left-aligned above input fields offer the best performance, followed by right-aligned labels. Left-aligned labels result in the poorest performance. Luke recommended using

• top-aligned labels—for forms comprising familiar data, because of their “reduced completion times”
• right-aligned labels—when vertical screen real estate is constrained
• left-aligned labels—for forms comprising unfamiliar, extended, or complex data

Luke showed some of the eyetracking data from Matteo Penzo’s article “Label Placement in Forms.”

Luke made the following recommendations in regard to indicating whether fields are required or optional:

• “If most fields are required, indicate optional fields.”
• “If most fields are optional, indicate required fields.”
• Preferably, use instructional text to indicate required or optional fields, but asterisks also work for required fields.
• “Associate indicators with labels.”

Figure 34 shows Luke’s recommendations for field lengths. He told us, “Content relationships provide a structured way to organize a form.”

Luke described how visual noise from excessive use of content groupings, dividing lines, or boxes impairs “the way people scan through a form.” However, he also said, “Dividing a page into sections becomes more and more important the longer a form is. Use relevant content groupings to organize forms.”

“What to put in what order?” Luke asked. “Put in stuff they can fill out easily first, so they’re invested in the form by the time they have to fill out stuff they have to look up like credit card numbers. Differentiate the primary action in a form from secondary actions. The visual presentation of actions should match their importance. Avoid secondary actions if possible.” Luke also provided some guidelines for user assistance within forms, as shown in Figure 35. He said, “Excessive Help and tip text can really overwhelm a form … [and] obscures what you’re trying to do.”

Luke provided the following guidelines for designing user interactions with forms:

• “Provide a clear path to completion. … Every input requires consideration and action, so remove all unnecessary data requests and enable flexible data entry and smart defaults. Too many choices can paralyze people.” If a form is long, being able to save it and showing progress in the overall form is helpful.
• Support tabbing. “Many users interact with a form by tabbing between fields. Multi-column form layouts may conflict with expected tabbing behavior.”
• Use progressive disclosure to give people additional options when they’re appropriate. “Map progressive disclosure to prioritized user needs.” Progressive disclosure is “most effective when its user initiated. Maintain a consistent approach. People build up an expectation of where things will appear in a given form.” With gradual engagement, a registration form is not the first thing a user sees.
• Expose dependencies—selection-dependent inputs—among form fields.

He also discussed providing the following forms of feedback:

• inline validation as a user enters data
• user assistance to suggest valid input
• data validation “to ensure all required data is provided and valid”
• error messages
• progress indicators
• confirmation of successful completion

About error handling, Luke said, “Clearly communicate an error has occurred. When errors occur, the key thing is to give people a way to correct it. Provide clear resolution in as few steps as possible.” Luke provided this final tip: “Let users know if difficult to obtain information is required prior to sending them to a form.”

Day 2: Web Application Page Hierarchy

Presenter: Luke Wroblewski

In his second talk, “Web Application Page Hierarchy,” Luke spoke about using hierarchy to

• illuminate actions and guide users
• organize information
• communicate brand messages

He said, “Use the power of visual organization to guide users.” First, Luke analyzed what makes a great presentation, as shown in Figure 36. Then, he covered some basic principles of visual communication. I’d seen him present some of that material before. Throughout this presentation, Luke’s approach was similar to that Hagan Rivers used in her tutorial. He showed many Web pages to illustrate various points.

Luke described the principles of visual hierarchy shown in Figure 37. Visual hierarchy communicates the relative importance of different elements on a page. “Page hierarchy should reflect business priorities,” said Luke. He provided a 4-step process for building an effective hierarchy, as shown in Figure 38.

Luke analyzed the visual hierarchy of many example Web pages. 

Photographs by Ron Yoder, for User Interface Engineering, and Pabini Gabriel-Petit.

Read more

• Part I
• Part III