usability

Creating Highly Usable Websites: 

Creating Highly Usable Websites NOAA 7/14/04 Markus Stobbs National Center for Atmospheric Research

Overview: 

Overview The Development Process User Testing Usability Guidelines

The Development Process: 

The Development Process Strategy Information Architecture (IA) Design & User Testing Software Architecture Production Start Finish

Strategy: 

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: 

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 Testing: 

Design & User Testing Strategy 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 Architecture: 

Software Architecture Strategy 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: 

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 Deliverables: 

Important Deliverables

Usability Methods: 

Usability Methods User Testing Heuristic evaluation (expert reviews) Field studies Surveys, Interviews Participatory Design Focus groups Card sorting 5-second memory test

User Testing: 

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: 

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: 

Wireframes

Paper Prototypes: 

Paper Prototypes

Sample User Test: 

Sample User Test Facilitator Paper Prototype operator User

Recruiting Users: 

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: 

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: 

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: 

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: 

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: 

Usability Guidelines A sampling of findings from usability research Design conventions

1. Increase the Scent of Information: 

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 Spool User Interface Engineering (UIE) www.uie.com See WIRED article for more background

How Scent Works: 

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: 

Things that Prevent Scent Search engines Navigation panels Short links Short pages Missing context Being general vs. specific Pulldown menus

Search Engine keywords: 

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: 

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 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: 

Short Pages Content-rich pages have more scent More likelihood of user finding something of interest Scroll stoppers

Be Context Appropriate: 

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: 

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: 

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 : 

Signs of Low Scent Frequent use of back button (pogosticking) Use of Search engine

Traditional Design Approach: 

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: 

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 Content Page

2. Provide a Clear Path to Categories: 

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%

Slide37: 

Featured Content

Slide40: 

Featured Content Categories

3. Dynamic Centered Layouts: 

3. Dynamic Centered Layouts Fixed Left-aligned Layout

3. Dynamic Centered Layouts: 

3. Dynamic Centered Layouts

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: 

4. Fill the Knowledge Gap Gap Current Knowledge Target Knowledge - What users need to know to accomplish their goal

Two Kinds of Knowledge: 

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: 

Knowledge Dimensions Tool Knowledge None Domain Knowledge Expert Expert Scientists Computer-savvy Scientists Computer Specialists General Public

5. Help Users with the Needs/Solution Process: 

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: 

Needs/Solution Process Provide content at every point in the needs/solution process Solution Applied Most sites concentrate solely on this Needs Identified Solution Chosen Identify Needs Isolate Alternatives Refine Solution Alleviate Fear

Usability Resources: 

Usability Resources useit.com Jacob Nielsen’s usability website nngroup.com Nielsen/Norman Group Usability research reports, conferences uie.com User Interface Engineering - Jared Spool Usability research reports, conferences usableweb.com Links to usability sites and articles webmonkey.com How-to’s, quick reference guides webpagesthatsuck.com Learn good design by looking at bad design! webbyawards.com Learn good design by looking at great designs