Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure...
-
Upload
gertrude-poole -
Category
Documents
-
view
220 -
download
0
Transcript of Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure...
![Page 1: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/1.jpg)
Designing Web Sites for Usability
![Page 2: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/2.jpg)
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)
![Page 3: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/3.jpg)
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?
![Page 4: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/4.jpg)
Components of Usability
![Page 5: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/5.jpg)
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
![Page 6: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/6.jpg)
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
![Page 7: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/7.jpg)
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)
![Page 8: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/8.jpg)
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
![Page 9: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/9.jpg)
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?
![Page 10: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/10.jpg)
Web Design Process
![Page 11: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/11.jpg)
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
![Page 12: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/12.jpg)
Web Site Design Process
Production
Design Refinement
Design Exploration
Discovery
… followed by implementation & maintenance
![Page 13: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/13.jpg)
Design ProcessDiscovery
Assess needsunderstand client’s
expectationsdetermine scope of
projectcharacteristics of
usersevaluate existing
site and/or competition
Production
Design Refinement
Design Exploration
Discovery
![Page 14: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/14.jpg)
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
![Page 15: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/15.jpg)
Design Process Design Refinement
Production
Design Refinement
Design Exploration
DiscoveryDevelop the
design– increasing level
of detail– heavy emphasis
on graphic design
– iterate on design
![Page 16: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/16.jpg)
Design ProcessProduction
Production
Design Refinement
Design Exploration
Discovery• Prepare design
for handoff– create final
deliverable– specifications,
guidelines, and prototypes
– as much detail as possible
![Page 17: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/17.jpg)
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
![Page 18: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/18.jpg)
Listen to Users – What Do You Like About the Web?Big ideasUtility“Findability”Personalization
![Page 19: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/19.jpg)
Top Ten Issues in Web User Experience
![Page 20: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/20.jpg)
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
![Page 21: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/21.jpg)
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
![Page 22: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/22.jpg)
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)
![Page 23: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/23.jpg)
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?
![Page 24: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/24.jpg)
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
![Page 25: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/25.jpg)
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
![Page 26: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/26.jpg)
What Might be Wrong Here?
![Page 27: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/27.jpg)
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.
![Page 28: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/28.jpg)
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
![Page 29: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/29.jpg)
What Might be Wrong Here?
![Page 30: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/30.jpg)
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 ***
![Page 31: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/31.jpg)
What Might be Wrong Here?
![Page 32: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/32.jpg)
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!
![Page 33: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/33.jpg)
What Might be Wrong Here?
![Page 34: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/34.jpg)
What Might be Wrong Here?
![Page 35: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/35.jpg)
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
![Page 36: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/36.jpg)
What Might be Wrong Here?
![Page 37: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/37.jpg)
What Might be Wrong Here?
![Page 38: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/38.jpg)
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...
![Page 39: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/39.jpg)
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
![Page 40: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/40.jpg)
Usability GuidelinesSimple and natural dialogueSpeak the users’ languageMinimize the users’ memory loadConsistency
Visual lookCommand semanticsConceptual model
![Page 41: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/41.jpg)
Usability Guidelines (cont)FeedbackClearly marked exitsShortcutsGood error messagesPrevent errorsHelp and documentation
![Page 42: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/42.jpg)
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
![Page 43: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/43.jpg)
2. User TaskflowWho are the users?What are their tasks and online
environment?For a site to be usable, page flow must
match workflow
![Page 44: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/44.jpg)
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
![Page 45: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/45.jpg)
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
![Page 46: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/46.jpg)
3. Architecture80% of usabilityBuild an efficient navigational structure“If they can’t find it in three clicks, they’re
gone”
![Page 47: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/47.jpg)
4. Affordance Means ObviousMake controls understandableAvoid confusion between logos, banners, and
buttons
![Page 48: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/48.jpg)
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
![Page 49: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/49.jpg)
6. Usability Test Along the WayTest users with low-fi prototypes early in the
design processDon’t wait until too close to site launch
![Page 50: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/50.jpg)
7. Know the Technology LimitationsIdentify and optimize for target browsers and
user hardwareTest HTML, JavaScript, etc. for compatibility
![Page 51: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/51.jpg)
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
![Page 52: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/52.jpg)
9. Multimedia Be discriminatingGood animation attracts attention to specific
information, then stopsToo much movement distracts reading and
slows comprehension
![Page 53: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/53.jpg)
10. Site StatisticsMonitor site trafficWhich pages peak user interest?Which pages make users leave?Adjust according to analysis results
![Page 54: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/54.jpg)
Web Site Usability Evaluation
![Page 55: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/55.jpg)
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 ____%
![Page 56: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/56.jpg)
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?
![Page 57: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/57.jpg)
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?
![Page 58: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/58.jpg)
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)
![Page 59: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/59.jpg)
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
![Page 60: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/60.jpg)
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.
![Page 61: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/61.jpg)
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
![Page 62: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/62.jpg)
Evaluation in a Usability Lab
![Page 63: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/63.jpg)
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
![Page 64: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/64.jpg)
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
![Page 65: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/65.jpg)
User Test Proposal
A report that containsobjectivedescription of system being testingtask environment and materialsparticipantsmethodologytaskstest measures
Get approved and then reuse for final report
![Page 66: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/66.jpg)
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)
![Page 67: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/67.jpg)
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?
![Page 68: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/68.jpg)
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
![Page 69: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/69.jpg)
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
![Page 70: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/70.jpg)
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
![Page 71: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/71.jpg)
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
![Page 72: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/72.jpg)
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)
![Page 73: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/73.jpg)
ToolsMultiple displays such as the previous can
be accomplished usingA cheap webcam (e.g., Logitech QuickCam)Application sharing in NetMeeting
![Page 74: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/74.jpg)
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
![Page 75: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/75.jpg)
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
![Page 76: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/76.jpg)
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
![Page 77: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/77.jpg)
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
![Page 78: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/78.jpg)
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)
![Page 79: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/79.jpg)
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
![Page 80: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/80.jpg)
Examples of Discount UsabilityWalkthroughs
Put yourself in the shoes of a userLike a code walkthrough
Low-fi prototypingOn-line, remote usability testsHeuristic evaluation
![Page 81: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/81.jpg)
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
![Page 82: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/82.jpg)
Low-fi Sketches and Storyboards
![Page 83: Designing Web Sites for Usability. What is Usability? “The usability of an interface is a measure of the effectiveness, efficiency and satisfaction with.](https://reader035.fdocuments.us/reader035/viewer/2022062408/56649ebb5503460f94bc2cac/html5/thumbnails/83.jpg)
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