Designing Web Sites for Usability

What is Usability?

“The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with which specified users can achieve specified goals in a particular environment with that interface.”

(International Organization for Standardization, ISO)

Encountering UsabilityWhen selecting a computer system

(hardware + software), the accepted process is to assess:Functionality – will the system do what is needed?Usability – will the users be successful in their use

of the system?Likeability – will the users feel the system is

suitable?These three elements constitute

“Acceptability”Does the same process apply to Web

pages/sites?

Components of Usability

Components of UsabilityLearnability - the ease with which new

users can begin effective interaction and achieve satisfactory performance

Flexibility - the number of ways the user and the page/site can exchange information

Robustness - the level of support provided the user in determining successful achievement and assessment of goals

What is Usability? (2)We cannot say that if a system obeys a set

of formal principles then it will be usableSome formal principles are necessary for

usability; any system which breaks them is bound to have problems

Formal principles form a “safety net” to prevent some of the worst mistakes but do not ensure a good design

What is Design?Design is consciousDesign keeps human concerns in the

center (e.g., usability, affordance, attention)

Design is a dialog with materials (technologies, prototyping)

Design is communication (e.g., conceptual models, metaphors, genre)

Design has social consequences (e.g., work structure, social responses)

What is Design? (2)Design is a social activity (e.g.,

participatory design, creative process)Design is a tradeoff among many concernsThe relationship of design to other

engineering activities and programmingDesigning spaces for living – similarities

between software design and architectureDesign processes and methods

Usability and DesignDesigning for maximum usability is the goal

of interactive systems design;The challenges to the designer of an

interactive system are:how can the system be developed to ensure

its usability?how can the usability of an interactive

system be demonstrated or measured?

Web Design Process

Design Specialties

Information Architectureencompasses

information & navigation design

User Interface Designalso includes testing

and evaluation

Information Architecture

User InterfaceDesign

Usability Evaluation

Information Design

Navigation Design

Graphic Design

Web Site Design Process

Production

Design Refinement

Design Exploration

Discovery

… followed by implementation & maintenance

Design ProcessDiscovery

Assess needsunderstand client’s

expectationsdetermine scope of

projectcharacteristics of

usersevaluate existing

site and/or competition

Production

Design Refinement

Design Exploration

Discovery

Production

Design Refinement

Design Exploration

DiscoveryMake multiple

designs– visualize

solutions to discovered issues

– information and navigation design

– early graphic design

– select one design for development

Design ProcessDesign Exploration

Design Process Design Refinement

Production

Design Refinement

Design Exploration

DiscoveryDevelop the

design– increasing level

of detail– heavy emphasis

on graphic design

– iterate on design

Design ProcessProduction

Production

Design Refinement

Design Exploration

Discovery• Prepare design

for handoff– create final

deliverable– specifications,

guidelines, and prototypes

– as much detail as possible

Listen to Users – What Do You Hate About the Web?Slow downloadsCan’t find what I want or what I find is

outdatedPoor graphic design and layoutHard to navigateGratuitous use of “bells and whistles”Inappropriate toneDesigner-centerednessLack of attention to detail

Listen to Users – What Do You Like About the Web?Big ideasUtility“Findability”Personalization

Top Ten Issues in Web User Experience

10. Overly Long Download Times10 second rule

amount of wait time before users lose interesttraditional human factors studies back

this up15 seconds may be acceptable on web

people are getting trained to endurebut only for a few key pages

True even for business sitesbusy during day & surf at home for work info

Web is getting slower, not faster

Download and Response TimesResponse times:

0.1 second: interaction appears instantaneous; no special feedback needed except to display result

1.0 second: the limit for the user’s flow of thought to stay uninterrupted, even though the user will notice the delay. No special feedback needed.

10 seconds – the limit for keeping the user’s attention focused on the dialog; feedback needed

9. Outdated InformationMost people would rather create content

than do maintenanceCheap way of enhancing content

link to new pages if still relevantotherwise remove them

Outdated content also leads to a lack of trust (important for e-commerce)

8. Non-standard Link Colors

Links topages that haven’t been seen are bluepreviously seen pages are purple / red

Don't mess with these colorsone of the few standard navigational aidesconsistency is important for learning

don’t underline other objects with blue/red!this is a “Web Design Pattern”

What is unfortunate about this convention?

7. Lack of Navigation SupportUsers don’t know much about a site

they always have difficulty finding informationgive a strong sense of structure and place

Communicate site structureprovide a site map

so users know where they are & where they can goprovide a good search feature

the best navigation support will never be enough

People now expect thesesite logo in upper left linked to home pageoutline structure showing where you currently are

Site MapAll the pages and all the links of the current

siteBoxes for pages, lines for linksShows how “deep” your site is

Home

Schedule

Album

Members

Sponsors

2005

2004 Media Day

Build

Competition

What Might be Wrong Here?

6. Long Scrolling Pages

Many users do not scroll beyond visible section when page completes

All critical content & navigation should be on the top part of the page

Leaf nodes can be longerpeople who have that interest will be reading itstill good to be brief

Becoming less of an issuetop items will STILL dominateshould be careful not to go past 3 screens max.

5. Orphan PagesAll pages should have a clear indication of

what Web site they belong to users may not come in through a home page

Every page should have a link up to a home pagesome indication of where they fit within the

structure of your information space

What Might be Wrong Here?

4. Complex URLsShouldn’t have exposed machine

addressUsers try to decode URLs of pages

to infer the structure of web siteslack of support for navigation & sense of location

URL should be human-readable names should reflect nature of the info. spacesometimes need to type in URL->minimize

typosuse lower-case, short names with no special chars

many people don't know how to type a ~Long URLs are hard to email properly

wrapping, etc. *** biggest issue today ***

What Might be Wrong Here?

3. Constantly Running AnimationsDon’t have elements that move incessantly

moving images have an overpowering effect on the human peripheral vision no animations, scrolling text, marquees

Users tune them outso do not put anything important there!

Give your user some peace and quiet to actually read the text!

What Might be Wrong Here?

What Might be Wrong Here?

2. Gratuitous use of “Bleeding Edge” Technology

Don’t try to attract people using ityou’ll get the nerd crowd, but mainstream

users care about content and serviceIf their system crashes

they will never come backCaveat: appropriate if selling those

products

What Might be Wrong Here?

What Might be Wrong Here?

1. Using Frames

Confusing for usersbreaks the user model of the web page

sequence of actions rather than single actunit of navigation no longer equal to unit of view

Lose predictability of user actions what information appears where when you

click? Sometimes can’t bookmark the current page &

return to itURLs stop workingcan’t share with others (lose social filtering)

emailing links still doesn’t work...

Frames (2)Search engines have problems with frames

what part of frames do you include in indexes?

Early surveys found most users preferred frame-less sitesrecent surveys back this up ~70-90%

Caveat: experienced designers can sometimes use frames to good effect; Frames are not evil, bad use of frames is evil

Usability GuidelinesSimple and natural dialogueSpeak the users’ languageMinimize the users’ memory loadConsistency

Visual lookCommand semanticsConceptual model

Usability Guidelines (cont)FeedbackClearly marked exitsShortcutsGood error messagesPrevent errorsHelp and documentation

In Summary-The Ten Usability Principles1. Motivate

Design site to meet specific user needs and goals

Use motivators to attract different user “personae” in specific parts of the site

2. User TaskflowWho are the users?What are their tasks and online

environment?For a site to be usable, page flow must

match workflow

Perceiving the Audience/UserIs it a captive audience? (e.g., an intranet) -

then it’s easy….otherwiseUser surveys/user feedback mechanismsAnalysis of legacy audience information

public affairs officecustomer support, technical support, etc.legacy online systems

Perceiving the Audience/User (cont)

Lessons learned from non-Web methods - e.g., brochures, catalogs, mailings

Demographic information - e.g., geography, online, education, etc.

Sampling - population samples, “beta” testers

ExperienceDefinition of a new audience

3. Architecture80% of usabilityBuild an efficient navigational structure“If they can’t find it in three clicks, they’re

gone”

4. Affordance Means ObviousMake controls understandableAvoid confusion between logos, banners, and

buttons

5. ReplicateWhat works - “Don’t re-invent the wheel”Use well-designed templates for the most

common page types (e.g., personal home pages)

Look at other sitesCompetitorsClassics

Google.com Yahoo.com Amazon.com

6. Usability Test Along the WayTest users with low-fi prototypes early in the

design processDon’t wait until too close to site launch

7. Know the Technology LimitationsIdentify and optimize for target browsers and

user hardwareTest HTML, JavaScript, etc. for compatibility

8. Know User TolerancesUsers are impatientDesign for a 2-10 second maximum

downloadReuse as many graphics as possible so that

they reload from cacheAvoid excessive scrolling

9. Multimedia Be discriminatingGood animation attracts attention to specific

information, then stopsToo much movement distracts reading and

slows comprehension

10. Site StatisticsMonitor site trafficWhich pages peak user interest?Which pages make users leave?Adjust according to analysis results

Web Site Usability Evaluation

Example – Evaluating Web SitesWhat is the relative importance (from a

user perspective) of:Document structure ____%Content organization ____%Navigational tools ____%Interface design ____%Use of the medium ____%

Example – “High Level” QuestionsDo the screen designs look attractive?Is the use of the screen intuitive/natural?Do the icons show creativity?Can you understand the level of the text?Could an African pygmy use the system

successfully?Would it work just as well if the user was

left-handed?

Example – “High Level” Questions (cont)Would it work just as well if the user

normally wrote from top to bottom?How well have all the design decisions

been explained?

Taxonomy of Evaluation Techniques

Predictive Modelsand Techniques

ExperimentalTechniques

HCI-basedHeuristics

Theory-basedModels

Wizard of OzPlatforms

Mockups Prototypes

Evaluation Techniques

Predictive Modelsand Techniques

ExperimentalTechniques

HCI-basedHeuristics

Theory-basedModels

Wizard of OzPlatforms

Mockups Prototypes

Evaluation Techniques

(adapted from Joelle Coutaz)

Usability Evaluation

System FunctionsTask matchEase of use

Ease of learning

User CharacteristicsKnowledgeDiscretionMotivation

Task CharacteristicsFrequencyOpenness

User ReactionImplicit cost/benefit analysis

Good task-system matchContinued user learning

Restricted useNon-use, partial use,

distant use

Positive outcomeNegative outcome

Independent variables

Dependent variables

System FunctionsTask matchEase of use

Ease of learning

User CharacteristicsKnowledgeDiscretionMotivation

Task CharacteristicsFrequencyOpenness

User ReactionImplicit cost/benefit analysis

Good task-system matchContinued user learning

Restricted useNon-use, partial use,

distant use

Positive outcomeNegative outcome

Independent variables

Dependent variables

Usability Evaluation Measures

Measure Remarks

Task completion Number of tasks correctly completed. Number of tasks completed in given time. Time taken per task.

Action usage Frequency of use of different commands. Use of command sequences. Use of special command (e.g. ‘help’)

Shortcuts Use of keyboard equivalents.

Display perusal Time spent looking at display. Comparative data for different screen designs.

User errors Classification of error types. Frequency of error types. Time spent in error situations. Time taken to correct errors.

Input devices Comparative time taken to execute tasks.

Why do User Testing?Can’t tell how good a UI is until

people use itOther methods are based on

evaluatorsWho may know too much

(designers)Who may not know enough (about

tasks, etc.)UI experts

Hard to predict what real users will do

Evaluation in a Usability Lab

Choosing ParticipantsRepresentative of target users

job-specific vocabulary / knowledgetasks

Approximate if neededsystem intended for physicists

get physics studentssystem intended for engineers

get engineering studentsUse incentives to get participants

Ethical Considerations

Sometimes tests can be distressingusers have left in tears

You have a responsibility to alleviatemake voluntary with informed consentavoid pressure to participatelet them know they can stop at any timestress that you are testing the system, not

themmake collected data as anonymous as possible

Often must get human subjects approval

User Test Proposal

A report that containsobjectivedescription of system being testingtask environment and materialsparticipantsmethodologytaskstest measures

Get approved and then reuse for final report

Informed Consent Form for Usability Participants SLAC Public Web Site

Purpose of this study The purpose of this study is to understand how employees and visitors want to use the SLAC public Web site. Your participation in this study will help us to adapt a new service to the needs and desires of its users and visitors. Information we will collect We will ask you to try out a public Web site. We will observe how you interact with it, and will also interview you briefly. The information from your visit will be used, along with that from other similar visits, to improve the site you will see today. Summary data may be used in publication for scientific purposes. Digital video permission We will take hand written notes and video tape the session. By signing this consent form, you are giving us consent to use your verbal statements and still images, but not your name, for the purposes of demonstration and evaluation only. This is in no way a product endorsement. Non-disclosure We may discuss ideas with you or show you Web designs, photo imaging technology, hardware, or software which are not yet announced products. We are doing this so we can get your feedback only. By signing this form, you agree not to tell anyone, including family members, detailed information about this visit and about any new hardware, software or interface designs you observe during this interview. What you can say is that you participated in a study to help improve a web product. Freedom to withdraw You are free to refuse to participate, take a break, or withdraw from this study at any time. Please let us know when you need a break. Questions If you have questions, please ask them now or during the study. Payment You will receive $75 in cash as incentive for participating in this study. After reading this form, if you agree with these terms, please show your acceptance by signing below. Date Participant Signature Participant Name (Printed)

Types of Testing

Concept TestingPresent the Web site to the userSee if they “get it”Do they understand the purpose of the site?Do they understand the value proposition?Do they understand the site organization?Do they have a feel for the site operation?

Types of Testing (cont)Key Task Testing

Present the Web site to the userAsk them to perform a taskObserve how they perform the taskPersonalize the task

Contrived tasks have no “emotional buy-in”User should make best use of their personal

knowledge

Deciding on Data to Collect

Two types of dataProcess data

Observations of what users are doing and thinking“Bottom-line data”

Summary of what happened (time, errors, success)i.e., the dependent variables

Which Type of Data to Collect?

Focus on process data firstGives good overview of where problems are

Bottom-line doesn’t tell you where to fixJust says: “too slow”, “too many errors”, etc.

Hard to get reliable bottom-line resultsNeed many users for statistical significance

The “Thinking Aloud” MethodNeed to know what users are thinking,

not just what they are doingAsk users to talk while performing tasks

Tell us what they are thinkingTell us what they are trying to doTell us questions that arise as they workTell us things they read

Make a recording or take good notesMake sure you can tell what they were doing

Thinking Aloud (cont)

Prompt the user to keep talking“Tell me what you are thinking”

Only help on things you have pre-decidedKeep track of anything you do give help on

RecordingUse a digital watch/clockTake notes, plus if possible

record audio and video (or even event logs)

ToolsMultiple displays such as the previous can

be accomplished usingA cheap webcam (e.g., Logitech QuickCam)Application sharing in NetMeeting

Using the ResultsUpdate task analysis and rethink design

Rate severity and ease of fixing critical issuesFix both severe problems and make the easy

fixesWill thinking aloud give the right answers?

Not alwaysIf you ask a question, people will always give

an answer, even it is has nothing to do with facts

Try to avoid specific questions

Measuring Bottom-Line UsabilitySituations in which numbers are useful

Time requirements for task completionSuccessful task completionCompare two designs on speed or # of errors

Do not combine with thinking-aloud. Why?Talking can affect speed and accuracy

Ease of measurementTime is easy to recordError or successful completion is harder

Define in advance what these mean

Analyzing the Numbers

Example: trying to get task time <=3 min. Test gives: 2, 1.5, 4, 9, 1, .5Mean (average) = 3Median (middle) = 6.5How does it look?

Factors contributing to our uncertaintysmall number of test users (n = 6)results are very variable (standard deviation =

3.2)Since std. dev. measures dispersion from the mean

Analyzing the Numbers (cont)This is what statistics is forCrank through the procedures and you find

95% certain that typical value is between .5 & 5.5

Usability test data is quite variableNeed lots to get good estimates of typical values4 times as many tests will only narrow range by

2xBreadth of range depends on sqrt of # of test users

This is when online methods become usefulEasy to test w/ large numbers of users

Measuring User PreferenceHow much users like or dislike the

systemCan ask them to rate on a scale of 1 to 10Or have them choose among statements

“Best usability I’ve ever…”, “better than average”…Hard to be sure what data will mean

Novelty of UI, feelings, not realistic setting …

If many give you low ratings -> troubleCan get some useful data by asking

What they liked, disliked, where they had trouble, best part, worst part, etc. (redundant questions are OK)

Discount Usability Engineering

Reaction to excuses for not doing user testing“Too expensive”, “takes too long”, …

CheapNo special labs or equipment neededThe more careful you are, the better it gets

FastOn order of 1 day to applyStandard usability testing may take a week or more

Easy to useSome techniques can be taught in 2-4 hours

Examples of Discount UsabilityWalkthroughs

Put yourself in the shoes of a userLike a code walkthrough

Low-fi prototypingOn-line, remote usability testsHeuristic evaluation

Fidelity in Prototyping

Fidelity refers to the level of detail

High fidelity?

Prototypes look like the final product

Low fidelity?

Artists renditions with many details missing

Low-fi Sketches and Storyboards

Low-fi Sketches and Storyboards

Where do storyboards come from?Film & animation

Give you a “script” of important eventsLeave out the details Concentrate on the important interactions