web site usability: the key to e-success ismt multimedia 2002 dr vojislav b mišić

Web Site Usability:The Key to E-success

ISMT Multimedia 2002Dr Vojislav B Mišić

ISMT Multimedia © 2002 Dr Vojislav B Mišić: User-Centered Design slide 2

What is Usability?

“…the practice of designing products so that users can perform required use, operation, service, and supportive tasks with a minimum of stress and a maximum of efficiency.” (Woodson, 1981)


Unusability

As technology becomes more ubiquitous, the opportunity for poorly designed systems increases

Things that are hard to use baffle and frustrate users

If the users are your customers, poor design injures your bottom line


Why usability?

The cost of not focusing on usability are great, but not always easily measured

The expense of usability is almost always a great investment - high ROI

Usability touches all aspects of business - sales, marketing,QA, etc.

Usability is NOT “common sense”


Costs of usability

Human resources (time) for one to three specialists

Minimal costs for compensating participants Minimal costs for a PC workstation Other equipment is purely optional


Benefits of usability

Improved system design means happier clients

Happier clients mean positive perception of your organization

More successful transactions means higher performance

Reduced training costs


Costs of poor design

Negative perception of organization Failed transactions mean overhead without

ROI When a web based system fails to fill a

client’s need they pursue other costlier alternatives (phone support, phone ordering, etc.)


The Web as a Tool

Web applications are largely augmenting or replacing traditional transaction models

Such applications are user interfaces: your clients’ direct link to your services

The web app design should support the principles of usability


UCD: The Philosophy

User Centered Design means designing the system to help the user– Not designing the system to be buzzwordy– Not riddling the system with features

UCD means getting feedback from real users early and often throughout design process


3 Principles of UCD

Early focus on users and tasks

Empirical measurement of product usage

Iterative design whereby a product is designed, modified, and tested repeatedly


UCD Methodology

Comprehensive usability plan Randomly selected, representative

participants Integrating participant feedback throughout

entire design lifecycle Commitment to usability at every level of your

organization


Goals of UCD

Ease of learning Recall Productivity Minimal error rates High user satisfaction


Designer-centered Design

Very common, usually fails Designers are not users, and systems

designed for the designers are not useable by users

Early computer systems were used by the same types that made them

User population has changed dramatically


Designer-centered design example

Older style bathrooms have separate controls for hot and cold water

Not simple to adjust and re-adjust

True, there were some technical constraints … but some designer-centered thinking as well


UCD Questions

– What do you want the product to do for you?

– In what sort of environment will you be using the product?

– What are your priorities when using the software? For example, which functions will you use most often?

– How are you doing these tasks today? – What do you like and dislike about the way

you've been getting your tasks done?


Getting Started in Usability

Learn about usability Dedicate at least part of one person’s time to

usability inspection and improvement Have a place to do usability studies Educate everyone in organization about need

for usability Integrate usability into every aspect of work


Usability Laboratory

You need to think out usability testing before investing in a lab

Usability testing requires a shift in thinking, not just expensive gear

Better to build from the ground up with a simple setup


Differentiate between purchaser and user

The person who makes the buying decision may not be the end user

This can apply to management types who might be “buying” the product by approving the design, not just $$$


Distinct user categories

Many types of users may use your design Pay attention to these subclasses of users

and identify their unique traits Use a matrix design to equally represent all of

the groups


Understanding the User

How do your users work?– task analysis, interviews, & observation

How do your users interact with current applications/traditional tools?– Field study allows you to understand current

workflow


Always compensate participants

You don’t always have to pay participants with money

T-shirts, cups, mousepads, a vacation day (!) or a small nuclear device are often enough

It’s important to give the participant something as an incentive


Surfing vs. Searching

Two categories of Web utilization– Known item searching: user wants specific info,

like “How do I repair a damaged Excel spreadsheet?”

– Surfing: random wandering through web, looking for cool things with no particular agenda

Usability applies to both, but primarily to known item searching


Likeability is not Usability

Jared Spool et al. established the idea that users don’t always like useable systems as much as “cool”, but unusable, systems

This is a departure in logic from classical usability testing

Moral: effective web sites need both elements (aesthetics and utility)


Top Web User Complaints

Source: http://www.cc.gatech.edu/gvu/user_surveys/survey-1998-10/graphs/use/q11.htm


Usability Toolbox

Inquiry Inspection Testing


Inquiry

Contextual Inquiry Ethnographic Study /

Field Observation Interviews and Focus

Groups Surveys

Questionnaires Journaled Sessions Self-reporting Logs Screen Snapshots


Inspection

Heuristic evaluation Cognitive Walkthroughs Formal Usability

Inspections Pluralistic Walkthroughs

Feature Inspection Consistency Inspection Standards Inspection Guideline checklists


Testing

General concepts Thinking Aloud protocol Co-discovery method Question asking protocol Performance measurement


Contextual Inquiry

Allows you to see user’s environment and the way they work “in context”

Considers the user as a partner Allows you to take into effect environmental

constraints, and to acquire input from users Emphasis is on product and user


Field Observation

Similar to contextual inquiry Less directed: focus on gathering info

regarding artifacts and outcroppings– Artifacts: physical objects used– Outcroppings: physical traits that characterize the

environment


Focus Groups

Lets you query users about their experiences and preferences with web site

Informal; start with questions about web site, lead into discussion, gather as much info as possible


Heuristic Evaluation

Usability experts evaluate a site using well-known guidelines to determine if a site is usable

The more experts, the more problems you will find (cost goes up…)

Experts evaluate on their own and record experiences


Cognitive Walkthroughs

Expert evaluators construct task scenarios and then role-play them through an imaginary site

Screen mockups can help envision system Best to do early in design lifecycle


Pluralistic Walkthroughs

Users, developers, and usability experts step through task scenarios together

Can involve all walks of life in the user environment: technical, sales, management, etc.

Medium sized groups work best


Feature Inspection

Focus on only the features of a site Analyze each feature for availability,

understandability, and usefulness First figure out what are features that users

need from site?


Consistency Inspection

Allows usability experts to insure consistency of interface across multiple sub-sites or sections of a site

This enables the design principle of consistency and makes a system more learnable and usable


Surveys

Ad hoc interview with users that allows them to express feelings, preferences

Make easy for user to participate – limited by the amount of time survey takes

“In the hall” method works well here


Questionnaires

Like surveys, but are written or web based Allow you to gather info offline Low response rates if not compensated If web based, inexpensive or free


Journaled Sessions

Bridges the gap between interviews and usability testing

You provide a web site and journalling software that tracks user actions, as well as a set of tasks to perform

Not many tools that do this– Here's a chance to get rich quickly!


Standards Inspection

Analyze site for industry standards– Browser compliance– Consistent use of standard terms, icons

Check for cultural standards– Use of color, images– Language barriers


Thinking Aloud

During task scenarios, ask participant to say out loud their thoughts

They do this anyway sometimes! Gain insight into cognitive processes


Prototyping

Full System

Horizontal Features

Vertical Features


Users are not Designers

Problems that arise often: Users don’t always know how to verbalize

what they like They don’t always know exactly what they

want It’s up to the scientist to methodically explore

the possibilities


Web pages aren’t like books –you should use…

– highlighted keywords– meaningful sub-headings, not "clever"

ones– bulleted lists– one idea per paragraph– the inverted pyramid style, starting with the

conclusion– half the word count (or less) than

conventional writing


Ten Usability Heuristics

Jakob Nielsen is the pioneer of web site heuristic testing

The following heuristics come from http://www.useit.com/papers/heuristic/heuristic_list.html


Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time


Match between system and the real world

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms

Follow real-world conventions, making information appear in a natural and logical order


User control and freedom

Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue

Support undo and redo


Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing

Follow platform conventions


Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place

Better prevent, then cure later


Recognition rather than recall

Make objects, actions, and options visible –user should not have to remember information from one part of the dialogue to another

Instructions for use of the system should be visible or easily retrievable whenever appropriate


Flexibility and efficiency of use

Accelerators – unseen by the novice user – may often speed up the interaction for the expert user, so that the system can cater to both inexperienced and experienced users

Allow users to tailor frequent actions


Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.


Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.


Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.


Knowledge in the Head

Information that a user is “just expected to know”

Requires user to memorize obscure facts about an interface

Can reduce amount of labeling in a system


Knowledge in the World

Information that is implicit in the system, due to one or more factors– Affordances– Constraints– Labeling


Types of user errors

Mistakes - errors of intention and conscious processing– Having wrong goals– Having wrong intention

Slips - errors in execution and automatic processing– Mode errors - forgetting what mode system is in– Description errors - insufficiently specifying an

action


Types of user errors (2)

Schemas– “Scripts” that tell us what to do under different

circumstances Due to faulty activation or triggering of

schemas– Unintentional activation

• Capture errors - doing a similar, but wrong, action

• Associative activation - doing something related in meaning


Automatic & effortful processes

Automatic processes occur without conscious "thinking" – Automatic processes don't interfere with each

other or with effortful processes Effortful processes occupy limited cognitive

resources– Effortful processes interfere with one another:

doing more than one effortful process means doing all of them less well


Guidelines

"See and recognize" is easier than "remember and type" or "remember and hunt"

People can remember the locations of distinctive objects better than the locations of words (but labels help)

People remember locations of objects through automatic processing


Affordances

Make things visible Provide clues about what something is for Make object usable by making it obvious

– Visual, nonverbal “instructions”– Defeating this quality is often the result of “design”


Automatic Learning

Consistent designs help reinforce a user’s experiences on a site

Leveraging existing schemata accelerates learning, increases retention

Goal is to help user use site effortlessly This principle can also work against you!


Feedback

Clear and consistent feedback is crucial for usable systems

A lack of feedback can result in errors, multiple form submissions, or being lost

Make system status visible at all times


Natural Mappings

Make sure that control elements have natural mappings

Draw from existing schemata In particular,

Never reverse a mappingeven if you provide explicit documentation about this reversal


Constraints

Physical factors that limit action, channeling the user to the right action

Can be accomplished by “graying out” invalid selections

Not providing enough constraints can lead to confusion in navigation, selection


Principles for well-designed sites

Simplicity (Parsimony) Support Familiarity Obviousness Encouragement Satisfaction

Availability Safety Versatility Personalization Affinity


Visual Design Principles

Subtractive Design Visual Hierarchy Affordance Visual Scheme


Subtractive design (parsimony)

Reduce clutter by eliminating any visual element that doesn't contribute directly to visual communication


Visual hierarchy

By understanding the importance of users' tasks, establish a hierarchy of these tasks visually

An important object can be given extra visual prominence

Relative position and contrast in color and size can be used


Affordance

When users can easily determine the action that should be taken with an object, that object displays good affordance

Objects with good affordance usually mimic real world objects


Visual scheme

Design a visual scheme that maps to the user model and lets the user customize the interface

Do not eliminate extra space in your image just to save space

Use white space to provide visual "breathing room"


Top Ten Mistakes of Web Sites

Breaking/Slowing down Back button

Opening new browser windows

Non-standard GUI use Lack of Biographies Lack of archives Moving pages to new

URLs

Headlines that make no sense out of context

Jumping on latest buzzword

Slow server response time

Anything that looks like advertising


Human Factors


Cultural Differences

The Web is Worldwide Meanings of icons, sayings, gestures, etc.

aren’t usually global– A check mark is the symbol for negation– The color red indicates happiness– The symbol for “OK” is lewd– References to literary characters don’t fly– … many other differences…


Translations

In English:– “Please click on the flashing icon in the upper-right

hand corner of the screen to download the file” After computer translation:

– Require more cliqueter into the function graphs, which are flashant in the corner, which is superior from the hand of the display, the file to downloaden


Droodles


Model of Memory

Short Term Memory

Sensory Memory

Long Term Memory

Rehearsal


Recall

Cue

Long Term Memory

ForgettingInterference

Fatigue


Visible Spectrum


The Eye


Additive Color


Receptors


Rods

Very sensitive to light Rich near periphery of retina, sparse near

fovea Insensitive to wavelength (color) The only functional type of receptor in cone

monochromats


Cones

Sensitive to wavelength (color) Not as sensitive as rods Come in 3 flavors (in humans):

– Red– Green– Blue

In humans, rich near fovea, sparse near periphery


Color Composition


Chromostereopsis


Color Deficiency

Occurs when one or more pigments in cone do not develop properly

Several types– protanopes if they have a red-green deficiency

related to red-insensitivity– deuteranopes if they are red-green deficient

related to green-insensitivity– tritanopes if they have blue-yellow deficiency

related to blue-insensitivity


Color Test


What do you need?

At least one usability specialist (you!) A room that you can use for testing Management support A plan At least one plastic plant


What you don’t need

A Ph.D in Psychology A high-tech lab with lots of test apparatus Eye tracking device Multimillion dollar budget


Limitations of testing

Testing is always an artificial environment (solutions?)

Test results do not prove that a product works Participants are rarely fully representative of

target population Testing is not always the best technique


Test Methodology

A hypothesis must be formulated Randomly chosen sample Tight controls Control groups Significantly sized sample


Flow of testing

Develop problem statements Use a representative sample (random) Represent actual work environment Observation and interview and end users Collect data Recommend change Repeat...


Types of tests

Exploratory Assessment Validation Comparison


Exploratory

Conducted early in development cycle Used to “get a feel for” the user’s mental

model of product Example: Can a user population that is used

to the accounting interface understand the new personnel interface?


Assessment

Conducted early or halfway through development cycle

Most common sort of testing, used to expand upon exploratory testing and test low-level operations

Example: can a user edit a file using a web interface and submit it properly?


Validation

Done late in testing cycle Tests to see how product performs against

predetermined benchmark; if so, product is released

Example: can all users accomplish the previous task with 100% accuracy in under two minutes?


Comparison

Not associated with a particular stage Used to compare usability of two (or more)

elements Example: do users react quicker to a

graphical link or a text link?


Card Sorting

This technique involves making a separate index card for each (or at least several) “knowledge objects” in a web site

Shuffle the deck, then let the participants sort them into meaningful stacks

The resulting piles represent the way the participants naturally think of the organization of the site


Affinity Diagrams

Similar to card sorting– Form a team (participants)– Describe the issue– Generate idea cards– Tack cards to wall– Sort cards into groups– Create header cards– Draw the affinity diagram


Example Test Task Scenario

“Please locate the price of the Wonder Widget 2000.”– Criteria for success: locate price ($59.95) in less

than 30 seconds– Make no more than 2 errors in navigating (dead

ends)


Prototyping

Creating an incomplete “mock-up” of the web site– Might not have all subareas of site created– Might not have real database connectivity (mock

data) Should probably not be a paper prototype

– Doesn’t accurately simulate final target– Hard to pull off in testing environment


Setting up the test environment

You need to think out usability testing before investing in a lab

Usability testing requires a shift in thinking, not just expensive gear

Better to build from the ground up with a simple setup


Aesthetics vs. Usability

AestheticsUsability


Information vs. Noise

Information Noise


Simple lab


Fancier lab


Testing Roles

Test monitor / Administrator Data Logger Timers Video Operator Product /Technical Expert


Test monitor

Most critical role Needs to be an objective member Sometimes this person is the whole testing

team Sometimes an external party is the best

choice


Traits of a good test monitor

Knowledgeable in Usability Engineering Quick learner Able to establish rapport Excellent memory Good listener Comfortable with ambiguity


Traits, cont.

Flexible Long attention span Empathic “Big Picture” thinker Good communication skills Good organizer


Test monitor problems

Leading rather than enabling Too involved in data collection Acting too knowledgeable Too rigid with test plan Not relating well to each participant


Dealing with frustration

Everyday fact of life in testing Try to relate to participant, act like team Smile! Encourage, assure Don’t make it look like the participant is a

dummy


Data Logger

Takes down information as participant performs tasks

Usually logs several data:– Time elapsed– Number of clicks– Path of clicks– Success or failure


Timer

Monitors and records timing information for events

Works closely with data logger Sometimes test monitor performs this task Must be flexible but consistent


Video operator

May work in observation room Positions cameras, starts and stops tape,

pans between cameras May also be audio operator This is the first extravagance that you should

indulge May also operate video feed from PC


Site specialist

Knows intimate details of web site “Saves the day” in ambiguous situations or

when the site isn’t totally implemented Can help inform test monitor of correct

responses vs. incorrect


The six steps of testing

Develop test plan Select participants Prepare test materials Conduct the test Debrief the participant Transform data into findings and

recommendations


Developing test plan

The test plan is the foundation for your whole program

It serves as the blueprint for the test It serves as communication vehicle It describes or implies needed resources It provides a focal point for the test and

product milestone


Suggested format for plan

Purpose Problem statements / test objectives User profile Method (test design) Task List Test environment Test monitor role Evaluation measures Report contents and presentation


Selecting test participants

Characterize the user Profile will vary depending on product

– Typical traits examined include age, gender, education, computer experience, web experience, operating system experience

– Modify these to suit your particular environment


Differentiate between purchaser and user

The person who makes the buying decision is not usually the end user

This can apply to management types who might be “buying” the product by approving the design, not just $$$


Distinct user categories

Many types of users may use your design Pay attention to these subclasses of users

and identify their unique traits Use a matrix design to equally represent all of

the groups


Include at least a few LCUs

Least competent users (LCUs) are a must for testing samples

They are typically non-experienced, minimal education, etc.

The thought is that if they can make it through the test, the product is pretty usable


Beware of best-testers

If you use only highly seasoned users for your tests, you will accrue poisoned data

This can obviously result in a major disaster This can happen inadvertently and for many

different reasons


Always compensate participants

You don’t always have to pay participants with money

T-shirts, cups, mousepads, a vacation day (!) or a small nuclear device are often enough

It’s important to give the participant something as an incentive


Preparing the test materials

Screening questionnaire Orientation Background questionnaire Data collection instruments Nondisclosure agreement and tape consent form Pretest questionnaire Task Scenarios Prerequisite training materials Posttest questionnaire Debriefing topics guide


Population

The population is the entire group of people who use / will use your site

You generally cannot test all of them A population usually has many distinct

subpopulations, called profiles You want to have representation for all

profiles in your population


Sample

The slice of the population pie that you can realistically test

Must be randomly chosen Must be statistically significant Different research designs will require

different sample selection / assignment techniques


Random sampling

Can be hard to do Must be careful of subject variables If selecting from an employee database, easy

to generate a random chooser Once pool is created, care must be taken to

maintain randomness


Self-selection

People who tend to volunteer for tests have a particular personality type – that becomes a subject variable that you cannot control for

Be careful when using volunteers because of this factor


Recruiting agencies

Professional companies that maintain huge databases of people

You give them screeners to help select participants - be careful!

Can be costly People in database have usually been called

before - self-selection...


Do’h!

Users tend to automatically blame self for inability to perform task

Feel “on the spot” Need to be assured that they are not being

tested Establish rapport, make feel comfortable (but

not too comfortable!)


Keep them moving

Main goal of test monitor is to always keep user on task and to keep moving to next task

Must absorb and defuse frustration, desire to hurl test monitor thru hallway

Requires patience!


Debriefing

This can be the best time of testing Ask users questions about the experience, let

them talk (record session) Drill down into specific problems, let them see

solutions


Writing the report

There is no industry standard report format Generally report will take form:

– Intro– Methodology– User profile– Task list– Results– Discussion


Discussion

Which tasks were difficult or impossible to complete?

Were there any trends that you could detect (icons not getting noticed, ads distract users, etc)

Make suggestions for change based on the data you have gathered


What is Accessibility?

Users might be working in a context very different from yours:– They may not be able to see, hear, move, or may

not be able to process some types of information easily or at all

– They may have difficulty reading or comprehending text

– They may not have or be able to use a keyboard or mouse


Top Accessibility Tips

Provide text equivalent for all non-text elements

Ensure that info conveyed with color is also conveyed without color

Organize documents so that they can be read without style info

Provide redundant text links for each region of image maps

For data tables, identify headers

Make sure pages are usable without scripts and applets


W3C WAI Checklist

http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html


Web Resources

www.useit.com www.usableweb.com www.acm.org/sigchi


References

Norman, D. A. (1990). The design of everyday things [previously published as The psychology of everyday things] (paperback ed.). New York: Doubleday.

Hutchins, E. L., Hollan, J. D., & Norman, D. A. (1986). Direct manipulation interfaces. In D. A. Norman & S. W. Draper (Eds.), User centered system design: New perspectives on human-computer interaction (chap. 5). Hillsdale, NJ: Erlbaum.

Brassard, Michael, ed. 1988. The Memory Jogger: A Pocket Guide of Tools for Continuous Improvement. Methuen, MA: Goal/QPC.

Nielsen, Jakob, Usability Engineering, 1993, Academic Press/AP Professional, Cambridge, MA ISBN 0-12-518406-9

Rubin, Jeffrey, Handbook of Usability Testing, 1994, John Wiley and Sons, New York, NY ISBN 0-471-59403-2

web site usability: the key to e-success ismt multimedia 2002 dr vojislav b mišić

Documents