Why Web Forms Stink
1 / 53

Overview - PowerPoint PPT Presentation

  • Updated On :

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. 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
Slide1 l.jpg

Why Web Forms Stink


What You Can Do About It

Darlene Fichter


Data Library Coordinator, U of S Library

Overview l.jpg

  • What is usability?

  • Why test?

  • Usability techniques

Web forms l.jpg
Web forms

  • Forms and Information Anxiety

  • Form Controls

    • Best practices

    • Pitfalls

  • Resources

Forms l.jpg

  • Every web site has forms, some have dozens of forms

  • Forms are vital tools

    • Request materials

    • Ask questions

    • Register

    • Pay fines

User s mindset l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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

Wall of text l.jpg
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 l.jpg
Common complaints

  • Too hard

  • Too long

  • Irrelevant

Information anxiety strikes – they worry …

Will this form be a waste of time l.jpg
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 l.jpg
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 l.jpg
How long?

  • Keep forms short

  • Focus them on one activity

What will happen to the information i enter l.jpg
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 l.jpg
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 l.jpg
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?

Slide17 l.jpg

Why we’re asking

Just the question?

What if i make a mistake l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
Form controls

  • Lots to choose from

    • Text boxes

    • Checkboxes

    • Radio buttons

    • Drop down lists

    • Multiple select drop down lists

Text boxes l.jpg
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 l.jpg
Example: Phone numbers

  • A balancing act between giving users freedom and ensuring data integrity

  • Free form, or a series of preformatted text boxes

Considerations l.jpg

  • 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 l.jpg
Decision time

  • Err on the side of being inclusive

  • Back end scripting can parse out miscellaneous punctuation and improve data integrity

Text field pitfalls l.jpg
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 l.jpg
Text areas

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

Pitfalls l.jpg

  • 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 l.jpg
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

Pitfalls35 l.jpg

  • 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 l.jpg
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 l.jpg
Radio buttons

  • Best used when there is one choice, and only one, that must be chosen

Pitfalls39 l.jpg

  • 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 l.jpg
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 l.jpg
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

Pitfalls42 l.jpg

  • 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 l.jpg
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

Pitfalls44 l.jpg

  • 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 l.jpg
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

Pitfalls46 l.jpg

  • Putting the submit button in a non-standard location

  • Making the submit button look like a hyperlink rather than the standard button

Information design l.jpg
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 l.jpg
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/

Example expedia l.jpg
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 l.jpg
Examples: What could be better?

  • Interlibrary loan form

  • Room booking

Testing l.jpg

  • Observing at least 2 or 3 users filling out you form

  • Review the form submissions to spot trouble

Forms52 l.jpg

  • 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 l.jpg
Thank you

  • Questions?

    Darlene Fichter

    University of Saskatchewan Libraries