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

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