designing web sites for usability. what is usability? “the usability of an interface is a measure...
TRANSCRIPT
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