creating (more) usable forms by rachel maxim [email protected]@gmail.com | 301-634-8928...
TRANSCRIPT
Creating (More) Usable Forms
By Rachel [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 6Sign 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=get: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/
• SitePointhttp://www.sitepoint.com/article/simple-tricks-usable-forms
• LukeW Designhttp://www.lukew.com/resources/articles/web_forms.html
• Jakob Nielsen (usability books & site)http://useit.mondosearch.com/cgi-bin/MsmFind.exe?QUERY=forms
• 37Signals – Defensive Design for the Web