Skip this Video
Download Presentation
Why Web Forms Stink and What You Can Do About It

Loading in 2 Seconds...

play fullscreen
1 / 53

Overview - PowerPoint PPT Presentation

  • Uploaded on

Why Web Forms Stink and What You Can Do About It. Darlene 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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Overview' - RexAlvis

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Why Web Forms Stink


What You Can Do About It

Darlene Fichter

Data Library Coordinator, U of S Library

  • What is usability?
  • Why test?
  • Usability techniques
web forms
Web forms
  • Forms and Information Anxiety
  • Form Controls
    • Best practices
    • Pitfalls
  • Resources
  • Every web site has forms, some have dozens of forms
  • Forms are vital tools
    • Request materials
    • Ask questions
    • Register
    • Pay fines
user s mindset
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
remember when
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
designing usable forms
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.
primed for action
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

wall of text
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



mouse click

common complaints
Common complaints
  • Too hard
  • Too long
  • Irrelevant

Information anxiety strikes – they worry …

will this form be a waste of time
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.
how long will it take to complete
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
how long
How long?
  • Keep forms short
  • Focus them on one activity
what will happen to the information i enter
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?
improve accuracy
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.”
be conversational
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?

Why we’re asking

Just the question?

what if i make a mistake
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
will this form ask irrelevant questions
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 don t match your experience
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: _____________
leverage real world
Leverage “real world”
  • Expectations about the sequence of information and grouping of information
    • Library card application
      • Like many applications
      • Start with:
        • Name, address …
let users be your guide
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.
form controls
Form controls
  • Lots to choose from
    • Text boxes
    • Checkboxes
    • Radio buttons
    • Drop down lists
    • Multiple select drop down lists
text boxes
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
example phone numbers
Example: Phone numbers
  • A balancing act between giving users freedom and ensuring data integrity
  • Free form, or a series of preformatted text boxes
  • 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
decision time
Decision time
  • Err on the side of being inclusive
  • Back end scripting can parse out miscellaneous punctuation and improve data integrity
text field pitfalls
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
text areas
Text areas
  • Great for free form answers when the user is asked to provide a long answer
  • 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
check boxes
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
  • 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
best form practices example
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
radio buttons
Radio buttons
  • Best used when there is one choice, and only one, that must be chosen
  • 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
feeling cornered
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.”
drop down boxes
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
  • 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
list box
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
  • 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
submit button
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
  • Putting the submit button in a non-standard location
  • Making the submit button look like a hyperlink rather than the standard button
information design
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
help just in time in line works best
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

example expedia
Example: Expedia
  • Clear section heading
  • Use of # and color to group
  • Logical order
  • Fields labels
  • Fill in destination
    • Back end matching
  • Date
    • 2 choices
examples what could be better
Examples: What could be better?
  • Interlibrary loan form
  • Room booking
  • Observing at least 2 or 3 users filling out you form
  • Review the form submissions to spot trouble
  • 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."
thank you
Thank you
  • Questions?

Darlene Fichter

University of Saskatchewan Libraries