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.

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

Post on 21-Dec-2015




1 download

Embed Size (px)


<ul><li> Slide 1 </li> <li> 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 </li> <li> Slide 2 </li> <li> Overview What is usability? Why test? Usability techniques </li> <li> Slide 3 </li> <li> Web forms Forms and Information Anxiety Form Controls Best practices Pitfalls Resources </li> <li> Slide 4 </li> <li> Forms Every web site has forms, some have dozens of forms Forms are vital tools Request materials Ask questions Register Pay fines </li> <li> Slide 5 </li> <li> Users 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 </li> <li> Slide 6 </li> <li> 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 doesnt fit wont accept your address or your order </li> <li> Slide 7 </li> <li> 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. </li> <li> Slide 8 </li> <li> 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 </li> <li> Slide 9 </li> <li> 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 </li> <li> Slide 10 </li> <li> Common complaints Too hard Too long Irrelevant Information anxiety strikes they worry </li> <li> Slide 11 </li> <li> 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. </li> <li> Slide 12 </li> <li> 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 </li> <li> Slide 13 </li> <li> How long? Keep forms short Focus them on one activity </li> <li> Slide 14 </li> <li> 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? </li> <li> Slide 15 </li> <li> Improve accuracy Often you can improve the accuracy of forms simply by telling the user why youre asking for the information We may need to contact you by email or phone to find out more about your question. </li> <li> Slide 16 </li> <li> Be conversational Try to start with H or W words How many Where Ask a Librarian Whats your question? How will you use the information? Where have you looked already? </li> <li> Slide 17 </li> <li> Why were asking Just the question? </li> <li> Slide 18 </li> <li> Slide 19 </li> <li> Slide 20 </li> <li> 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 </li> <li> Slide 21 </li> <li> 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 </li> <li> Slide 22 </li> <li> Questions dont match your experience Youre 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: _____________ </li> <li> Slide 23 </li> <li> Leverage real world Expectations about the sequence of information and grouping of information Library card application Like many applications Start with: Name, address </li> <li> Slide 24 </li> <li> 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. </li> <li> Slide 25 </li> <li> Form controls Lots to choose from Text boxes Checkboxes Radio buttons Drop down lists Multiple select drop down lists </li> <li> Slide 26 </li> <li> Text boxes Great for entering short tidbits of unique information such as a persons name Faster to type the city than scroll through along list + User has lots of freedom -Data errors </li> <li> Slide 27 </li> <li> Example: Phone numbers A balancing act between giving users freedom and ensuring data integrity Free form, or a series of preformatted text boxes </li> <li> Slide 28 </li> <li> 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 </li> <li> Slide 29 </li> <li> Decision time Err on the side of being inclusive Back end scripting can parse out miscellaneous punctuation and improve data integrity </li> <li> Slide 30 </li> <li> 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 cant see (and prevent errors) n their typing Teeny, tiny search boxes </li> <li> Slide 31 </li> <li> Text areas Great for free form answers when the user is asked to provide a long answer </li> <li> Slide 32 </li> <li> Pitfalls Accidentally be set up so the text doesnt wrap Size matters Enter key behavior enter key is set up to automatically submit the form </li> <li> Slide 33 </li> <li> 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 </li> <li> Slide 34 </li> <li> Options help flush out/add meaning </li> <li> Slide 35 </li> <li> Pitfalls Dozens of checkboxes Poor labeling users arent 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 </li> <li> Slide 36 </li> <li> Review using Expedia </li> <li> Slide 37 </li> <li> 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 </li> <li> Slide 38 </li> <li> Radio buttons Best used when there is one choice, and only one, that must be chosen </li> <li> Slide 39 </li> <li> 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 </li> <li> Slide 40 </li> <li> Feeling cornered Users cant deselect all radio buttons once one has been selected. They feel cornered. Give users an out like none of these. </li> <li> Slide 41 </li> <li> 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 </li> <li> Slide 42 </li> <li> 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 </li> <li> Slide 43 </li> <li> 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 </li> <li> Slide 44 </li> <li> 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 isnt logical to users Several choices start with the same word(s); scanning is slowed down </li> <li> Slide 45 </li> <li> Submit button Position it close to the last field Make it look like a button If its a graphic submit button, make sure there is a text equivalent for screen readers and non-graphical browsers </li> <li> Slide 46 </li> <li> Pitfalls Putting the submit button in a non-standard location Making the submit button look like a hyperlink rather than the standard button </li> <li> Slide 47 </li> <li> Information design Use color, white space, headings and labels to make the form clear to users Dont overuse lines, colors and borders and create chart junk and clutter </li> <li> Slide 48 </li> <li> 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/ </li> <li> Slide 49 </li> <li> Example: Expedia Clear section heading Use of # and color to group Logical order Fields labels Fill in destination Back end matching Date 2 choices </li> <li> Slide 50 </li> <li> Examples: What could be better? Interlibrary loan form Room booking </li> <li> Slide 51 </li> <li> Testing Observing at least 2 or 3 users filling out you form Review the form submissions to spot trouble </li> <li> Slide 52 </li> <li> 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." </li> <li> Slide 53 </li> <li> Thank you Questions? Darlene Fichter University of Saskatchewan Libraries library.usask.ca/~fichter/ </li> </ul>


View more >