Transcript Web Advisory Group (WAG) Implementation Plan
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 •
•