1. Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@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 –Don’t 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, don’t make them enter twice –Think about your audience –Make confirmation pages informative Implementation –CF –CSS

3. 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.

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 it’s long

8. Don’t 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 6 Sign in > Shipping > Payment > Gift Wrap > Confirm > Receipt

17. 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…”

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 don’t have CF 7

20. JavaScript Resources Qforms: http://pengoworks.com/index.cfm?action=g et:qforms http://pengoworks.com/index.cfm?action=g et:qforms DynamicDrive: http://www.dynamicdrive.com/ http://www.dynamicdrive.com/ Yahoo! UI Library: http://developer.yahoo.com/yui/ http://developer.yahoo.com/yui/ Google Web Toolkit: http://code.google.com/webtoolkit/ http://code.google.com/webtoolkit/

21. CSS/Design Articles AListApart http://www.alistapart.com/articles/sensibleforms/ http://www.alistapart.com/articles/sensibleforms/ SitePoint http://www.sitepoint.com/article/simple-tricks-usable- forms http://www.sitepoint.com/article/simple-tricks-usable- forms LukeW Design http://www.lukew.com/resources/articles/web_forms.html http://www.lukew.com/resources/articles/web_forms.html Jakob Nielsen (usability books & site) http://useit.mondosearch.com/cgi- bin/MsmFind.exe?QUERY=forms http://useit.mondosearch.com/cgi- bin/MsmFind.exe?QUERY=forms 37Signals – Defensive Design for the Web