Web Form Design – Luke Wroblewski @ UX Book Club San Francisco

Where: UX Book Club San Francisco

Book: Web Form Design – Luke Wroblewski

Date: November 16, 2010

Book structure

(informal table of contents)

FORM STRUCTURE

The Design of Forms – Form Design matters, The impact of Form Design, Design considerations. Form Organization What to include, Have a conversation, Organizing content, Group Distinctions Path to Completion Name that Form, Start Pages, Clear scan lines, Minimal Distractions, Progress indicators, Tabbing

FORM ELEMENTS

Labels Label alignment, Top-aligned labels, Right-aligned labels, Left-aligned labels, Labels Within inputs, Mixed alignments Input Fields Types of input Fields, Field lengths, Required Fields, Input groups, Flexible inputs Actions Primary and secondary actions, Placement, Actions in Progress, Agree and submit Help Text When to help, Automatic inline help, User-activated inline help, User-activated section help, Secure transactions Errors and Success Errors, Success, No Dead ends

FORM INTERACTION

Inline Validation Confirmation, Suggestions, Limits Unnecessary Inputs Removing questions, Smart Defaults, Personalized Defaults, Additional Inputs Inline additions, Overlays, Progressive engagement Selection-Dependent Inputs Page-level selection, Horizontal tabs, Vertical tabs, Drop-Down list, Expose below radio buttons, Expose Within radio buttons, Exposed inactive, Exposed groups Gradual Engagement Signing Up, Getting engaged What’s Next? The Disappearing Form, The changing Form, Getting it built

Useful Links:

Data Monday: Input Matters on Mobile
http://www.lukew.com/ff/entry.asp?1188

BEST PRACTICES FOR FORM DESIGN
http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

Sign-up Form Must Die
http://www.lukew.com/presos/preso.asp?25

Text Input on Mobile is Hard But…
http://www.lukew.com/ff/entry.asp?1187

Input: Moving Beyond Forms
http://www.lukew.com/presos/preso.asp?22

Web Form Design in Action
http://www.lukew.com/presos/preso.asp?20

Don’t Put Hints Inside Text Boxes in Web Forms By Caroline Jarrett
http://www.uxmatters.com/mt/archives/2010/03/dont-put-hints-inside-text-boxes-in-web-forms.php

Label Alignment in Long Forms | Paper Prototyping for Engineers
http://www.uxmatters.com/mt/archives/2010/01/label-alignment-in-long-forms-paper-prototyping-for-engineers.php

Form vs. Function
http://www.digital-web.com/articles/form_vs_function/

Web Form Designs Examples:

http://www.smashingmagazine.com/2008/04/17/web-form-design-modern-solutions-and-creative-ideas/
Blog Comments Design:

http://www.smileycat.com/design_elements/blog_comment_forms/index.php?page=1

Solving the “Repeat Email Address” Form Issue . May Be. (By Russ Unger & Jonathan Knoll)
http://www.userglue.com/blog/2009/09/09/solving-the-repeat-email-address-form-issue-maybe/

Useful links related to the development of the book:
http://rosenfeldmedia.com/books/webforms/blog/

http://www.lukew.com/ff/archive.asp?tag&forms