User Assistance in Web Forms

Luke Wroblewski spoke on this topic on the second day of the WritersUA 2009 Conference in Seattle. Luke is always an entertaining speaker, with examples that lead to some great ‘ah ha!’ moments. Here are my notes from his session:

• (Most) Forms suck.
• The primary goal for every form is completion. Show progress towards completion in long forms.
• Eye tracking studies show that left-aligned forms are simplest to scan, and have a clear visual path to completion — straight down the page, not zig-zagging from side to side.
• Top-aligned labels are faster to complete as users process the label and the accompanying field in one pass. Ideal where data being collected is familiar (e.g. name, address).
• Use left-aligned labels were data is unfamiliar as this slows down the user, allowing them time to think.
• Use right-aligned labels where vertical screen space is a constraint; otherwise, don’t use at all.
• Labels within input fields: Disappear as user starts to enter data; make sure the UA goes away if user doesn’t input anything; clearly distinguish UA from data (e.g. —your selection—)
• Required fields: If all are required, don’t use an indicator for each (confusing); if most are required, only use an indicator (e.g. ‘(optional)’) for those that aren’t required; if some are required, use an indicator such as an asterisk; associate indicators with labels, NOT input fields.
• Only use Help and Tips in these situations: when asking for unfamiliar data; if users might want to know why data is being requested; where there are recommended data input formats. Do not overuse as they can be overwhelming.
• Validation: Provide direct feedback as data is entered. A study Luke was involved in showed that a form is 87% more effective with inline validation. Inline validation is especially useful for fields with potentially high error rates.
• Commands: Not all form actions are equal. Reset, Cancel, Go Back rarely need to be used, so can be omitted or relegated to lesser importance using faded color, smaller size, etc. Primary actions directly responsible for form submission include Submit, Continue, Next, Save etc. Make these larger or a brighter color to emphasize their importance, and align such that they are part of the clear path to completion.
• Actions in progress: Provide feedback where an action may take some time to process (e.g. form submission, data calculation, uploads); disable ‘Submit’ button while action is occurring to avoid duplicate submissions; consider streamlining legal requirements (e.g. instead of a check box to confirm that the user has read the terms and conditions, make it a statement and associate it with the submission button — “By clicking Register, I agree that I have read the Terms and Conditions” or similar.
• Errors: Clearly indicate an error has occurred by placing the error in a conspicuous place with a conspicuous color (this ‘doubles’ the visual language for an error); provide information on how to correct the error.

My other conference links:

• WritersUA 2009: Day 1 (https://cybertext.wordpress.com/2009/03/31/writersua-2009-day-1/)
• Interview with Scott McCloud (https://cybertext.wordpress.com/2009/04/07/interview-with-scott-mccloud/)
• Interview with Mary Jo Foley (https://cybertext.wordpress.com/2009/04/01/interview-with-mary-jo-foley/)
• WritersUA 2009: Day 2 (https://cybertext.wordpress.com/2009/04/01/writersua-2009-day-2/)
• WritersUA 2009: Day 3 (https://cybertext.wordpress.com/2009/04/02/writersua-2009-day-3/)
• I just spotted a one-legged woman… (https://cybertext.wordpress.com/2009/04/03/i-just-spotted-a-one-legged-woman/)

[Links last checked April 2009]