Why Web Forms Stink and What You Can Do About It

1. Why Web Forms Stink and What You Can Do About It Darlene Fichter http://library.usask.ca/~fichter/ Data Library Coordinator, U of S Library

2. Overview • What is usability? • Why test? • Usability techniques

3. Web forms • Forms and Information Anxiety • Form Controls • Best practices • Pitfalls • Resources

4. Forms • Every web site has forms, some have dozens of forms • Forms are vital tools • Request materials • Ask questions • Register • Pay fines

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

6. Remember when • Filled out along 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

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

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

9. Wall 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 Death by mouse click

10. Common complaints • Too hard • Too long • Irrelevant Information anxiety strikes – they worry …

11. Will this form be a waste of time? • Tell the user the purpose of the form • Create a clear descriptive title • Ask a Librarian • You will receive a response to your question within 24 hours.

12. How long will it take to complete? • How many pages is it? • Tell them • Page 1 of 4 • This survey will take 10 minutes to complete • For long forms, tell them if they can stop and resume, or if you must complete in one sitting

13. How long? • Keep forms short • Focus them on one activity

14. What will happen to the information I enter? • The comments about this workshop will be forwarded to the Training Coordinator • Users guard their privacy • How many times did Bill Gates or Fred Flintstone complete your survey?

15. 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.”

16. Be conversational • Try to start with “H” or “W” words • How many • Where • Ask a Librarian • What’s your question? • How will you use the information? • Where have you looked already?

17. Why we’re asking Just the question?

20. What if I make a mistake? • 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

21. Will this form ask irrelevant questions? • What does the office fax number have to do with ordering pizza? • Users hate compulsory questions, especially when they cannot see the relationship to the task at hand

22. 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: _____________

23. Leverage “real world” • Expectations about the sequence of information and grouping of information • Library card application • Like many applications • Start with: • Name, address …

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

25. Form controls • Lots to choose from • Text boxes • Checkboxes • Radio buttons • Drop down lists • Multiple select drop down lists

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

27. Example: Phone numbers • A balancing act between giving users freedom and ensuring data integrity • Free form, or a series of preformatted text boxes

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

29. Decision time • Err on the side of being inclusive • Back end scripting can parse out miscellaneous punctuation and improve data integrity

30. 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) n their typing • Teeny, tiny search boxes

31. Text areas • Great for free form answers when the user is asked to provide a long answer

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

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

34. Options help flush out/add meaning

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

36. Review using Expedia

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

38. Radio buttons • Best used when there is one choice, and only one, that must be chosen

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

40. 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.”

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

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

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

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

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

46. Pitfalls • Putting the submit button in a non-standard location • Making the submit button look like a hyperlink rather than the standard button

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

48. Help: just in time, in-line works best • Neiman-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/

49. Example: Expedia • Clear section heading • Use of # and color to group • Logical order • Fields labels • Fill in destination • Back end matching • Date • 2 choices

50. Examples: What could be better? • Interlibrary loan form • Room booking