Creating (More) Usable Forms By Rachel Maxim [email protected]@gmail.com | 301-634-8928...
-
Upload
winifred-shepherd -
Category
Documents
-
view
216 -
download
0
Transcript of Creating (More) Usable Forms By Rachel Maxim [email protected]@gmail.com | 301-634-8928...
![Page 1: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/1.jpg)
Creating (More) Usable Forms
By Rachel [email protected] | 301-634-8928
Blogging at...nowhere! Someday at Adrocknaphobia.com…
![Page 2: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/2.jpg)
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.
![Page 3: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/3.jpg)
Aspects of Form Design
• Contents
• Controls
• Layout, styling and design
• Validation
• Users
![Page 4: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/4.jpg)
Which would you rather use?
Are all your users named “asdf”….?
![Page 5: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/5.jpg)
Required fields are not always required.
![Page 6: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/6.jpg)
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
![Page 7: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/7.jpg)
Don’t be a control freak.
![Page 8: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/8.jpg)
Mouse, Keyboard, Mouse
![Page 9: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/9.jpg)
Make it Hard to Make Mistakes
![Page 10: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/10.jpg)
Keep It Clean and Simple
![Page 11: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/11.jpg)
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.
![Page 12: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/12.jpg)
Client-side Validation
![Page 13: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/13.jpg)
Server-side Validation
![Page 14: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/14.jpg)
Be Flexible
![Page 15: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/15.jpg)
Where Am I?
• Step 2 of 6
• Step 2 of 6Sign in > Shipping > Payment > Gift Wrap > Confirm > Receipt
![Page 16: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/16.jpg)
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…”
![Page 17: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/17.jpg)
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
![Page 18: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/18.jpg)
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
![Page 19: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/19.jpg)
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/
![Page 20: Creating (More) Usable Forms By Rachel Maxim rmaxim@gmail.comrmaxim@gmail.com | 301-634-8928 Blogging at...nowhere! Someday at Adrocknaphobia.com…](https://reader030.fdocuments.in/reader030/viewer/2022032607/56649ebf5503460f94bca8b9/html5/thumbnails/20.jpg)
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