HCI and Design SPRING 2016

Similar documents
Assignment 5 is posted! Heuristic evaluation and AB testing. Heuristic Evaluation. Thursday: AB Testing

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation

USER INTERFACE DESIGN + PROTOTYPING + EVALUATION. Heuristic Evaluation. Prof. James A. Landay University of Washington CSE 440

Heuristic Evaluation. Hall of Fame or Shame? Hall of Fame or Shame? Hall of Fame! Heuristic Evaluation

Heuristic Evaluation! Hall of Fame or Shame?! Hall of Fame or Shame?! Hall of Fame or Shame?! Hall of Fame!!

CS 160: Evaluation. Outline. Outline. Iterative Design. Preparing for a User Test. User Test

CS 160: Evaluation. Professor John Canny Spring /15/2006 1

CO328- Human Computer Interaction Michael Kölling Caroline Li. Heuristic Evaluation

Design Heuristics and Evaluation

Jakob Nielsen s Heuristics (

User Interface Evaluation

Heuristic Evaluation. Jon Kolko Professor, Austin Center for Design

User Experience Report: Heuristic Evaluation

1. Select/view stores based on product type/category- 2. Select/view stores based on store name-

Design Reviews. Scott Klemmer. stanford hci group / cs147. tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano

iscreen Usability INTRODUCTION

Assistant Professor Computer Science. Introduction to Human-Computer Interaction

HEURISTIC EVALUATION WHY AND HOW

Heuristic Evaluation. Ananda Gunawardena. Carnegie Mellon University Computer Science Department Fall 2008

Computer Systems & Application

Lose It! Weight Loss App Heuristic Evaluation Report

Page 1. Ideas to windows. Lecture 7: Prototyping & Evaluation. Levels of prototyping. Progressive refinement

Heuristic Evaluation

Due on: May 12, Team Members: Arpan Bhattacharya. Collin Breslin. Thkeya Smith. INFO (Spring 2013): Human-Computer Interaction

Craigslist Heuristic Evaluation

Crab Shack Kitchen Web Application

Chapter 10 Interactive Systems And Usability Organizational Requirements Engineering

Usability. Daniela Rosner. Web Architecture, October 9, School of Information UC Berkeley

Interaction Design. Heuristic Evaluation & Cognitive Walkthrough

Usability in Multimedia. By Pınar Koçer Aydın and Özgür Bayram

Heuristic Evaluation of NUIG Participate Module 1

Usability Inspection Methods. Overview. Usability Measures. SMD157 Human-Computer Interaction Fall 2003

cs465 principles of user interface design, implementation and evaluation

Heuristic Evaluation of Enable Ireland

Hyper Mesh Code analyzer

Heuristic Evaluation. Heuristic evaluation evaluates the interface to identify usability problems against recognized usability design heuristics.

Introduction to Internet Applications

Software Quality. Martin Glinz. Thomas Fritz. Lecture 7 UI Design, Usability & Testing. Many thanks to Meghan Allen and Daniel Greenblatt.

IPM 10/11 T1.6 Discount Evaluation Methods

Heuristic Evaluation of [ Quest ]

CogSysIII Lecture 9: User Modeling with GOMS

Usability & User Centered Design. SWE 432, Fall 2018 Design and Implementation of Software for the Web

Heuristic evaluation is a usability inspection technique developed by Jakob Nielsen. The original set of heuristics was derived empirically from an

Heuristic Evaluation of Math Out of the Box

UX DESIGN BY JULIA MITELMAN

Group #: Evaluation Proposal For Digital Libraries, LIS 5472, Fall 2010, Professor Sanghee Oh

15/16 CSY2041 Quality and User-Centred Systems

User-Centered Design. SWE 432, Fall 2017 Design and Implementation of Software for the Web

Heuristic Evaluation of igetyou

Heuristic Evaluation of [Slaptitude]

Usability. HCI - Human Computer Interaction

evaluation techniques goals of evaluation evaluation by experts cisc3650 human-computer interaction spring 2012 lecture # II.1

1. The Best Practices Section < >

Analytical &! Empirical Evaluation

1. Problem Mix connects people who are interested in meeting new people over similar interests and activities.

SFU CMPT week 11

CS 147 Autumn 2017: Assignment 9 (Heuristic Evaluation Group Template) Instructor: James Landay. Fix: make web also block the desktop screen.

Usability analysis and inspection

Why? Usability analysis and inspection. Evaluation. Evaluation. Measuring usability. Evaluating usability

Heuristic Evaluation of Covalence

Analytical Evaluation

MIT GSL week 4 Wednesday. User Interfaces II

A Heuristic Evaluation of Ohiosci.org

Heuristic Evaluation of MPowered Entrepreneurship s Slack Workspace. Presented By Dylan Rabin. SI 110 Section 003

CS 544 Discount Usability Engineering

Overview of Today s Lecture. Analytical Evaluation / Usability Testing. ex: find a book at Amazon.ca via search

CMSC434 Intro to Human-Computer Interaction. Visual Design #3 and Evaluation #1 Monday, April 8th, 2012 Instructor: Jon Froehlich TA: Kotaro Hara

Chapter 15: Analytical evaluation

User Experience Design

Applying Usability to elearning

Introduction to Usability and its evaluation

HUMAN COMPUTER INTERACTION

Analytical evaluation

activated is a platform that allows students to create, organize, and share the steps on their road to college.

Wikitude Usability testing and heuristic evaluation

dt+ux: Design Thinking for User Experience Design, Prototyping & Evaluation!

Heuristic Evaluation of PLATELIST

Design Principles. Overview. User-Center Design. SMD157 Human-Computer Interaction Fall User-center design Guidelines

Design Principles. Overview. User-Center Design. SMD157 Human-Computer Interaction Fall User-center design Guidelines

Addition about Prototypes

User Experience Research Report: Heuristic Evaluation

Übung zur Vorlesung Mensch-Maschine-Interaktion. e5: Heuristic Evaluation

Evaluation of Interactive Systems. Inspection methods

Evaluating the Design without Users. A formalized way of imagining people s thoughts and actions when they use an interface for the first time

Introduction to Human-Computer Interaction

Introducing Evaluation

How to Conduct a Heuristic Evaluation

SEPA diary Heuristic evaluation

Interaction Design. Human-Computer. COGS120/CSE170 - Intro. HCI. Instructor: Philip Guo. Week 3 - Heuristic Evaluation ( )

E2: Heuristic Evaluation A usability analysis of decorativethings.com. Jordana Carlin LIS Spring 2014

Lecture 14: Heuristic Evaluation. Fall UI Design and Implementation 1

Evaluation in Information Visualization. An Introduction to Information Visualization Techniques for Exploring Large Database. Jing Yang Fall 2005

User-Centered Design. Jeff Bos, Design Insights BlackBerry

Interaction Design DECO1200

Expert Evaluations. November 30, 2016

Human-Computer Interaction

Heuristic Evaluation

Human-Computer Interaction: An Overview. CS2190 Spring 2010

PROJECT 1. Heuristic Evaluation and Cognitive Walkthrough of Goroo.com

Transcription:

HCI and Design SPRING 2016

Topics for today Heuristic Evaluation 10 usability heuristics How to do heuristic evaluation Project planning and proposals

Usability Testing Formal usability testing in a lab Performed with participants representative of the target population Pros: Reveals more problems than other methods Finds global problems Finds unique problems Cons: Time- intensive / Expensive Does not detect local/minor problems well Target population may be difficult to define

Discount Usability Methods Heuristic evaluation: Helps find usability problems in a design Term coined by Jakob Nielsen Guerilla HCI (1994) http://www.useit.com/papers/guerrilla_hci.html Reaction to recommended usability engineering methods (expensive, intimidating) 10 principles Small set (3-5) of evaluators examine interface independently check compliance with principles different evaluators will find different problems evaluators only communicate afterwards Can be done on working interfaces or sketches

Nielsen s 10 heuristics (1994) Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help recognize, diagnose, and recover from errors Help and documentation

1. Visibility Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. Refers to both visibility of system status and use of feedback. Anytime wondering what state the system is in, or the result of some action, this is a visibility violation.

1. Visibility Pay attention to response time 0.1 sec: no special indicators needed 1.0 sec: user tends to lose track of data 10 sec: maximum duration if user to stay focused on action longer delays absolutely require percent- done progress bars searching database for matches

2. Real world match Match between system and the real world The system should speak the users language, with words, phrases and concepts familiar to the user, rather than system- oriented terms. Follow real- world conventions, making information appear in a natural and logical order. Refers to word and language choice, conceptual model, metaphor, mapping, and sequencing.

2. Real world match Mailto, protocol? Match system to real world Speak the user s language Mac desktop Dragging disk to trash should delete, not eject it Match system to real world Speak the user s language Follow conventions

3. User control and freedom Users often choose system functions by mistake and will need a clearly marked emergency exit to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

3. User control and freedom Don t force users down fixed paths Wizards must respond to question before going to next good for beginners, infrequent tasks not for common tasks

4. Consistency and Standards Users should not have to wonder if different words, situations, or actions mean the same thing. Follow platform conventions. Internal consistency is consistency throughout the same product. External consistency is consistency with other products in its class.

4. Consistency and Standards

5. Error prevention Even better than good error messages is a careful design that prevents a problem from occurring in the first place. Either eliminate error- prone conditions or check for them and present users with a confirmation option before they commit to the action. Try to commit errors and see how they are handled. Could they have been prevented?

5. Error prevention

6. Recognition not recall People should never carry a memory load Obvious exception: passwords (but can be lessened ) Minimize the user s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. Problems with affordances often go here

7. Flexibility and efficiency Cater to inexperienced and experienced users. Accelerators (e.g., keyboard shortcuts) may speed up interaction for expert users Allow users to tailor frequent actions (e.g., macros). Concerns anywhere users have repetitive actions that must be done manually. Also allows multiple ways to do things.

8. Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information competes with relevant units of information and diminishes their relative visibility. Not just about ugliness but about clutter, overload of visual field, visual noise, distracting animations, etc.

9. Error recovery Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes) Precisely indicate the problem, and suggest a solution. Error prevention (#5) is about preventing errors before they occur. This is about after they occur.

10. Help and documentation Even though it is better if the system can be used without documentation, it is also often necessary to provide help and documentation. Any information should be easy to search, focused on the user s task, list concrete steps to be carried out, and not be too large. This does not mean that the user must be able to ask for help on every single item.

10 heuristics Visibility of system status Match between system and the real world User control and freedom Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help recognize, diagnose, and recover from errors Help and documentation

How to Perform Heuristic Evaluation Evaluators go through interface several times inspect various dialogue elements compare with list of usability principles consider other principles/results that come to mind Use violations to redesign/fix problems

Phases of Heuristic Evaluation 1) Pre- evaluation training give expert evaluators needed domain knowledge & information on the scenario 2) Evaluation individuals evaluate interface and make lists of problems 3) Severity rating determine how severe each problem is 4) Aggregation group meets and aggregates problems (w/ severity ratings) 5) Debriefing discuss the outcome with design team

How to Perform Heuristic Evaluation At least two passes for each evaluator first to get feel for flow and scope of system second to focus on specific elements If system is walk- up- and- use or evaluators are domain experts, no assistance needed otherwise might supply evaluators with scenarios Each evaluator produces list of problems explain why with reference to heuristic or other information be specific & list each problem separately

How to Perform Heuristic Evaluation Why separate listings for each violation? risk of repeating problematic aspect may not be possible to fix all problems Where problems may be found single location in interface two or more locations that need to be compared problem with overall structure of interface something that is missing common problem with paper prototypes sometimes features are implied by design documents and just haven t been implemented relax on those

Severity Rating Used to allocate resources to fix problems Combination of frequency, impact, persistence (one time or repeating) Should be calculated after all evaluations are in Should be done independently by all evaluators Rating: 0 - don t agree that this is a usability problem 1 - cosmetic problem 2 - minor usability problem 3 - major usability problem; important to fix 4 - usability catastrophe; imperative to fix

Severity Ratings Example [Consistency] [Severity 3] The interface used the string "Save" on the first screen for saving the user's file, but used the string "Write file" on the second screen. Users may be confused by this different terminology for the same function. Severity 3 - major usability problem;; important to fix

Why Multiple Evaluators? Every evaluator doesn t find every problem Good evaluators find both easy and hard problems Single evaluator achieves poor results only finds 35% of usability problems 5 evaluators find ~ 75% of usability problems why not more???? 10? 20? adding evaluators costs more and won t find more problems

Debriefing Conduct with evaluators, observers, and team members Discuss general characteristics of interface Suggest improvements to address major usability problems Development team rates how hard to fix Make it a brainstorming session

Heuristic Evaluation vs. Usability Testing Heuristic evaluation is much faster 1-2 hours each evaluator vs. days- weeks Heuristic evaluation doesn t require interpreting user s actions User testing is more accurate (by definition) Takes into account actual users and tasks Heuristic Evaluation may miss problems & find false positives Good to alternate between heuristic evaluation & user testing Find different problems Don t waste participants

Heuristic Evaluation Summary Evaluators examine interface against a set of guidelines Normally performed by a team of three to five experts Rate individually, form consensus Can be performed on early designs, mockups, prototypes, products Much cheaper than usability experiments Reasonably effective 1 expert 40% of errors, 2: 50%, 3: 60%, 5: 80%

Next time No class on Tuesday (Feb break) Work on your project proposals (due Feb 18 th ) Check slack for updates on next class