Designing Web Usability with a Human-Centered Approach

1. Designing Web Usability with a Human-CenteredApproach CIS 421 usability.ppt

2. Agenda • Changes to schedule • Usability • Universal Design Movement -- in your textbook • Technology usability • Web Usability

3. Changes to Schedule • DUE Thursday before class: Complete Blackboard quizzes on: Usability • Next Week: DUE Thursday, 11/5 before class: Project 2 posted on individual website, with gradingsheets posted to Blackboard assignment • Delay until week 7 (October 10-12): • Tuesday: Ex. 2 on Cyber Security Fair • Thursday:: Blackboard Quizzes: ~ Ch 7 quiz (Video & Audio) and Color Theory quiz • Week 8, Thurs (11/19) • Post Exercise 3, accessibility test of peer's website, posted on Blackboard & website

4. Universal Design • Universal Design principles are used in designing more than websites: • Housing • House and kitchen ware • Teaching materials • What are the main ideas of universal design? • Hint: think about what your Textbook: Universal Design for Web Accessibility says about the value of designing “barrier-free” websites

5. 3 Usability Gurus are important • Donald Norman, Cognitive Psychologist - technology in general: computers, door knobs • The Psychology [Design] of Everyday Things, 1988, 1991. • Things that make us smart, 1993 • Emotional Design 2004 • Jakob Nielsen, Computer Scientist - Web • Designing Web Usability, New Riders, 2000; • With Marie Tahir, Home Page Usability, 2002 • With Hoa Loranger, Prioritizing Web Usability, 2006 • Minor guru: Steve Krug, practitioner: Web • Don’t make me think, 2nd ed. New Riders, 2006

6. Usability Concepts + Rules • Norman: Human-centered design theory • Ideas have affected technology design since 1980s • http://www.jnd.org + http://www.nngroup.com • Nielsen: Web usability • Research tracking user’s movements in response to Web pages • http://www.useit.com • Krug: Popular version of Usability • Ideas based on practice • http://www.sensible.com

7. Norman’s human-centered approach • Technology ought to be invisible to us and not get in the way of doing the task • Knowledge in the technology (“in the world”) aids task performance • Example: printer icon suggests button function • Krug calls it “self-evident” • Require less “knowledge in the head” • especially when icon becomes a “standard” used by many • It prevents human error • Final word: “When all else fails, standardize!” GUI (& web) design has become much more standardizedsince PCs became widely adopted

8. Norman: How do we convey what we mean to the user? • Affordance is quality of object that suggests what can be done to an object • A door affords opening & closing • “Perceived” Affordance • Person can tell not only what the door does, but how it works by looking at it – PUSH it, PULL it, TURN THE KNOB, etc. • Affordances set expectations– Is self-evident (Krug) • Feedback tells user what happened when they interact with something on interface • Door opens, door closes, user hears something • Users figure out what they can do based on affordances & feedback

9. Norman’s Paradox of Technology • Technology offers the potential to make life easier and more enjoyable • Each new technology provides increased benefits • At the same time, technology can add complexities which can make technologies frustrating to use

10. Jakob Nielsen’s Web Usability 101http://www.useit.com/alertbox/20030825.html • Usability is “a quality attribute that assesses how easy user interfaces are to use” – has 5 quality components • Learnability – How easy to do basic tasks? • Efficiency – how FAST can user begin to perform tasks? • Memorability – how easy to remember how it works? • Errors – How easy to make errors? How handled? • Satisfaction – How pleasant to use design? emotional • On the Web, usability is a necessary condition for survival. If website is difficult to use, people leave

11. Nielsen’s Designing Web Usability • Usability rules the web – the person who clicks the mouse decides everything -- including to leave web site • Jakob’s Law of Internet User Experience: Users spend most of their time on other websites! • How does that affect how users view your website? • What are users comparing your website to? • Page design is the most immediately visible part of web design • Users usually look at one page at a time • Based on what they see, they stay or leave

12. Nielsen & Hoa, Prioritizing Web Usability (2006) based on user tests • Tested 69 adult users (20-60 years of age) • 57 in US, 12 in UK • At least 1 year experience using web • Rated HIGH experience or LOW experience, depending on whether used advanced techniques • Not people who develop technology or web applications • Tested individually, “Thinking aloud” • Videotaped their movements + computer with 2 separate cameras • 1-3 observers watched what they did

13. Users had 2 sets of tasks • Site-specific task to solve • Assigned to one of 25 web sites (all types & sizes of sites in the test set) • Web-wide task to solve • Could go anywhere they wanted • Tasks or problems rated as: • 100% solved • 0% solved • Partially solved

14. Success Rates & Experience Average success rate for BOTH was 66%, up from 40% in 1990s Self-reported USER SATISFACTION was 4.7 on a scale of 0 (low) to 7 (high). Not particularly surprising since their research shows that users tend to give generous scores on user satisfaction even when they have difficulty using a website

15. Web-Wide Task results: How people used sites: What does this mean? • 88% used a search engine • While doing task, users averaged 3.2 sites • Probability of revisiting a site: 12% • On average, test users spent 1 min., 49 sec. visiting a website before moving on • Average time per page: 22 seconds or this long: • Time spent on final site where solved task: 3 min, 49 sec. • 60% of Initial visits to a site were to inner page not home page. • When users browsed, they spent avg of 27 sec on interior page • most of time on content area • Ignored banners, navigation, sidebars, etc. • Almost half of user clicks were from content area

16. SERP: Search Engine Results Page returns two types of listings • Sponsored Listings • “Sponsors” bid on how much they will pay for click-throughs on “keyword” advertising • Top bids get listed “above the Line” • “Organic” listings are best matches on web to keyword search based on • “flytrap” content that is narrowly focused • Rich “see also” links to related content & services • Provide analysis & insight that attracts people • Publish a newsletter to set up relationships with users.

17. Where users click on “organic” listings on SERP – 83% ONLY used p. 1 listings

18. Page Views by Homepage vs. Screenful Interior Pages People find MORE USEFUL information inside the websitethan on the home page, but they often checked the home page to see what the site is about.

19. Scrolling: Users are lazy, ignorant! • 35% of pages did not require scroll down • on other 65%: the % who scrolled down • Homepage, 1st visit23% • Homepage, 2nd visit 14% • Interior pages 42% • Search engine results 47% • Less experienced users are more likely to scroll down than experienced ones.

20. Bad Search -Overly literal search engines PDF Files for Online Reading – ok for manuals, but not for pages Not Changing the Color of Visited Links Non-Scannable Text Should use 8th grade reading level for general public. Fixed Font Size Page Titles With Low Search Engine Visibility Anything That Looks Like an Advertisement –users have Banner blindness – if it looks like an ad, they ignore it Violating design conventions – be consistent Opening New Browser Windows Not Answering Users' Questions – leaving off the price or total price, until you submit the form with your name on it. Nielsen’s Top Ten Mistakes in Web Designhttp://www.useit.com/alertbox/9605.html

21. Conclusions from this study • Do users scroll down to find anything? • Do users usually go to the home page when they visit a website from a search engine? • Do users click on more than the first few items on the “organic” part of the SERP? • How do you get your page to the top of the“organic” list?

22. Solutions to Usability problems • Simple usability testing • Content issues • Design issues • Use of standards • Layout • Navigation & signposts • Readability

23. Nielsen’s QuickUser testing • Find 5 users to test site –5 is enough to find important usability problems • Ask users to perform representative tasks with the current version of your Website • Observe what users do • Where do they succeed? • Where do they have problems with user interface? • Listen to what they say • Revise the site and retest the revision

24. Krug Trunk Test: site in exercise: http://www.al-eds.com/ • Look at a your page and answer these questions: • What site is this? (site id?) • What page am I on (page name) • What are the major sections of this site? (sections) • What are the options at this level (local navigator) • Where am I in the scheme of things? • How can I search?

25. Types of Web testing • Eyetracking video • Vincent Flanders Web Pages that Suck • Worst Web Sites of 2008 -- need to scroll down below ads to find ethem • Web Pages That Suck - Lack of contrast

26. Content: Strategy to encourage Information foraging at your site • Based on assumption that users do not exert themselves unless they must--energy optimization similar to animals hunting for food • “Information Scent” concept – based on “spoor” • Users will keep looking as long as they feel they are getting warmer, & closer to information they wantk and/or need • Analogy to diet selection of a fox in a forest with big bunnies and small bunnies. What should he eat? • The fox’s decision on what to hunt will depend on how easy the bunnies are to catch – • little bunnies are usually easier prey

27. Content: Strategy to encourage Information foraging at your site • Diet Selection: Content looks like a Nutritious Meal that is Easy to Find(several smaller, baby bunnies vs. one large bunny) • After eating a few small bunnies, does the fox stay or move on to another hunting patch? • With broadband, users can snack information in small bites instead of big meals – it’s easier to catch small bunnies!

28. Content: Strategy to encourage Information foraging at your site • When they find something at your site they can stay for more or move on – what they do depends on how far they have to go to find other information • Search engines emphasize the quality of links so users can easily go elsewhere. • Make your content look like a nutritious meal – enhance the information scent • Have links explicitly describe what users will find • Use words people understand • Remind user they are getting “warmer”

29. Content: What do users find? • People scan the content part of the page for information, ignore navigation & anything that looks like an Ad or is in position that Ads occupy • F-Shaped pattern - http://www.useit.com/alertbox/reading_pattern.html • http://www.youtube.com/watch?v=lo_a2cfBUGc&feature=related • Banner Blindness – if it could be a banner ad, ignore it. http://www.useit.com/alertbox/banner-blindness.html • How will visitor to site know what site is about? • How will visitor know where they are if they land in middle of site from search engine?Signs that say: “You are here!” • Breadcrumbs, Page titles, Site maps

30. Content: Page real estate: citigroup.comNielsen’s review of 50 homepages found: Accenture.com • Actionable content of interest to viewers: • Nielsen recommends 50-80% meaningful content on a home page, • Findings were that average of 40% meaningful content • 20% Content that is interesting to users • 20% Navigation –primary valuable content? • Fluff – useless areas = 41% total • Ads, empty space, self-promotion • Overhead • 19% Operating system/browser/scrollbars.

31. Use Standards to help Users Know • What features to expect • How features will look • Where features will be located • How to operate each feature to achieve user’s goals • Prevent user from missing features because they look different or can’t find • Prevents users’ surprise when things do not work as expected

32. Web Design Element standardshttp://www.useit.com/alertbox/20040913.html • Standard: 37% of design elements were done the same way by 80% of sites, including: • Logo in upper left corner of page • Search box on homepage • Absence of splash pages • Breadcrumbs listed horizontally, if used • Convention: 40% of design elements done same way on 50-80% of sites, including • Labeling site maps as Site Map • Changing color of visited links • Placing shopping cart link in upper right corner • Placing links on parallel subtopics in left column • Rest was Confusion, especially navigation

33. Layout & Design Issues • Avoid horizontal scrolling at 1024x768 • Use “liquid” layout • Use elastic design so page element scale when font sizes are increased • Content Alignment: Choose one & stick to it • Left, center, or right • Centered alignment gets wavy looking – less readable • Get text away from left page edge • Use padding to separate content from border of box • Use margins to separate box from other boxes • Horizontally align text on rows of buttons

34. Web Usability Design Issues • Templates: CSS let you style entire site or sections of site with one CSS file • Elastic Design http://www.alistapart.com/articles/elastic/ • http://www.csszengarden.com/?cssfile=/063/063.css&page=0 • Validate & clean up code • W3C XHTML, CSS validators • Website Optimization for quicker download speed • Run Tools>View Speed Report to see how long page takes to download, what objects are largest, and how to optimize page • Using non-standard code – Warn users • if page only displays in certain browser versions • About plugins required to view files • File sizethey will be downloading (esp. videos)

35. Krug: users just muddle through • Users don’t need to (or want to) understand how technology works • Users scan or skim Web pages for information or solutions to tasks – they don’t want to read them thoroughly • If they find something that works, they will continue to use it, even if it is not the most efficient way of doing it - satisficing • your job: make it self-evident or at least self-explanatory!

36. Krug: Clear Visual Hierarchy • Organize & prioritize information on page • Most important information – larger, bolder, distinct color, set off by more white space, near the top of page • Things that are related logically are related visually • Nest things visually to show what is part of what • Use conventions everyone understands – shopping cart • Make it obvious what is clickable • Break up pages into clearly defined areas

37. Content: Graphics & Animation • Run Tools>View Speed Report to check page, download speed, see what page elements need to be optimized • Use ALT tags and labels for content to offer accessibility for disabled users • Use graphics to show real content not just to decorate the page – maximum 3 per page • Label graphics if meaning not immediately clear to user • Edit graphics so content is visible • Remember animation is distracting • http://www.howardsystems.com/index.html • Don’t animate anything critical (logo) • Let users launch animation themselves

38. Use customer-focused language Make it easy to understand Use consistent capitalization & style Avoid single-item categories & lists Avoid exclamation points! Beware of spelling in all uppercase – communicates anger Limit font styles & other text formatting (size, colors,) so not distracting Use high-contrast text & background colors or background image type is legible to your intended audience Nielsen: Web Content: Text

39. Nielsen Web Content: Text http://www.useit.com/alertbox/9710a.html • Make it short – slower to read on web • Avoid needless words • Use plain language • Scrap the “happy talk” (blather, blah, blah) • Write for scanability – so user can quickly decide whether pertinent • Spell & grammar check • Continue text on a second page • Legible text – colors, values, font size

40. Navigation • How will the user know where they are? • When they come into inner page in website from a search engine? • What kinds of signposts can you set up to tell them where they are in the scheme of things? • How can you let them know where they can go next? • How will they complete their tasks?

41. Nielsen: Effective Navigation • Locate primary navigation area in visible area, right next to main body of page • “Banner blindness” – people avoid information above horizontal rules at top of page • Group similar items together • Don’t provide multiple navigation areas for same types of links: top, side, bottom • Use category names that people understand • Use icons in navigation if easy to understand

42. Persistent Navigation • Makes users feel grounded – they know • what site they are on • where they are on the site • Tells users what is there • Tells how to use the Web site – what does this website offer? http://www.zincbistroaz.com/ • Mystery Meat navigation example • Instills user confidence in Site developers • Follows the conventions: hyperlinks, icons, consistent positions for menus

43. Links set Expectations (Affordances) • Use descriptive titles • Allow link colors to show visited & unvisited states – make visible and easy to interpret • visited links should look different • Otherwise users get confused & revisit same pages – get annoyed, waste time. • Make links indicate • what will happen or open (email, PDF file, etc.) • size of file especially if large

44. Breadcrumbs • home > services > analyze > results • Usually located at Top of page • Use > between levels • Use words that tell users where they are • Boldface last item • Don’t use instead of page name

45. Coming Up • Rest of quarter • Work on project 2 – take your photos • Flash hands-on starts Thursday