Modern Web Form Design

This is my outline/notes on Modern Web Form Design by Luke Wroblewski at Mix10

Rich Interactin to enhance standard forms

1. Dynamic inline forms
• Inline multi-step (accordion) forms should not efect conversion rates
• People were fastest with the inline multi-step form
• People do not think of section headers as form actions/elements
• Inline multi-step forms do not inherently have more usability issues than single or multipage forms
2. Unnecessary Inputs
Any question you ask requires people to:
• Parse it
• Formulate a response
• Input their answer
3. Be vigilant about every question you ask
• Can it be removed?
• Can it be postponed?
• Can it be inferred?
4. Selection Dependent Inputs
BEST PRACTICE
• If lots of dependent inputs, use page-level
• Vertical & horizontal tabs perform well but have mutual exclusivity issues
• Long lists of initial inputs, few dependent inputs for each, use drop-down menu
• Short list of initial options & few dependents, exposed inline
• Maintain clear relationship between initial selection options
• Clearly associate additional inputs with their trigger
• Avoid "jumping" that disassociates initial selection options
5. Inline Validation
Versus a page submit/refresh model
• 22% increase in completions
• 31% increase in satisfaction ratings
• 42% decrease in completion times
• 22% decrease in errors made
• 47% decrease in number of eye fixations
BEST PRACTICES
• Use inline validation for inputs that have potentially high error rates
• Validate "open" inputs after people finish
• Keep validation messages persistent
• Use suggested inputs to disambiguate
• Avoiding "jumping" forms around

Forms on mobile devices

The rule of thumb is to limit the use of forms in the mobile context, Mobile Web Design & Development, O'Reilly 2009

1. Field zoom
Use top aligned fields instead of left aligned
• When data being collected is familiar
• Minimize time to completion
• Flexibility for localization and complex inputs
• Easier to code: no floats or tables
• Accessibility: label, field in order
• Better format for mobile screen
• Support help/error messaging column
• Require more vertical space
2. Input Types
Take advantage of HTML5 input types: Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn't even increase security, but i does cost you business due to login failures, Jakob Nielsen, 2009
3. Pop-Up & Compound Menus
• Use pop-up and compund controls to simplify data input
4. Device Capabilities
• Form Fields
• Location
• Gestures
• Audio
• Images

More Information

• @lukewdesign
• www.lukew.com/ff/

Web Form Design

• www.rosenfeldmedia.com/books/webforms/