1 / 20

Creating (More) Usable Forms

Creating (More) Usable Forms. By Rachel Maxim rmaxim@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

conan-keith
Download Presentation

Creating (More) Usable Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…

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

  3. Aspects of Form Design • Contents • Controls • Layout, styling and design • Validation • Users

  4. Which would you rather use? Are all your users named “asdf”….?

  5. Required fields are not always required.

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

  7. Don’t be a control freak.

  8. Mouse, Keyboard, Mouse

  9. Make it Hard to Make Mistakes

  10. Keep It Clean and Simple

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

  12. Client-side Validation

  13. Server-side Validation

  14. Be Flexible

  15. Where Am I? • Step 2 of 6 • Step 2 of 6Sign in > Shipping > Payment > Gift Wrap > Confirm > Receipt

  16. 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…” Be Thoughtful

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

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

  19. 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/

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

More Related