1 / 43

U sability

U sability. Guidelines. What is Usability?. Easy / Efficient Use to Accomplish a Task Web Sites Ease in Learning How to Use Site Efficiency in Using Site Remembering How to Use Site Upon Return General Sense of Whether Users Like Using Site Design Darwinism Survival of the Easiest

bena
Télécharger la présentation

U sability

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

  2. What is Usability? • Easy / Efficient Use to Accomplish a Task • Web Sites • Ease in Learning How to Use Site • Efficiency in Using Site • Remembering How to Use Site Upon Return • General Sense of Whether Users Like Using Site • Design Darwinism • Survival of the Easiest • Users Use Sites that are Easy to Use & Treat Them Well

  3. Usability Process • Interviews, Focus Groups, and Questionnaires • Find Out Preferences, Experiences, and Needs • Rating/Monetary • Benchmarking and Competitive Analysis • Evaluate Similar Products in the Marketplace • Participatory Design • Elicit User's Perspective Early in Development • Paper Prototyping • Generate User Feedback Through Storyboards

  4. Usability Process • Creation of Guidelines • Assure Design Consistency Through Standards • Heuristic Evaluations • Evaluate Against Accepted Usability Principles • Usability Testing ($15-30K / 12-15 Users) • Observe Actual Users Performing Real Tasks • Record What They Do • Analyze the Results

  5. Why Web Usability? • Traditional • Get Product, Use Product • Web • Use Product, Get Product

  6. Usability Redesign Examples • IBM • Search & Help were Most Used Features • After Redesign • Sales +400% • Help Clicks Reduced 84% • Staples • Low Registration • 53% Decrease in Registration Drop-off • After Redesign

  7. Design Considerations • Page Design • Content Design • Site Design

  8. Page DesignReal Estate • Minimize Navigation • 20% • Maximize User Content • 50% - 80% • White Space

  9. Page Design Real Estate Heat Mapping Weinreich 2006 & Hotchkiss 2005

  10. Page Design Real Estate Heat Mapping useit.com 8/07

  11. Page DesignReal Estate • Resolution • Unknown • 800 x 600 • 1024 x 768 • 1024 x 768 + • Percentage v. Fixed Width 6% 8% 48% 38% w3schools 1/08

  12. Page DesignCross Platform • US Browsers • Internet Explorer • Firefox • Safari • Opera • Netscape • Mozilla • Versions Current as of 2 Years Ago 75.2% 17.1% 5.8% 0.7% 0.7% 0.5% NetApplications Q1/08

  13. Page DesignCross Platform • Semantic Encoding • Meaning v. Presentation • <H2> v. 18 Point Garamond • Desktop, PDA, Cell • Accessibility, Cars

  14. Page Design Response Time • Page Size = HTML + Objects • 10 Second Threshold • Bailout (Users Who Don’t Wait For Full D/L) • Slow or Broken Links • Unable to Find Data • Unable to Find Company Data • Limited Search Functionality • Poorly Labeled Links

  15. Page Design Response Time • Setting Expectations • Indicate D/L Size When Greater Than 50Kb • Graphics • Use Colored Table Cells, CSS • Complex Tables • Use Smaller, Multiple Tables • Include Final Slash in URL • Differentiates Between Folder and Page

  16. Page Design Linking • Anchor Maximum 2-4 Words • Additional Verbiage to Explain Link • Link Titles (IE) • <a href=“bio.htm” title=“MJL Biography”> Mike</a> • Supplementary Information or Warnings • Less Than 60 Chars • Don’t Be Redundant

  17. Page Design Frames — Just Say No! • Bookmarks Don’t Reflect Frame State • URL Points to Frameset, Not Current View • Small Screens = Scrolling Frames • Search Engine Confusion

  18. Page Design Cascading Style Sheets (CSS) • Use to Globally Format Text • Use Linked v. Embedded v. Inline • Update Only Once • Smaller Pages • Use Only 2 Fonts (Head, Body) • List Alternates Consistently • Use Relative v. Absolute Point Sizes

  19. Page Design Audience • Animation / Sound • Mine Sweeping • Advertising • Scrolling • Reading Kids + + + - - Teen +/- - +/- +/- - Adult - - - + +/- useit.com 1/05

  20. Content Design Writing For the Web • Succinct • Reading Monitor 25% Slower Than Paper • Start Sentences With Verbs • Shorter, More Impact • Spell Check / Grammar • Proofread • Other Than Author

  21. Content Design Writing For the Web • Scannability • 79% Scan v. Read • Average User Reads Only 20% of Page • Short Paragraphs • < 5 Sentences • Short Sentences • < 20 Words

  22. Content Design Writing For the Web • Scannability • SubHeads • Bulleted Lists • Highlighting & Emphasis • Don’t Confuse w/ Hyperlinks • Show Numbers as Numerals • For Numbers up to a Billion • Pull Quotes

  23. Content Design Writing For the Web • Plain Language • Inverted Pyramid • Start w/ Overview • One Idea per Paragraph • Only First Sentence Read • Terminology • Consider User Demographics • FedStats.gov: Metropolitan Area v. City G e n e r a l Detail

  24. Content DesignMicrocontent • Page Titles • Search Engine Indexing • Often Used as Main Reference • 2 – 10 Words • Clearly Reflect Content • Different Pages Need Different Titles • Identical Bookmark Entries

  25. Content DesignMicrocontent • Titles, Headings, Links • Optimize For Scanning • Eliminate Articles • A, An, The • Alphabetized • Billboard Slogan v. Grammatical Sentence

  26. Content DesignMicrocontent • Titles, Headings, Links • Clarity • Plain Language • Terms Users Know & Understand • Make the First Word Important • Impact at Beginning

  27. Content Design Legibility • High Contrast • Content / Background • Subtle Background • Large Fonts

  28. Content Design Image Reduction • Thumbnails • Relevance-Enhanced • Crop to 32% • Scale to 32% • Result is 10% of Original

  29. Content Design Animation • Minimal Amount • Do Not Loop Infinitely • No Marquees

  30. Content Design Functionality • Web Benchmarking • Competition • Other Sites that Your Users Frequent • Offer Comparable Features / Capabilities • Paradigm Shifts

  31. Site Design Lack of Success Task Using Web-based App Shopping on E-commerce Site Finding Company Location Using “About Us” Info Subscribing to E-zines Average Success Rate 45% 56% 63% 70% 78% 65%

  32. Site Design Home Page • First (and Sometimes Only) Impression • One Chance to Capture Interest • Establish Consistent Style • Refrain From Metaphors • Southwest Airlines

  33. Site Design Home Page • Answers “What Does This Site Do?” • Company Name • Logo • Tagline • Upper Left Corner Standard • Navigation Entry Point • No Home Link • Search or Search Link

  34. Site Design Home Page • Guidelines • <TITLE> Begins with Company Name then Description • Mission Statement • Group Corporate Info in One Area • Emphasize Site’s Main Tasks • Search • Easy Access to Recent Features • Meaningful Graphics

  35. Site Design Home Page • Other Considerations • News & Special Promotions • Restrict Real Estate Usage • Avoid Detail • With Less to Consider, People Understand More of What's There • Avoid Scrolling • Avoid Splash Screens • Only Appropriate for Filtering Users

  36. Site Design Interior Pages • Site Name & Logo on All Pages • An Interior Page Should NOT Link to Itself

  37. Site Design Navigation • Answers “Where Am I?” (Relative to Web) • Consistency • Logo On Every Page • Consistent Placement • Should Always Link to Home Page • Related Color Scheme • Labels — Home v. Main • Nouns / Verbs

  38. Site Design Navigation • Answers “Where Am I?” (Relative to Site) • Indicate Current Page in Relation to Site Structure • Hierarchical • Breadth — Show Full Scope of Site • Linear • Depth — Show Path To Current Page • Breadcrumbs • Clear Main Headings • Relevant <TITLE> for Browser Bookmarks

  39. Site Design Navigation • Answers “Where Have I Been?” • Keep Standard Link Colors • Blue = Unvisited • Red/Purple = Visited • Image Links Do Not Indicate Visited Status

  40. Site Design Navigation • Answers “Where Can I Go?” • Structure • Linear • Purchasing Sequence of E-Commerce Site • Book • Hierarchical • General to Detail Progression • Star • Multiple Unified Sets of Information • e.g., Destinations, Accommodations, Air Travel, Cruise, Rentals • Mesh • Every Page is Accessible to Every Other Page

  41. Site Design Navigation • Answers “Where Can I Go?” • Use Same Structural Links on Pages • Broad & Shallow v. Narrow & Deep • 7 – 9 Main Navigational Items • Sitemaps • Separate Internal & External Links

  42. Site Design Site Credibility • Most Harmful Elements • Ads that are Indistinguishable from Content • Links to Sites that Lack Credibility • Content that is Rarely Updated • Linkrot Persuasive Technology by Fogg

  43. Site Design Search • Habits • 50% Search-Dominant • 20% Link-Dominant • Available From Any Page • Upper Right Standard

More Related