Creating (More) Usable Forms

Creating (More) Usable Forms

By Rachel Maximrmaxim@gmail.com | 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