Sunday, 17 April 2011

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
  3. Any question you ask requires people to:
    • Parse it
    • Formulate a response
    • Input their answer
  4. Be vigilant about every question you ask
    • Can it be removed?
    • Can it be postponed?
    • Can it be inferred?
  5. Selection Dependent Inputs
    • 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
  7. Inline Validation
  8. 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
    • 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
  2. 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
  3. Input Types
  4. 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
  5. Pop-Up & Compound Menus
    • Use pop-up and compund controls to simplify data input
  6. Device Capabilities
    • Form Fields
    • Location
    • Gestures
    • Audio
    • Images

More Information
  • @lukewdesign

Web Form Design

No comments:

Post a Comment