Why Web Forms Stink and What You Can Do About It
Post on 08-Jan-2016
Embed Size (px)
DESCRIPTIONWhy Web Forms Stink and What You Can Do About It. Darlene Fichter http://library.usask.ca/~fichter/ Data Library Coordinator, U of S Library. Overview. What is usability? Why test? Usability techniques. Web forms. Forms and Information Anxiety Form Controls Best practices Pitfalls - PowerPoint PPT Presentation
Why Web Forms Stink and What You Can Do About ItDarlene Fichterhttp://library.usask.ca/~fichter/Data Library Coordinator, U of S Library
OverviewWhat is usability?Why test?Usability techniques
Web formsForms and Information AnxietyForm ControlsBest practicesPitfallsResources
FormsEvery web site has forms, some have dozens of formsForms are vital toolsRequest materialsAsk questionsRegisterPay fines
Users mindsetFilling in forms is a necessary evilPaying billsYour tax returnJob applicationsYour tax returnOur job is make the experience as pain free as possible
Remember whenFilled out along form only to be told you entered something incorrectly but no clear feedback about whatThen you hit back only to find that the details you had entered were not preserved, and you have to fill the whole */$%^* thing over againYour information doesnt fit wont accept your address or your order
Designing usable formsTune into what the users want to accomplish with the form Organize the information in a natural way arrange the requests for like-information togetherall of the address information can be collected at once and in a conventional order street, city, state, and zip code.
Primed for actionWhen users follow a link to a form, they expect boxes and arrowsNOT a wall of textA wall of text is IntimidatingBoringPainful
Top Ten Web-Design Mistakes of 2002 http://www.useit.com/alertbox/20021223.html
Wall of textSimply bad designMost users will hit back if they canSkip the text Guess when answering the questions, never referring to the text aboveA few may try to scroll up and downlosing their placewasting valuable timeDeathby mouse click
Common complaintsToo hardToo long Irrelevant Information anxiety strikes they worry
Will this form be a waste of time?Tell the user the purpose of the formCreate a clear descriptive titleAsk a Librarian You will receive a response to your question within 24 hours.
How long will it take to complete?How many pages is it? Tell themPage 1 of 4This survey will take 10 minutes to completeFor long forms, tell them if they can stop and resume, or if you must complete in one sitting
How long?Keep forms shortFocus them on one activity
What will happen to the information I enter? The comments about this workshop will be forwarded to the Training Coordinator Users guard their privacyHow many times did Bill Gates or Fred Flintstone complete your survey?
Improve accuracyOften you can improve the accuracy of forms simply by telling the user why youre asking for the informationWe may need to contact you by email or phone to find out more about your question.
Be conversationalTry to start with H or W wordsHow manyWhereAsk a LibrarianWhats your question?How will you use the information?Where have you looked already?
Why were askingJust the question?
What if I make a mistake?Make sure your questions are clear and unambiguousThe selection options are appropriate Form validationCheck the data to see if matchesNumeric or characterFixed length - 11 digit library bar code
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
Questions dont match your experienceYoure forced to answer, in order to proceedLimit the use of required fields and the number of closed ended questions Allow user control and freedom. Please select from the choices Other: _____________
Leverage real worldExpectations about the sequence of information and grouping of informationLibrary card applicationLike many applicationsStart with:Name, address
Let users be your guideChange your mindsetRather 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.
Form controlsLots to choose fromText boxesCheckboxesRadio buttonsDrop down listsMultiple select drop down lists
Text boxesGreat 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 freedomData errors
Example: Phone numbersA balancing act between giving users freedom and ensuring data integrityFree form, or a series of preformatted text boxes
ConsiderationsInternational phone numbersFree form is betterAccessibilityscreen readers will only see the label for the first text box 3 boxes are slower3 boxes give clarity about what data is wanted
Decision timeErr on the side of being inclusive Back end scripting can parse out miscellaneous punctuation and improve data integrity
Text field pitfallsSize of the text box matters It tells the user how many characters you expectFor example, a postal code or zip code box should be quite short; but a street address box should be considerably longer No labelSo short the user cant see (and prevent errors) n their typingTeeny, tiny search boxes
Text areasGreat for free form answers when the user is asked to provide a long answer
PitfallsAccidentally be set up so the text doesnt wrap Size matters Enter key behaviorenter key is set up to automatically submit the form
Check boxesSelect one or more options from a listShort lists with 5 to 7 options work bestSave time over a drop down list; see it right up front
Options help flush out/add meaning
PitfallsDozens of checkboxesPoor labelingusers arent sure whether to pick one or pick manyFailure to predict the options that users would like to see in the list and not providing an open-ended, Other: option
Review using Expedia
Best form practices - exampleClear purposeSequence #1 and grouping of trip elementsLabelsFree form destinationBack end testing, pick from list if you failDates Offers a choice
Radio buttonsBest used when there is one choice, and only one, that must be chosen
PitfallsPoor alignment the buttons are not clearly adjacent to a particular labelUnclear or ambiguous labelsThe lone ranger syndrome offering just one radio button
Feeling corneredUsers cant deselect all radio buttons once one has been selected. They feel cornered. Give users an out like none of these.
Drop down boxesExcellent for picking one item from several, such as names of cities, branches of a library, etc. If possible, supply a default
PitfallsOveruse; everything on the form is a drop down boxItems in the drop down list are not in a logical order to the usersThe label is part of the drop down list rather than being adjacent to it
List boxFew items to hundreds from which to chooseSelect single or multiple choicesShow a reasonable number of options in the display area to facilitate scrolling through the list
PitfallsFailure to give directions on how to select more than oneError prone and often difficult for users to learn how to select multipleThe order of the items isnt logical to usersSeveral choices start with the same word(s); scanning is slowed down
Submit buttonPosition it close to the last fieldMake it look like a buttonIf its a graphic submit button, make sure there is a text equivalent for screen readers and non-graphical browsers
PitfallsPutting the submit button in a non-standard locationMaking the submit button look like a hyperlink rather than the standard button
Information designUse color, white space, headings and labels to make the form clear to usersDont overuse lines, colors and borders and create chart junk and clutter
Help: just in time, in-line works bestNeiman-MarcusProvides 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/
Example: ExpediaClear section headingUse of # and color to groupLogical orderFields labelsFill in destinationBack end matchingDate2 choices
Examples: What could be better?Interlibrary loan formRoom booking
TestingObserving at least 2 or 3 users filling out you formReview the form submissions to spot trouble
Forms With some conscious effort, we can make web forms much betterKeep in the mind, as developers we must:Ben Schneidermann"Design test design test design test."
Edward Tufte"Design think design think design think."
Darlene Fichter University of Saskatchewan Librarieslibrary.usask.ca/~fichter/
'Usability Testing: What You Need to Get Started'March 4, 2004 :: 1:00-3:00PM ESTAlmost every university, department and research group has a web site. How well does it work? How do you know? Usability testing is a technique for ensuring that people can carry out the intended activities on your web site efficiently, effectively and satisfactorily. Many usability techniques are relatively simple and easy to carry out in-house. Usability testing is a way to validate your design decisions by seeing whether people can successfully use your site. This session will introduce two techniques and how to use them: cognitive walkthrough and task-based testing. Discover how different webmasters are applying usability testing to ferret out their web site's strengths and weaknesses. Learn how to carry out usability tests and analyze the results so that you can make your site easier to use. Avoid the pitfalls of designing for what users say they like by watching what they actually do.Take home tips, exercises, examples and guidelines for carrying out your own testing and making your site better for users.