creating highly usable websites noaa 7/14/04 markus stobbs national center for atmospheric research
TRANSCRIPT
Creating Highly Usable Websites
NOAA7/14/04
Markus StobbsNational Center for Atmospheric Research
Overview
• The Development Process
• User Testing
• Usability Guidelines
The Development Process
Strategy Information Architecture (IA)
Design & User Testing
Software Architecture
Production
Start Finish
Strategy
• Assemble core team• Meet with key stakeholders
– Identify and prioritize goals of the site– Identify and prioritize audiences– Post-it method
• Identify related sites the team likes• Write strategic plan• Present to key stakeholders
Strategy Information Architecture (IA)
Design & User Testing
Software Architecture
Production
Information Architecture
• Brainstorm content ideas that accomplish site goals
• Gather functional requirements• Top-level navigation categories
– Post-it method– Card sorting
• Inventory existing content (if redesign)• Create IA plan that accomplishes site goals• Present IA plan to designers• Create site map
Strategy Information Architecture (IA)
Design & User Testing
Software Architecture
Production
Design & User TestingStrategy Information Architecture (IA)
Design & User Testing
Software Architecture
Production
• Write Creative Brief based on Strategy & IA Plan• Create Sketches/Wireframes• User Testing• Iterative Design & Testing• Design Comps• Select final design • Style guide
Software ArchitectureStrategy Information Architecture (IA)
Design & User Testing
Software Architecture
Production• If site requires dynamic elements:• Build use cases for functional requirements
• Write software architecture document• Create hosting plan
Production
• Staffing plan– Development– Maintenance
• Site development• Launch planning and promotion• Bug testing• Site launch
Strategy Information Architecture (IA)
Design & User Testing
Software Architecture
Production
Important DeliverablesDevelopment Tracks Deliverables
Information Architecture Content Plan
Site Map
Design & User Testing Creative Brief
Sketches/Wireframes
User Testing Report
Design Comps
Final Design & Style Guide
Technical Software Architecture
Hosting Plan
Production Staffing Plan
Final Website
Usability Methods
• User Testing• Heuristic evaluation (expert reviews)• Field studies• Surveys, Interviews• Participatory Design• Focus groups• Card sorting• 5-second memory test
User Testing
• One-on-one• Create tasks for user• Observe user behavior as they attempt tasks• Get user feedback through think aloud protocol• Facilitator mainly stays quiet• Method used to:
– Identify elements that are confusing or don’t work in the design
– Get insight on how to improve the design
When to Test
• Test early– Don’t just do as validation at the end– Build user testing into your design process– Start with wireframes or paper prototyping
• Test iteratively (test, modify design, re-test)
Wireframes
Paper Prototypes
Sample User Test
• Facilitator
• Paper Prototype operator
• User
Recruiting Users
• Recruit at least 5 users based on your audiences• Where to find participants
– Students– Related organizations– Friends and family– Colleagues– Market research companies - $107 per user
• Participant incentives– Gifts, gift certificates– Cash ($32 to $118/hour, average $64/hour)
Tasks
• Determine test goals– What design questions do you want to answer?
• Make tasks scenario-based– Avoid micro-steps
• Make tasks realistic• Leave out words that act as clues or hints
– Don’t use same wording as website
• Start with easier tasks to build user confidence
Planning the Test
• Decide how you will record the test– Screen/audio recorder or video
• Pick a test location– Onsite, user’s site, testing lab
• Plan 60 minute sessions• Conduct a trial run beforehand
Conducting the Test
• Greet user• Offer drink but not food (distracting)• Explain think aloud protocol and how test will
work• Run test• Leave 10 minutes at end for open-ended
feedback and follow-up questions• Reset computer before next user
Facilitating
• Treat participants ethically– Provide informed consent
• What they’ll be asked to do, recording, how data will be used
– Stop if they are upset – Retain anonymity of users
• Don’t laugh or giggle• Try to put the user at ease• Tell user they are not being tested, it is the
design that is being tested
Usability Guidelines
• A sampling of findings from usability research
• Design conventions
1. Increase the Scent of Information
• Words and images act as cues that people use to decide if something is interesting
• Users are foraging for trigger words that are associated with their interests or task at hand
• Information foraging theory created by Ed Chi and Peter Paroli of Zerox PARC
• Expanded on and tested by Jared SpoolUser Interface Engineering (UIE)www.uie.com
• See WIRED article for more background
How Scent Works
• Every link gives off scent
• As scent gets stronger, the user feels more confident about exploring that direction
• Weak scent can lead to users giving up and abandoning the site, or using search and getting lost
Things that Prevent Scent
• Search engines
• Navigation panels
• Short links
• Short pages
• Missing context
• Being general vs. specific
• Pulldown menus
Search Engine keywords
• Check your logs for search engine keywords used
• These are trigger words that the user was not able to find scent for on your home page
• Incorporate high frequency search trigger words into your pages
Navigation Panels
• Don’t limit yourself to one word links due to horizontal real estate restrictions
• Amazon uses two line links where necessary• Use multiple trigger words when helpful
(camera & photo; outlet & used & refurbished)
Short Links
• Short links don’t emit scent• The best links are 7-12 words including
associated text – over 50% likelihood of successful match with
users expectation
• Use href title parameter to popup more info<a href=“filename” title=“describe link”>
Short Pages
• Content-rich pages have more scent
• More likelihood of user finding something of interest
• Scroll stoppers
Be Context Appropriate
• Links are interpreted in the context of the current page
• eg. Clicking “Sports Calendar” on a Denver Broncos page
Make Links Specific
• Links that are too generalized don’t have scent
• Be specific so the user really knows what they’re going to get after clicking
• Links need trigger words
Pulldown menus
• Block scent because the trigger words are hidden
• Many users scan first and then go to the mouse once they have already decided what to click
Signs of Low Scent
• Frequent use of back button (pogosticking)
• Use of Search engine
Traditional Design Approach
• Start with home page• Figure out major site sections• Design a home page that gets people to those sections
Home
Desiging for Scent• Start with a content page• Figure out places in your site where users will likely want to get
to that content page• Put links to the content page in all those places
ContentPage
2. Provide a Clear Path to Categories
• UIE study of several home pages• From home page, users click
– Categories 87% of the time– Search 7%– Home button 2.7%– Featured Content - 1.3%
Featured Content
Featured Content
Categories
3. Dynamic Centered LayoutsFixed Left-aligned Layout
3. Dynamic Centered Layouts
3. Dynamic Centered Layouts
• <body leftmargin=“0” topmargin=“0” marginwidth=“0” marginheight=“0”>
• <table width=“100%” align=“center”>
4. Fill the Knowledge Gap
Gap
Current Knowledge Target Knowledge
- What users need to know to accomplish their goal
Two Kinds of Knowledge
• Tool Knowledge– What users know about your application
• Domain Knowledge– What users know about the domain related
to the tool (eg. Meteorology)
Knowledge Dimensions
Tool Knowledge
None
Dom
ain
Kno
wle
dge
Expert
Expert
ScientistsComputer-savvy
Scientists
ComputerSpecialists
GeneralPublic
5. Help Users with the Needs/Solution Process
• UIE study of thousands of message posts in medical, tech support, and professional discussion lists
• All boiled down to 3 motivations– Understanding needs– Solution refinement– Alleviating Fear
Needs/Solution Process
• Provide content at every point in the needs/solution process
SolutionApplied
Most sites concentrate solely on this
NeedsIdentified
SolutionChosen
IdentifyNeeds
IsolateAlternatives
Refine Solution
Alleviate Fear
Usability Resources
• useit.comJacob Nielsen’s usability website
• nngroup.comNielsen/Norman GroupUsability research reports, conferences
• uie.comUser Interface Engineering - Jared SpoolUsability research reports, conferences
• usableweb.comLinks to usability sites and articles
• webmonkey.com How-to’s, quick reference guides
• webpagesthatsuck.com Learn good design by looking at bad design!
• webbyawards.comLearn good design by looking at great designs