Creating (More) Usable Forms
-
Upload
conan-keith -
Category
Documents
-
view
49 -
download
1
description
Transcript of Creating (More) Usable Forms
![Page 1: Creating (More) Usable Forms](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/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](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/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](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/html5/thumbnails/3.jpg)
Aspects of Form Design
• Contents
• Controls
• Layout, styling and design
• Validation
• Users
![Page 4: Creating (More) Usable Forms](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/html5/thumbnails/4.jpg)
Which would you rather use?
Are all your users named “asdf”….?
![Page 5: Creating (More) Usable Forms](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/html5/thumbnails/5.jpg)
Required fields are not always required.
![Page 6: Creating (More) Usable Forms](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/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](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/html5/thumbnails/7.jpg)
Don’t be a control freak.
![Page 8: Creating (More) Usable Forms](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/html5/thumbnails/8.jpg)
Mouse, Keyboard, Mouse
![Page 9: Creating (More) Usable Forms](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/html5/thumbnails/9.jpg)
Make it Hard to Make Mistakes
![Page 10: Creating (More) Usable Forms](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/html5/thumbnails/10.jpg)
Keep It Clean and Simple
![Page 11: Creating (More) Usable Forms](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/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](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/html5/thumbnails/12.jpg)
Client-side Validation
![Page 13: Creating (More) Usable Forms](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/html5/thumbnails/13.jpg)
Server-side Validation
![Page 14: Creating (More) Usable Forms](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/html5/thumbnails/14.jpg)
Be Flexible
![Page 15: Creating (More) Usable Forms](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/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](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/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](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/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](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/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](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/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](https://reader036.fdocuments.in/reader036/viewer/2022081506/568133ca550346895d9ac208/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