Creating More Usable Forms

1
Creating (More) Usable Forms

• By Rachel Maxim
• rmaxim_at_gmail.com 301-634-8928
• Blogging at...nowhere! Someday at
  Adrocknaphobia.com

2
Outline

• Form contents
• Only collect as much information as you need
• Only require fields that are essential
• Select the right form format (single/multi-page)
• Control types and usage
• Choose controls for ease of use, us caution with
  custom form controls
• Consider both keyboard and mouse entry
• Prevent errors in entry
• Avoid confusing or dangerous buttons
• Form layout, styling and design
• Keep it clean and simple
• Position of labels and fields for readability and
  usability
• Group related fields and separate sections
  visually
• Size and align form fields consistently and
  appropriately
• Denote required fields clearly
• Style primary and secondary action buttons for
  clarity

• Validation
• Give instant feedback with client-side validation
• Give clear and pointed feedback with server-side
  validation
• Give meaningful validation messages
• Dont make users reenter good data when
  validating
• User considerations
• Keep accessibility principles in mind
• Support international addresses where applicable
  (and that includes you!)
• Explain fields and formats clearly
• Be flexible
• Show the user where they are in the process
• Give shortcuts, dont make them enter twice
• Think about your audience
• Make confirmation pages informative
• Implementation
• CF
• CSS

3
Why is form design critical?

• Its how your users contact you
• Its 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
• Its how your database receives information
• If someone encounters problems with a form, they
  may abandon your site forever.

4
Aspects of Form Design

• Contents
• Controls
• Layout, styling and design
• Validation
• Users

5
Which would you rather use?
Are all your users named asdf.?
6
Required fields are not always required.
7
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 its long

8
Dont be a control freak.
9
Mouse, Keyboard, Mouse
10
Make it Hard to Make Mistakes
11
Keep It Clean and Simple
12
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.

13
Client-side Validation
14
Server-side Validation
15
Be Flexible
16
Where Am I?

• Step 2 of 6
• Step 2 of 6Sign in Shipping Payment Gift
  Wrap Confirm Receipt

17
Be Thoughtful

• Give shortcuts dont 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

18
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

19
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 dont have CF 7

20
JavaScript Resources

• Qforms http//pengoworks.com/index.cfm?actionget
  qforms
• DynamicDrive http//www.dynamicdrive.com/
• Yahoo! UI Libraryhttp//developer.yahoo.com/yui/
  
• Google Web Toolkithttp//code.google.com/webtool
  kit/

21
CSS/Design Articles

• AListApart http//www.alistapart.com/articles/sen
  sibleforms/
• SitePointhttp//www.sitepoint.com/article/simple-
  tricks-usable-forms
• LukeW Designhttp//www.lukew.com/resources/articl
  es/web_forms.html
• Jakob Nielsen (usability books
  site)http//useit.mondosearch.com/cgi-bin/MsmFind
  .exe?QUERYforms
• 37Signals Defensive Design for the Web