1. Web Usability Usability 101

2. Outline What is Web Usability? Why do we need it? Examples Conducting usability test Equipments Design for Usability Conclusion

3. Usability Aka: Usability Engineering, User Centered Design, User Experience Design, Information Design, Information Architecture, Interaction Design Ease of USE! Usability generally describes two different areas: –How easy a product is to use –The industry & discipline concerned with measuring ease-of-use

4. Usability Components Usability is defined by five quality components (Jakob Nielson): –Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? –Efficiency: Once users have learned the design, how quickly can they perform tasks? –Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency? –Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? –Satisfaction: How pleasant is it to use the design?

5. Web Usability Web usability is an approach to make web sites easy to use for an end-user, without requiring her (or him) to undergo any specialized training. The user should be able to intuitively relate the actions he needs to perform on the web page, with other interactions he sees in the general domain of life e.g. press of a button leads to some action. (Wikipedia)

6. Why it is Important? Improve Your Visitor Retention Rate Discover Which Parts of Your Web Site Are Failing and Why Improve the Brand Experience of Your Customers Improve Your Understanding of Your Customers Increase Sales and Profits –Every £1 invested in improving your website's usability returns £10 to £100 (source: IBM) –A web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielson)

7. Examples Buttons, menus, visual noise, etc.

8. Usability of Buttons 3D buttons http://www.designvsart.com/blog/2008/01/03/3d-button-examples-usability-issues/

9. Usability of Menus

10. Visual Noise

11. Usability Testing

12. What is Usability testing? One to two day process with 4-8 participants 1-hour approx. per session Pre-determined tasks performed Test facilitator watches & takes notes Sometimes video taped Sometimes watched by development team Results show what is working and not working

13. Usability Testing Process 2 Define Audience 3 Recruit Participants 4 Conduct Testing 5 Create Report 6 Implement Results 1 Develop Test Plan

14. Develop Test Plan Overall Objectives/Goals Methodology Target Profile Testing Outline Specific task list Final Evaluation/ Reporting Structure

15. Recruit participants “Should be as representative as possible of the intended users” If testing with a small number of users, avoid outlier groups If testing with a larger number of users, aim for coverage of all “personas” Include novices, probably experts too It helps if users are already familiar with the basics

16. Sources of Participants (Test Users) Early adopters Students Retirees Paid volunteers … etc

17. How to Treat Users Train them if you will assume some basic skills (ex. using a mouse) Do not blame or laugh at the user Make it clear that the system is being tested, not the user Make the first task easy Inform users that they can quit anytime After the test, thank the user

18. Designing Test Tasks Should be representative of real use cases Small enough to be completed in finite time, but not so small that they are trivial Should be given to the user in writing, to ensure consistency and a ready reference (Don’t explain how to do it though!) Provide tasks one at a time to avoid intimidating the user Relate the tasks to some kind of overall scenario for continuity

19. Example Task Description Motivating Scenario: “You are using X website to purchase a gift for your friend.” Tasks: 1.Select the present you want to buy 2.Add it to the shopping cart. 3.Purchase the present using your Credit Card. 4.…

20. Stages of a Conducting Usability Test Preparation Introduction Observation Debriefing

21. Preparation Choose a location that is quiet, interruption-free, and has all the equipment that you need Print out task descriptions, instructions, test materials and/or questionnaires Make sure everything is ready before the user shows up

22. Introduction Explain the purpose of the test Ask user to fill out the Informed Consent form, and any pre-test surveys Ensure the user that their results will be kept confidential, and that they can stop at any time Introduce test procedure and provide written instructions for first task Ask the user if they have any questions

23. Conducting the Test Assign one person as the primary experimenter, who provides instructions and communicates with the user Experimenter should avoid helping the user too much, while still maintaining a positive attitude No help can be given when performance is being measured The usability participant is asked to “think out- loud” while doing tasks. Make sure to take notes and collect data!

24. Getting Users to Open Up Thinking aloud can be unnatural Requires prompting by the experimenter to ensure that the user continues to externalize their thought process May slow them down and affect performance See Video

25. Example Prompts “Please keep talking.” “Tell me what you are thinking.” “Tell me what you are trying to do.” “Are you looking for something? What?” “What did you expect to happen just now?” “What do you mean by that?”

26. Points to Remember Do not make value judgments User: “This is really confusing here.” Tester: “Yeah, you’re right. It is.” (BAD) Tester: “Okay, I’ll make a note of that.” (GOOD) Video or audio record (with user’s permission), or take good notes Screen captures can also be useful

27. Debriefing Administer subjective satisfaction questionnaires, often using Likert scale –Rate your response to this statement on a scale of 1-5, where 1 means you disagree completely, and 5 means you agree completely “I really liked this website!” Ask user for any comments or clarification about interesting episodes Answer any remaining user questions Label data and write up your observations

28. Adapted from Marti Hearst

29. Analyzing and Implementing Results Create report –Executive Summary –Methodology –Results –Findings and recommendations –Appendices

30. Equipments

31. Adapted from Jake Wobbrock Example Usability Lab

32. Usability Lab

33. Tools (HW) Eye-Tracking

34. Tools (SW) Morae and UserVue (TechSmith) http://www.techsmith.com UserVue

35. Design for Usability Some tips

36. Design for Usability (1-6) Consistent Design Make sure that every page in your site has some commonality that helps the user identify the site he is on. You should also use consistent navigation styles throughout the site.

37. Design for Usability (2-6) Orphaned pages Don't create orphaned pages. Make sure that every page on your site at least has a way to go back to the very top of the site, as well as go back to its parent page.

38. Design for Usability (3-6) Pages must download quickly Usability studies have shown that 8.6 seconds is the maximum time web users will wait for a page to download (source: Andrew B. King - Speed Up Your Site).

39. Design for Usability (4-6) Information should be easy to retrieve We read web pages in a different manner to the way we read printed matter. We generally don't read pages word-for-word - instead we scan web pages. When we scan web pages certain items stand out: –Headings –Link text –Bold text –Bulleted lists For optimal website usability don't place important information in images as it might go unnoticed.

40. Design for Usability (5-6) Restrictions must not be placed on users Don't prevent your users from navigating through the Internet in the way that they want to. For example: –Every time a link is opened in a new window the back button is disabled. Approximately 60% of Web users employ the back button as their primary means of navigation (source: Usability Interface). If you do this then you're preventing 60% of your users from using their primary navigation - now that can't be good for usability. –Don't use frames to lay out your website. Frames can cause a number of usability problems (e.g. Bookmarking not possible)

41. Design for Usability (6-6) Your website has to be easy to navigate Users have gradually become accustomed to particular layouts and phrases on the Internet, for example: –Organization logo is in the top-left corner and links back to the homepage –The term ‘About us’ is used for organization information –Navigation is in the same place on each page and adjacent to the content –Anything flashing or placed above the top logo is often an advertisement –The term ‘Shopping cart’ is used for items you might wish to purchase

42. Conclusion and Resources

43. Conclusion Web Accessibility # Web Usability –Webster defines accessibility as "capable of being reached," and it defines usability as "capable of being used." –Usability: Designing web pages to be more effective, efficient, satisfying for all –Accessibility: focuses on improving access to content for individuals with disabilities.

44. Resources Usability 101: Introduction to Usability, http://www.useit.com/alertbox/20030825.html http://www.useit.com/alertbox/20030825.html Nielsen, Jacob. Alert Box. http://www.useit.com/alertbox/ http://www.useit.com/alertbox/ Web Usability: The basics http://www.webcredible.co.uk/user-friendly- resources/web-usability/basics.shtml http://www.webcredible.co.uk/user-friendly- resources/web-usability/basics.shtml 10 usability nightmares you should be aware of http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/ http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/ Usable Web http://usableweb.com/ http://usableweb.com/ Website Usability testing video http://www.webmarketingresources.net/vid.html http://www.webmarketingresources.net/vid.html http://www.usability.gov/