Creating Highly Usable Websites

NOAA 7/14/04 Markus Stobbs National Center for Atmospheric Research

Overview

• The Development Process • User Testing • Usability Guidelines

The Development Process

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

Strategy

Strategy Information Architecture (IA) Design & User Testing Software Architecture • 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 Production

Information Architecture

• • • • • • • Strategy Information Architecture (IA) Design & User Testing Software 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 Production

Design & User Testing

Strategy Information Architecture (IA) Design & User Testing Software Architecture • Write Creative Brief based on Strategy & IA Plan • Create Sketches/Wireframes • User Testing • Iterative Design & Testing • Design Comps • Select final design • Style guide Production

Strategy

Software Architecture

Information Architecture (IA) Design & User Testing Software Architecture • If site requires dynamic elements: • Build use cases for functional requirements • Write software architecture document • Create hosting plan Production

Production

Strategy Information Architecture (IA) Design & User Testing Software Architecture • Staffing plan – Development – Maintenance • Site development • Launch planning and promotion • Bug testing • Site launch Production

Important Deliverables

Development Tracks

Information Architecture Design & User Testing Technical Production

Deliverables

Content Plan Site Map Creative Brief Sketches/Wireframes User Testing Report Design Comps Final Design & Style Guide Software Architecture Hosting Plan 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 Spool User 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

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

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 Layouts Fixed Left-aligned Layout

3. Dynamic Centered Layouts

3. Dynamic Centered Layouts • •

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)

Expert

Knowledge Dimensions

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

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 Needs Identified Solution Chosen Solution Applied Identify Needs Isolate Alternatives Refine Solution Alleviate Fear Most sites concentrate solely on this

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