1 / 49

Creating Highly Usable Websites

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. Finish. Strategy. Information Architecture (IA). Design & User Testing.

ranger
Download Presentation

Creating Highly Usable Websites

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Overview • The Development Process • User Testing • Usability Guidelines

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

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

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

  6. 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

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

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

  9. Important Deliverables

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

  11. 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

  12. 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)

  13. Wireframes

  14. Paper Prototypes

  15. Sample User Test • Facilitator • Paper Prototype operator • User

  16. 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)

  17. 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

  18. 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

  19. 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

  20. 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

  21. Usability Guidelines • A sampling of findings from usability research • Design conventions

  22. 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

  23. 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

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

  25. 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

  26. 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)

  27. 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”>

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

  29. Be Context Appropriate • Links are interpreted in the context of the current page • eg. Clicking “Sports Calendar” on a Denver Broncos page

  30. 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

  31. 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

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

  33. Traditional Design Approach • Start with home page • Figure out major site sections • Design a home page that gets people to those sections Home

  34. 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

  35. 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%

  36. Featured Content

  37. Featured Content Categories

  38. 3. Dynamic Centered Layouts Fixed Left-aligned Layout

  39. 3. Dynamic Centered Layouts

  40. 3. Dynamic Centered Layouts • <body leftmargin=“0” topmargin=“0” marginwidth=“0” marginheight=“0”> • <table width=“100%” align=“center”>

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

  42. 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)

  43. Knowledge Dimensions Expert Computer-savvyScientists Scientists Domain Knowledge Computer Specialists GeneralPublic None Expert Tool Knowledge

  44. 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

  45. Needs/Solution Process • Provide content at every point in the needs/solution process SolutionChosen SolutionApplied NeedsIdentified Identify Needs IsolateAlternatives Refine Solution Alleviate Fear Most sites concentrate solely on this

  46. 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.comHow-to’s, quick reference guides • webpagesthatsuck.comLearn good design by looking at bad design! • webbyawards.comLearn good design by looking at great designs

More Related