1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools...
-
Upload
miles-welch -
Category
Documents
-
view
215 -
download
0
Transcript of 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools...
![Page 1: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/1.jpg)
1
Forms: Usable forms
![Page 2: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/2.jpg)
2
• Every web site has forms, some have dozens of forms
• Forms are vital tools– Request materials– Ask questions– Register– Pay fines
![Page 3: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/3.jpg)
3
User’s Mindset
• Filling in forms is a necessary evil– Paying bills– Your tax return– Job applications– Your tax return– …
• Our job is make the experience as “pain free” as possible
![Page 4: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/4.jpg)
4
Is this your experience?
• Filled out a long form only to be told you entered something incorrectly but no clear feedback about “what”
• Then you hit back only to find that the details you had entered were not preserved, and you have to fill the whole */£$%^*£ thing over again
• Your information doesn’t fit – won’t accept your address or your order
![Page 5: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/5.jpg)
5
Designing usable forms
• Tune into what the users want to accomplish with the form
• Organize the information in a natural way – arrange the requests for like-information
together– all of the address information can be collected
at once and in a conventional order • street, city, state, and zip code.
![Page 6: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/6.jpg)
6
Primed for action
• When users follow a link to a form, they expect boxes and arrows
• NOT a wall of text
• A wall of text is – Intimidating– Boring– Painful Top Ten Web-Design Mistakes of 2002
http://www.useit.com/alertbox/20021223.html
![Page 7: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/7.jpg)
7
Forms that are walls of text:
• Simply bad design• Most users will hit back if
they can• Skip the text • Guess when answering the
questions, never referring to the text above
• A few may try to scroll up and down– losing their place– wasting valuable time
Deathby
mouse click
![Page 8: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/8.jpg)
8
Common complaints
• Too hard
• Too long
• Irrelevant
Information anxiety strikes – they worry …
![Page 9: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/9.jpg)
9
Will this form be a waste of time?
• Tell the user the purpose of the form
• Create a clear descriptive titleEGAsk a Librarian – You will receive a response to
your– question within 24 hours.
![Page 10: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/10.jpg)
10
How long will it take to complete?
• How many pages is it? • Tell them
– EG– Page 1 of 4– This survey will take 10 minutes to
complete
• For long forms, tell users if they can stop and resume, or if you must complete in one sitting
![Page 11: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/11.jpg)
11
How long?
• Keep forms short
• Focus them on one activity
![Page 12: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/12.jpg)
12
Let users know what will happen to the information they
submit in a formEG• The comments about this workshop will be
forwarded to the Training Coordinator
• Remember: Users guard their privacy– How many of you have been Bill Gates or Fred
Flintstone when completing a survey or registration?
![Page 13: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/13.jpg)
13
Improve accuracy
• Often you can improve the accuracy of forms simply by telling the user why you’re asking for the information– “We may need to contact you by email or
phone to find out more about your question.”
![Page 14: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/14.jpg)
14
Be conversational
• Try to start with “H” or “W” words– How many– Where
• EG: Ask a Librarian– What’s your question?– How will you use the information?– Where have you looked already?
![Page 15: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/15.jpg)
15
Error tolerant forms
• Make sure your questions are clear and unambiguous
• The selection options are appropriate
• Form validation– Check the data to see if matches– Numeric or character– Fixed length - 11 digit library bar code
![Page 16: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/16.jpg)
16
Will this form ask irrelevant questions?
Users hate compulsory questions, especially when they cannot see the relationship to the task at hand
eg
What does the office fax number have to do with ordering pizza?
![Page 17: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/17.jpg)
17
Questions don’t match your experience
• You’re forced to answer, in order to proceed
• Limit the use of required fields and the number of “closed” ended questions
• Allow user control and freedom. – Please select from the choices – Other: _____________
![Page 18: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/18.jpg)
18
Leverage “real world”
Think about
• Expectations about the sequence of information and grouping of information– EG
Library card application• Like many applications• Start with:
– Name, address …
![Page 19: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/19.jpg)
19
Let users be your guide
• Change your mindset• Rather than insisting that users must
complete all survey questions, the form validation process could send a polite message: – “You have not completed questions 3, 6 or 7.
Would you like to complete these questions, or simply submit the form as is?”
– Then let the users choose, and then accept their answer.
![Page 20: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/20.jpg)
20
Form controls
• Lots to choose from– Text boxes– Checkboxes– Radio buttons– Drop down lists– Multiple select drop down lists
![Page 21: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/21.jpg)
21
Text boxes
• Great for entering short tidbits of unique information such as a person’s name
• Faster to type the city than scroll through along list+ User has lots of freedom- Data errors
![Page 22: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/22.jpg)
22
Example: Phone numbers
• A balancing act between giving users freedom and ensuring data integrity
• Free form, or a series of preformatted text boxes
![Page 23: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/23.jpg)
23
Considerations
• International phone numbers– Free form is better
• Accessibility– screen readers will only see the label for the
first text box
• 3 boxes are slower
• 3 boxes give clarity about what data is wanted
![Page 24: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/24.jpg)
24
Decision time
• Err on the side of being inclusive
• Back end scripting can parse out miscellaneous punctuation and improve data integrity
![Page 25: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/25.jpg)
25
Text field pitfalls
• Size of the text box matters – It tells the user how many characters you
expect• For example, a postal code or zip code box should
be quite short; but a street address box should be considerably longer
– No label– So short the user can’t see (and prevent
errors) in their typing• Teeny, tiny search boxes
![Page 26: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/26.jpg)
26
Text areas
• Great for free form answers when the user is asked to provide a long answer
![Page 27: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/27.jpg)
27
Pitfalls
• Accidentally be set up so the text doesn’t wrap
• Size matters
• Enter key behavior– enter” key is set up to
automatically submit the form
![Page 28: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/28.jpg)
28
Check boxes
• Select one or more options from a list• Short lists with 5 to 7 options work best• Save time over a drop down list; see it right up
front
• Options help flush out/add meaning
![Page 29: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/29.jpg)
29
Pitfalls
• Dozens of checkboxes• Poor labeling
– users aren’t sure whether to “pick one” or “pick many”
• Failure to predict the options that users would like to see in the list and not providing an open-ended, “Other: ” option
![Page 30: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/30.jpg)
30
Best form practices - example
• Clear purpose• Sequence #1 and
grouping of trip elements
• Labels• Free form
destination– Back end testing,
pick from list if you fail
• Dates – Offers a choice
![Page 31: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/31.jpg)
31
Radio buttons
• Best used when there is one choice, and only one, that must be chosen
![Page 32: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/32.jpg)
32
Pitfalls
• Poor alignment – the buttons are not clearly adjacent to a
particular label
• Unclear or ambiguous labels
• The “lone ranger” syndrome – offering just one radio button
![Page 33: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/33.jpg)
33
Feeling cornered
• Users can’t deselect all radio buttons once one has been selected. They feel cornered.
• Give users an out like “none of these.”
![Page 34: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/34.jpg)
34
Drop down boxes
• Excellent for picking one item from several, such as names of cities, branches of a library, etc.
• If possible, supply a default
![Page 35: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/35.jpg)
35
Pitfalls
• Overuse; everything on the form is a drop down box
• Items in the drop down list are not in a logical order to the users
• The label is part of the drop down list rather than being adjacent to it
![Page 36: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/36.jpg)
36
List box
• Few items to hundreds from which to choose• Select single or multiple choices• Show a reasonable number of options in the
display area to facilitate scrolling through the list
![Page 37: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/37.jpg)
37
Pitfalls
• Failure to give directions on how to select more than one
• Error prone and often difficult for users to learn how to select multiple
• The order of the items isn’t logical to users
• Several choices start with the same word(s); scanning is slowed down
![Page 38: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/38.jpg)
38
Submit button
• Position it close to the last field
• Make it look like a button
• If it’s a graphic submit button, make sure there is a text equivalent for screen readers and non-graphical browsers
![Page 39: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/39.jpg)
39
Pitfalls
• Putting the submit button in a non-standard location
• Making the submit button look like a hyperlink rather than the standard button
![Page 40: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/40.jpg)
40
Information design
• Use color, white space, headings and labels to make the form clear to users
• Don’t overuse lines, colors and borders and create “chart junk” and clutter
![Page 41: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/41.jpg)
41
Help: just in time, in-line works bestNeiman-Marcus• Provides a
description of the search tool with callouts and descriptions directly below the search area
Divide and Conquer: Providing Web-based User Assistance at the Point of Use. Scott DeLoach www.winwriters.com/articles/embedded/
![Page 42: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/42.jpg)
42
Example: Expedia
• Clear section heading
• Use of # and color to group
• Logical order• Fields labels• Fill in destination
– Back end matching
• Date– 2 choices
![Page 43: 1 Forms: Usable forms. 2 Every web site has forms, some have dozens of forms Forms are vital tools –Request materials –Ask questions –Register –Pay fines.](https://reader030.fdocuments.us/reader030/viewer/2022032802/56649de75503460f94ae01fe/html5/thumbnails/43.jpg)
43
Forms
• With some conscious effort, we can make web forms much better
• Keep in the mind, as developers we must:– Ben Schneidermann
• "Design test design test design test."
– Edward Tufte• "Design think design think design think."