Lecture 2: Usability, HCI and User-Centered Design Methodology

1. Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters 1 and 3 of User-Centered Website Development (McCracken and Wolfe), chapter 1 of Designing Web Usability (Jakob Nielsen), �Human-Computer Interaction and Your Site� (Nicky Danino - http://www.sitepoint.com/article/computer-interaction-site), on a Powerpoint presentation at http://www.vtc.edu.hk/ive/ty/ict/, a Powerpoint presentation by Franz J. Kurfess at http://users.csc.calpoly.edu/~fkurfess/Courses/484/W07/Slides and slides provided with Interaction Design (Preece, Rogers, Sharp)?

2. Focusing on Usability The benefits of making a website more usable The importance of understanding users' needs The history and goals of Human-Computer Interaction The methodology of user-centered development

3. Introduction Have you ever been unable to find something in a website that you know is there? Have you ever been enraged by a useless or misleading error message? Have you ever wondered why a website needs to know your e-mail address, and left the site for fear it might be misused? pace. pace.

4. It doesn�t have to be that way You can design websites and software products that... are pleasant and convenient for your users let them accomplish their goals The key is to think about your users... learn about them watch them work, in their workplace interview them, also in their workplace The �User-Centered� in the title of the book may sound like a buzzword, and maybe it is a buzzword, but we are very serious about it. The primacy of the user is central to the whole development of the book.The �User-Centered� in the title of the book may sound like a buzzword, and maybe it is a buzzword, but we are very serious about it. The primacy of the user is central to the whole development of the book.

5. Logical design or ambiguous design? Where do you plug the mouse? Where do you plug the keyboard? top or bottom connector? Do the color coded icons help?

6. How to design them more logically (1) A provides direct adjacent mapping between icon and connector (2) B provides color coding to associate the connectors with the labels

7. Benefits of Usable Software and Websites Gaining a competitive edge Reducing development and maintenance costs Improving productivity Lowering support costs Reduced training costs

8. Gaining a competitive edge websites: purpose of site - ? Amazon Expedia mySpace YouTube New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

9. Gaining a competitive edge Usability is a major factor in the conversion rate of a site... New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

10. Gaining a competitive edge Conversion rate refers to �the percentage of visitors who take action on the site� Getting the user to take an action... ...converting visitors to purchasers, registered users, etc. New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

11. Gaining a competitive edge In physical product design and packaged software design... users buy first and experience usability after... on the web, users typically experience usability first and buy later. (Jakob Nielsen)? New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

12. Gaining a competitive edge BAD USABILITY = NO CUSTOMERS (Jakob Nielsen)? New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

13. Gaining a competitive edge Amazon - making it simple to find things and order Ease of use is the most important driver of high conversion rates New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

14. Gaining a competitive edge The average conversion rate for shopping sites is 3- 5% (McCracken and Wolfe)? Increasing the conversion rate lowers the cost of individual sales New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

15. Gaining a competitive edge Example Scenario: You spend $2500 on advertising that generates 5000 visits to a shopping site. Suppose the conversion rate is 2%... 2% of 5000 visits = 100 purchases $2500/100 = each purchase cost $25 in advertising. New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

16. Gaining a competitive edge If the conversion rate is 4%, then you attract 200 purchases... ...each purchase would cost $12.50 in advertising. New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

17. Gaining a competitive edge The higher the conversion rate, the better the sales and the greater the profit margins. (Gurley cited in McCracken and Wolfe)? New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

18. Gaining a competitive edge When IBM launched the �ShopIBM� website their hits went up 120%, but sales went up 400%. (Battey 1999 cited in McCracken and Wolfe)? New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

19. Gaining a competitive edge Usable websites have highest conversion rates. Difficulty finding item or figuring out how to buy it leads to frustration and no sale. An enjoyable experience leads to more time spent on site, more purchases, and repeat purchases New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

20. Gaining a competitive edge Usability and Software Development what is the purpose of: Quickbooks WS-FTP FinalCut Pro New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

21. Gaining a competitive edge Software products provide a service, allow people to achieve a certain goal. Usable software is a better value for customer. Usability is a major factor in: attracting users retaining users selling upgrades & extensions New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.New York Times, May 19, 2003, Business section page 5. Contains many other interesting statistics, e.g., the shopping cart abandonment rate was 49%. A story on page 4 of the same section relates that use of broadband by American households grew 50% in the previous year. About one-third of all U.S. households have some form of broadband.

22. Reducing development and maintenance costs Learn about users first, and you will avoid: implementing features users don�t want creating features that are annoying or inefficient high cost of making changes late in the development cycle The last point drives much of the methodology. Software engineers have been saying for several decades that a change is cheaper the earlier in the development cycle you make it, sometimes by large factors. This is one major reason for our focus on paper prototyping later in the book.The last point drives much of the methodology. Software engineers have been saying for several decades that a change is cheaper the earlier in the development cycle you make it, sometimes by large factors. This is one major reason for our focus on paper prototyping later in the book.

23. Improved productivity Shopping site: customers are able to buy easier Intranet or custom software solution: employees are able to be more efficient

24. Lower support costs calls to customer support can cost the company $12 to $100 or more per call avoid user problems by making the site more usable

25. HCI Origins

26. HCI Origins Scenario: $3,000,000 mainframe computer (1966)? compared to the cost of the computer, salaries are cheap. Therefore train an expert to operate the computer. Relatively few computer operators are needed.

27. HCI Origins But with the expanding computer market (IBM Personal Computer for home and small business released in 1981...) cheaper computers are operated by people who are not technicians or computer scientists.

28. HCI Origins ease of use becomes an issue industry needs to find ways to make the computer usable by a broad market

29. HCI Origins HCI has roots in Human Factors (machinery operation - origins in WWII-era aviation)? ergonomics (usually more associated with workplace and repetitive tasks)?

30. What is HCI? �Human Computer Interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of the major phenomena surrounding them.� (ACM SIGCHI working definition)?

31. Goals of HCI To develop or improve the Safety Utility Effectiveness Efficiency Usability Appeal . . . of systems that include computers

32. Safety safety of users, safety of data (or both)?

33. Utility services the system provides information instruction purchases etc.

34. Effectiveness User's ability to use the services: find desired information enter credit card data etc.

35. Efficiency How quickly users can accomplish goals or finish work using the system

36. Usability ease of learning ease of use

37. Appeal How well users like the system first impressions long-term satisfaction

38. Design Process Overview

39. Design Process Overview Need to take into account: Who the users are What activities are being carried out Where the interaction is taking place Need to optimise the interactions users have with a product Such that they match the users activities and needs

40. Design Process OverviewUnderstanding users� needs Need to take into account what people are good and bad at Consider what might help people in the way they currently do things Listen to what people want and get them involved Use tried and tested user-based methods

41. Design Process OverviewWhat is involved in the process of HCI design? Identify needs and establish requirements Develop alternative designs Build interactive prototypes that can be communicated and assessed Evaluate what is being built throughout the process

42. Design Process OverviewCore characteristics of interaction design users should be involved through the development of the project specific usability and user experience goals need to be identified, clearly documented and agreed at the beginning of the project iteration is needed through the core activities

43. User-Centered Development

44. User-Centered Development Characteristics of User-Centered Development: iterative process Design -> Prototype -> Evaluate if it passes evaluation of usability specifications, it is ready to implement if it fails, then repeat the Design -> Prototype -> Evaluate process

45. User-Centered Development Needs Analysis User and Task Analysis Functional Analysis Requirements Analysis Setting Usability Specifications Design Prototyping Evaluation

46. User-Centered Development Needs Analysis A few sentences summarizing nature and purpose of the proposed system.

47. User-Centered Development Needs Analysis example: �The redesigned website for the Plains Art Council in Burkmere, SD will foster greater participation in the arts in the local community by providing a comprehensive listing of available art programs and services and by creating an online gallery for local artists.� Q: who is the audience for this site?

48. User-Centered Development User and Task Analysis User Analysis characterizes the people who will use your site. age, education, familiarity with computers, experience or expectations with similar software or sites

49. User-Centered Development User and Task Analysis Task Analysis looks at what the users will want to accomplish using the software or site goals: buy shoes communicate with friends specific tasks: search, view images, compare prices, purchase send and receive messages, upload and view photos, etc

50. User-Centered Development Functional Analysis The computer services that will be needed for the tasks. search and sort capability �shopping cart,� secure credit card transaction at this stage � make decisions about how much functionality to build (could just put a telephone number instead of online reservation, etc.)?

51. User-Centered Development Requirements Analysis Formal specifications... may include: Data Dictionaries Entity Relationship Diagrams Object-Oriented Modelling

52. User-Centered Development Setting Usability Specifications performance measures preference measures

53. User-Centered Development Setting Usability Specifications performance measures are directly observable examples: time to fill out billing an shipping information number of clicks to locate what is playing at a specific movie theater # of tasks completed correctly / # of errors how many times did user need to type additional info on a form? # of negative comments or facial expressions(?)? what parts of the screen the user looked at (eyetracking)?

54. User-Centered Development Setting Usability Specifications preference measures interview or questionnaire usefulness of some aspect? ease of use overall? appearance? convenience? first impression? did website meet expectations?

55. User-Centered Development Setting Usability Specifications preference measures Scale of 1-5 1 = strongly disagree 2 = disagree 3 = neutral 4 = agree 5 = strongly agree Overall the site is easy to use _____ When I searched for an item the results were useful to me_____ I could pay for my purchase quickly_____

56. User-Centered Development Setting Usability Specifications Setting usability specifications means setting a target number for performance and preference measures. Don't just pick arbitrary goals! Work from evaluations of the existing site or software interface or from information about the quality of comparable products.

57. User-Centered Development Design Organization and Appearance organize content according to user's expectations navigation look and feel

58. User-Centered Development Prototyping A model from which the product will be implemented global prototyping local prototyping evolutionary throw-away high-fidelity Low-fidelity pros & cons / pitfalls...

59. User-Centered Development Evaluation testing the prototype user-based evaluation (developers observe users)? expert-based evaluation (experts critique usability)?

60. HCI Methodology for WebsiteDevelopment ( Nicki Danino)?

61. HCI Methodology for WebsiteDevelopment 1. Requirements Analysis Establish the goals for the website from the standpoint of the user and the business. Agree on the users' needs and aim for usability requirements. Appraise existing versions of the website (if any). Carry out an analysis of the competition. Complete discussions with potential users and questionnaires.

62. HCI Methodology for WebsiteDevelopment 2. Conceptual Proposal Outline site design and architecture at an abstract level. Perform a task analysis to identify essential features.

63. HCI Methodology for WebsiteDevelopment 3. Prototyping Create visual representations (mock ups) or interactive representations (prototypes) of the website. Evaluate usability using a proven method. Using the results, create more mock ups or improve the prototypes. Repeat this process until the design and usability goals are met.

64. HCI Methodology for WebsiteDevelopment 4. Development Create the final product. Evaluate functionality through testing, quality assurance, usability testing, and field testing. Use the evaluation results to improve the product. Repeat this process until the business goals are met.

65. HCI Methodology for WebsiteDevelopment 5. Launch and Housekeeping Launch the Website. Maintain and tweak with user feedback (housekeeping). Use the feedback to create new requirements, and begin major design improvements (system iteration).

66. More on HCI Methodology Chart with process broken down into tasks, purposes, techniques and deliverables: http://www.knabedesign.com/articles/methodology.html

67. Something to think about.

68. Something to think about.