Transcript Document

Creating (More) Usable Forms
By Rachel Maxim
[email protected] | 301-634-8928
Blogging at...nowhere! Someday at Adrocknaphobia.com…
Why is form design critical?
• It’s how your users contact you
• It’s how your customers pay you money
• A data entry clerk somewhere may spend their
entire day using that form
• Getting your users to use the form is preferable
to them “stopping by” your office
• It’s how your database receives information
• If someone encounters problems with a form,
they may abandon your site forever.
Aspects of Form Design
•
•
•
•
•
Contents
Controls
Layout, styling and design
Validation
Users
Which would you rather use?
Are all your users named “asdf”….?
Required fields are
not always required.
Single Page vs Multi Page Forms
• If you have more than 1-2 full screens, you
may want to split it into logical steps
• If so, group related form fields into pages
• Let the user know which step they are at
and how many there are
• Allow them to go back and forth without
error or loss of data
• Allow them to save progress if it’s long
Don’t be a control freak.
Mouse, Keyboard, Mouse
Make it Hard to Make Mistakes
Keep It Clean and
Simple
Meaningful Validation
• BAD: Please complete all required fields
(marked with red *)
• BAD: An error has occurred in your form,
some information is incomplete or invalid.
• BETTER:
Please provide your email address.
/
The email address you entered is not
valid. Please try again.
Client-side Validation
Server-side Validation
Be Flexible
Where Am I?
• Step 2 of 6
• Step 2 of 6
Sign in > Shipping > Payment > Gift Wrap
> Confirm > Receipt
Be Thoughtful
• Give shortcuts – don’t
make them enter info
twice
• Consider the age/
demographics, level of
computer/internet
knowledge, and
disabilities or impairments
of your audience (imagine
your grandmother filling
out this form…)
• Make confirmation pages
informative
• Not just “Thank you.”
• “you can expect a
response in xx days”
• “for further information,
see our FAQ”
• “your information has
been sent to xyz, you
may also call our 800
number…”
A Word About Flash Forms
• Detect the plugin and version
• Have an HTML alternative
• Use standard controls such as the Flash
UI components
• Use “special” controls judiciously
• In Flash, turn Accessibility on
CF Resources
• CFFORMs - Livedocs
• IsValid(type, value)
isValid("range", value, min, max)
isValid("regex" or "regular_expression",
value, pattern)
• CFLib.org – string manipulation functions
and regex examples that work if you don’t
have CF 7
JavaScript Resources
• Qforms:
http://pengoworks.com/index.cfm?action=g
et:qforms
• DynamicDrive:
http://www.dynamicdrive.com/
• Yahoo! UI Library:
http://developer.yahoo.com/yui/
• Google Web Toolkit:
http://code.google.com/webtoolkit/
CSS/Design Articles
• AListApart
http://www.alistapart.com/articles/sensibleforms/
• SitePoint
http://www.sitepoint.com/article/simple-tricks-usableforms
• LukeW Design
http://www.lukew.com/resources/articles/web_forms.html
• Jakob Nielsen (usability books & site)
http://useit.mondosearch.com/cgibin/MsmFind.exe?QUERY=forms
• 37Signals – Defensive Design for the Web