Website Usability


Published on

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Website Usability

  1. 1. Web Site Usability October 20, 2009 Vincci Kwong Franklin D. Schurz Library Indiana University South Bend Indiana Library Federation Annual Conference
  2. 2. Website Usability <ul><li>“ The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.” (British Standards Institution, 1998) </li></ul><ul><li>“ Making whatever you’re working on easier to use for who ever is going to use it.” (Steve Krug, 2001) </li></ul><ul><li>“ An element of design, focusing on ‘can this be used when it’s done?’ rather than just making it look good.” (Steve Krug, 2001) </li></ul><ul><li>“ On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave” (Jakob Nielsen, 2003) </li></ul>
  3. 3. Components of Website Usability <ul><li>The five Es: </li></ul><ul><li>Effective </li></ul><ul><li>Efficient </li></ul><ul><li>Engaging </li></ul><ul><li>Error tolerant </li></ul><ul><li>Easy to learn </li></ul>
  4. 4. Types of Usability Testing <ul><li>Scenario-Based Inspection </li></ul><ul><li>Heuristic Evaluation </li></ul><ul><li>User Observation </li></ul><ul><li>Prototyping Test </li></ul><ul><li>Card Sorting </li></ul>
  5. 5. Perquisites for all Usability Testing <ul><li>Information gathering </li></ul><ul><ul><li>Who are the users? </li></ul></ul><ul><ul><li>What do users do? </li></ul></ul><ul><ul><li>What do users want? </li></ul></ul><ul><ul><li>Limitation of current system </li></ul></ul><ul><li>Understanding of design principles and rules </li></ul>
  6. 6. Scenario-Based Inspection <ul><li>Evaluator examines the website in which people perform their tasks </li></ul>Goal Task Task Task Action Action Action Action
  7. 7. Setting Up a Scenario-Based Inspection <ul><li>Come up with scenarios </li></ul><ul><li>Explore different ways in order to accomplish each scenario </li></ul><ul><li>Make note on problems encounter when working through each scenario </li></ul>
  8. 8. Heuristic Evaluation <ul><li>Inspector examines the website to check whether it complies with a set of design principles </li></ul><ul><ul><li>- Nielsen’s Heuristics </li></ul></ul><ul><ul><li>MILE+ Heuristics </li></ul></ul><ul><ul><ul><li>Triacca, Luca, Alessandro Inversini, and Davide Bolchini. “Quality of Web Usability Evaluation Methods: An Empirical Study on MiLE+.” Seventh IEEE International Symposium on Web Site Evolution . 2005. 22-29. Print. </li></ul></ul></ul><ul><ul><li>W3C Content Accessibility Guidelines 1.0 </li></ul></ul><ul><ul><li>Section 508 Standards </li></ul></ul>
  9. 9. Setting Up a Heuristic Inspection <ul><li>Choose inspectors </li></ul><ul><li>Decide on heuristic criteria </li></ul><ul><li>Prepare data collection and analysis form </li></ul><ul><li>Prepare task description </li></ul><ul><li>Reserve a room </li></ul>Task Scenario No.: 1 Inspector’s Name: Kelly Session Date: 3/20/2009 Session Start Time: 9:00 am Session End Time: 10:00 am Fig. 1 An example of data collection and analysis form. Heuristic violated Usability defect Comments Navigation Inconsistent overall navigation The user was confused by the different navigation systems. Semiotics Unclear links labels The user would like simple wordings without the use of jargon. Graphics Contrast between text and background The user found it difficult to read the wordings on the webpage.
  10. 10. Pro and Con of Heuristic Evaluation <ul><li>Pros </li></ul><ul><ul><li>Less expensive </li></ul></ul><ul><ul><li>Inspectors usually suggest solutions to the problem they identified </li></ul></ul><ul><ul><li>Helps to reduce obvious errors </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>Inspector’s view points may not reflect those of actual users </li></ul></ul><ul><ul><li>Inspector may have their own preferences, biases, and views </li></ul></ul><ul><ul><li>Results depends on skills and experiences of inspectors </li></ul></ul>
  11. 11. User Observations <ul><li>User carries out specific tasks while under observation </li></ul>
  12. 12. Setting Up a User Observation Session <ul><li>Choose participants </li></ul><ul><li>Select facilitator and observers (if any) </li></ul><ul><li>Prepare task description </li></ul><ul><li>Create evaluation script </li></ul><ul><li>Prepare permission form </li></ul><ul><li>Decide on how to record session </li></ul><ul><li>Pick a location </li></ul>
  13. 13. Choose participants <ul><li>Real user Vs Representative user </li></ul><ul><li>How many participants? </li></ul><ul><li>Availability of participant </li></ul>
  14. 14. Select facilitators and observers <ul><li>Facilitator </li></ul><ul><ul><li>Maintains a welcome and relaxed atmosphere </li></ul></ul><ul><ul><li>Keeps participant talking </li></ul></ul><ul><ul><li>Ensure the purpose of evaluation is fulfilled </li></ul></ul><ul><li>Observer </li></ul><ul><ul><li>- Observe testing session </li></ul></ul>
  15. 15. Prepare task description <ul><li>Decide on what function to test </li></ul><ul><li>Come up with scenarios </li></ul><ul><ul><li>1 scenario per function </li></ul></ul><ul><li>Elaborate scenarios </li></ul><ul><ul><li>Clear wordings </li></ul></ul><ul><li>Document task description </li></ul><ul><ul><li>Task card </li></ul></ul>
  16. 16. Create evaluation script <ul><li>A script used by evaluator to guide participant throughout the testing session </li></ul><ul><li>Popular components of evaluation script </li></ul><ul><ul><li>Welcome participant </li></ul></ul><ul><ul><li>Explain the evaluation and confidentiality </li></ul></ul><ul><ul><li>Perform preliminary interview </li></ul></ul><ul><ul><li>Administer tasks </li></ul></ul><ul><ul><li>Conduct exit interview </li></ul></ul><ul><ul><li>Thank the participant </li></ul></ul>
  17. 17. Prepare permission form <ul><li>Participate Consent Form </li></ul><ul><ul><li>Permission to record </li></ul></ul><ul><ul><li>Permission for use of data </li></ul></ul><ul><ul><li>Permission to share test results </li></ul></ul><ul><ul><li>- Nondisclosure agreements </li></ul></ul>
  18. 18. Recording a session <ul><li>Paper Note </li></ul><ul><li>Audio recording </li></ul><ul><li>Video recording </li></ul><ul><li>Eye tracking </li></ul>
  19. 19. Our Experience with User Observation Session
  20. 20. Choose Users <ul><li>4 faculty members </li></ul><ul><li>4 students </li></ul><ul><li>2 staff </li></ul>
  21. 21. Prepare task description <ul><li>Each user completed five tasks </li></ul><ul><ul><li>You have a citation for a journal article that you are interested in and you want to find out if the library has a copy of the journal article. </li></ul></ul><ul><ul><li>You are working on a research related to economic recession and you want to find some books that provide information on it. </li></ul></ul><ul><ul><li>You are working on a term paper and you need to cite resources used in your paper, however you have no idea on how to do citation. You want to find out if the library provides information on how to do citation. </li></ul></ul><ul><ul><li>You just recognized two of the books you checked out from the library are overdue, you want to find out how much you own in the fines. </li></ul></ul><ul><ul><li>You have some photos that you want to resize, so you want to find out if Adobe Photoshop is available on the computers at the library. </li></ul></ul>
  22. 22. Create evaluation script <ul><li>Introduction </li></ul><ul><ul><li>Welcome and explain the purpose of the usability test </li></ul></ul><ul><li>Preliminary Interview </li></ul><ul><ul><li>How much time do you normally spend on the Web in a given week? </li></ul></ul><ul><ul><li>Have you used any library website to look up information in the past? </li></ul></ul><ul><li>Evaluation Instruction </li></ul><ul><li>Task </li></ul><ul><li>Wrap Up & Brainstorm </li></ul><ul><ul><li>Additional questions you would like to ask </li></ul></ul><ul><ul><li>Invite user to provide any suggestion/comment for improvement </li></ul></ul><ul><ul><li>Express thanks to user </li></ul></ul>
  23. 23. Decide on how to record data <ul><li>Record session through video and screen capture </li></ul><ul><ul><li>- Laptop </li></ul></ul><ul><ul><li>- Webcam </li></ul></ul><ul><ul><li>- Microphone </li></ul></ul><ul><ul><li>- Camtasia Studio </li></ul></ul>
  24. 24. Testing is over, now what?
  25. 25. Data analysis and Interpretation <ul><li>Review and summarize data </li></ul><ul><ul><li>Quantitative data </li></ul></ul><ul><ul><li>Qualitative data </li></ul></ul><ul><li>Group findings </li></ul><ul><li>Assign Severities </li></ul><ul><li>Write evaluation report </li></ul>
  26. 26. Review and summarize data <ul><li>Quantitative data </li></ul><ul><ul><li>Easy to understand </li></ul></ul><ul><ul><li>More objective than qualitative data </li></ul></ul><ul><li>Qualitative data </li></ul><ul><ul><li>Provide insights into cause of problem </li></ul></ul><ul><ul><ul><li>Labels and headings not intuitive </li></ul></ul></ul><ul><ul><ul><li>Crowded, clustered, clumsy </li></ul></ul></ul><ul><ul><ul><li>Nothing stand out to me </li></ul></ul></ul>
  27. 27. Group findings <ul><li>Chronological order </li></ul><ul><li>Severity of defect </li></ul><ul><li>Type of issue </li></ul><ul><li>Difficulty of fix </li></ul>
  28. 28. Assigning Severities <ul><li>Helps to prioritize the work list </li></ul><ul><li>Severities scale varies </li></ul>Severity Rating Issue 3 Unclear link labels [Semiotics] Inconsistent overall navigation [Navigation] Information overload [Cognitive] Inefficient search function [Others] Insufficient system reaction to errors for a user [Technology/Performance] Unmatched/unexpected information [Content] 2 Contrast between text and background [Graphics] Backward navigation [Navigation] Duplicate Information [Navigation] Item not in category as expected [Navigation] Image information [Graphics] Scripting errors [Technology/Performance] Video is not able to accommodate all users [Others] 1 Grouping of left navigation bar [Navigation] Visited vs unvisited states [Navigation] Inflexible layout [Graphics] Uncertainty on currency of information [Content] Pop-up windows [Others] Unexpected file format [Others]
  29. 29. Write evaluation report <ul><li>Document what you did </li></ul><ul><li>Serves as a communication tool </li></ul>
  30. 30. Summing up our experience <ul><li>Pre-test play around </li></ul><ul><li>Different task sets </li></ul><ul><li>Wordings of task description </li></ul>
  31. 31. Helpful Readings <ul><li>Stone, Debbie, et al. User Interface Design and Evaluation . Boston: Elsevier, 2005. </li></ul><ul><li>Krug, Steve. Don’t Make Me Think . Indianapolis: New Riders, 2000. </li></ul><ul><li>Nielsen, Jakob, and Marie Tahir. Homepage Usability: 50 Websites Deconstructed . Indianapolis: New Riders, 2002. </li></ul><ul><li>Carole, George. User-Centered Library Websites . Oxford: Chandos, 2008. </li></ul>
  32. 32. Helpful Resources <ul><li>Paper Prototyping a How-To Video . Fremont: Nielsen Norman Group, 2003. </li></ul><ul><li> by Ellyssa Kroski </li></ul>
  33. 33. Questions? <ul><li>Feel free to contact me at </li></ul><ul><ul><li>Email: [email_address] </li></ul></ul><ul><ul><li>AIM: himffy </li></ul></ul><ul><ul><li>Yahoo: vincci_kwong </li></ul></ul><ul><ul><li>MSN: [email_address] </li></ul></ul><ul><ul><li>Phone: 574-520-4444 </li></ul></ul>