Human-Computer Interaction

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

Usability. HCI - Human Computer Interaction

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

HUMAN COMPUTER INTERACTION

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

HCI and Design SPRING 2016

User Interface Evaluation

Design Heuristics and Evaluation

Jakob Nielsen s Heuristics (

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

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

cs465 principles of user interface design, implementation and evaluation

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

Computer Systems & Application

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

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

Chapter 10 Interactive Systems And Usability Organizational Requirements Engineering

Heuristic Evaluation. Jon Kolko Professor, Austin Center for Design

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

Introduction to Usability and its evaluation

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

Assistant Professor Computer Science. Introduction to Human-Computer Interaction

Human-Computer Interaction IS 4300

Hyper Mesh Code analyzer

Craigslist Heuristic Evaluation

Learnability of software

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

UX Design Principles and Guidelines. Achieve Usability Goals

CS5340 Human-Computer Interaction.! February 21, 2013!!

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

Interaction Design DECO1200

Introduction to Internet Applications

Heuristic Evaluation of NUIG Participate Module 1

iscreen Usability INTRODUCTION

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

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

Heuristic Evaluation

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

User Experience Report: Heuristic Evaluation

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

Heuristic Evaluation of [ Quest ]

Lecture 10 Usability

Human-Computer Interaction: An Overview. CS2190 Spring 2010

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

Interaction Design. Heuristic Evaluation & Cognitive Walkthrough

Mensch-Maschine-Interaktion 1. Chapter 2 (May 12th, 2011, 9am-12pm): Basic HCI principles 1

Lose It! Weight Loss App Heuristic Evaluation Report

Adapted from: The Human Factor: Designing Computer Systems for People, Rubinstein & Hersh (1984) Designers make myths. Users make conceptual models.

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

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

Usability and User Interface Design

User Interface Design

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

UI Evaluation: Cognitive Walkthrough. CS-E5220 User Interface Construction

Severity Definitions:

Heuristic Evaluation of [Slaptitude]

Heuristic Evaluation of Enable Ireland

Plenty to choose from. Help designers choose design alternatives Help evaluators find problems in interfaces (heuristic evaluation)

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

Nektarios Kostaras, Mixalis Xenos. Hellenic Open University, School of Sciences & Technology, Patras, Greece

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

CSSE 574 Intro to Usability Bass s perspective and the ID book s perspective

CogSysIII Lecture 9: User Modeling with GOMS

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

An Introduction to Human Computer Interaction

User-Centered Design. Jeff Bos, Design Insights BlackBerry

M150 -B / Unit 12. By Wawi. A good user interface design enables the user to effectively interact with the system and perform his tasks.

The Interaction. Dr. Karim Bouzoubaa

Crab Shack Kitchen Web Application

The Interaction. Using Norman s model. Donald Norman s model of interaction. Human error - slips and mistakes. Seven stages

Heuristic Evaluation of Covalence

1. The Best Practices Section < >

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

What is interaction? communication user system. communication between the user and the system

Heuristic Evaluation Gempots.com

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

USERINTERFACE DESIGN & SIMULATION. Fjodor van Slooten

Human-Computer Interaction IS4300

Human Factors / User Interface Design Guidelines. Slides adapted from Craig Zilles

Site Design. SWE 432, Fall 2017 Design and Implementation of Software for the Web

UX DESIGN BY JULIA MITELMAN

Heuristic Evaluation of Math Out of the Box

Usability. CSE 331 Spring Slides originally from Robert Miller

SE 542 Human Computer Interaction. Spring Week #5

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

Evaluation Plan for Fearless Fitness Center Website

Interaction Techniques. SWE 432, Fall 2016 Design and Implementation of Software for the Web

Interaction Design. Task Analysis & Modelling

Designing Usable Apps

Analytical Evaluation

Usability analysis and inspection

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

Applying Usability to elearning

SE 705 Human Computer Interaction. Week #5

USER INTERFACE DESIGN

COMP 388/441 HCI: 07 - Menu Selection, Forms, and Dialog Boxes Menu Selection, Forms, and Dialog Boxes

3 Prototyping and Iterative Evaluations

DESAIN. User-Centered Design Design is based on user s Tasks Abilities Needs Context. Mantra: Know the user!

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

Users and Usability Principles

Transcription:

Human-Computer Interaction

The Trouble With Computers (and other computer-based devices) 2

The Trouble With Computers (and other computer-based devices) Confusion Panic Boredom Frustration Inefficient use of system Underutilization of system Task modification Compensatory actions (work-arounds) Misuse Damage Injury Death etc. 3

Riddle Why is a user interface is like a joke? 4

Design Criteria For Usable Software (Usability Attributes) Effectiveness (Accuracy) Accuracy & completeness to reach goals. Efficiency Accuracy/completeness vs. resources expended User Satisfaction User's comfort & positive attitude toward use. Learnability Ease of learning Memorability Ease of remembrance, return 5

Understand-Design-Evaluate vs. HMSE Process Understand Evaluate Design 6

Designing For Different Categories of Users Novices Know tasks Don't know system Design: Focus on ease of learning, low reliance on memory. Knowledgeable Intermittent Users Know tasks Infrequent use leads to forgetting Design: Reduce memory load. Expert Frequent Users Deep knowledge of tasks, goals, actions. Design: Map information & mechanisms onto task. 7

Norman's Seven Stages of Action 1. Goal 2. Intention to carry out actions 3. Action Specification ( action sequence) 4. Interface Mechanism Gulf of Execution/Evaluation 5. Interface Display 6. Interpretation 7. Evaluation Execution Evaluation 8

Design To Support Mental Models Make invisible things visible. Provide feedback. Be consistent. Use familiar metaphors. (But over-reliance on metaphor may obscure possibilities.) 9

General UI Design Principles Wickens et al (2004, p. 398) Match between system and real world Speak the user's language. Use familiar conceptual models and/or metaphors. Follow real-world conventions. Map cues onto user's goals. Consistency and standards Express the same thing the same way throughout. Use color coding uniformly. Use a uniform input syntax (same actions/functions) Functions should be logically grouped, consistent. Conform to platform interface standards. 10

General UI Design Principles Wickens et al (2004, p. 398) Visibility of system status Keep user informed about what goes on (status info). Show that input has been received. Provide timely feedback for all actions. Indicate progress in task performance. Use direct manipulation: visible objects/results. User control and freedom Forgiveness: obvious way to undo, cancel, redo. Clearly marked exits. Allow user to initiate/control actions. Avoid modes, when possible. 11

General UI Design Principles Wickens et al (2004, p. 398) Error prevention, recognition, and recovery Prevent errors from occurring in the first place. Help users recognize, diagnose, and recover from errors. Use clear, explicit error messages. Memory Use see-and-point instead of remember-and-type. Make the repertoire of available actions salient. Provide lists of choices and picking from lists. Direct manipulation: visible objects, visible choices. 12

General UI Design Principles Wickens et al (2004, p. 398) Flexibility and efficiency of use Provide shortcuts and accelerators. Give user options to speed up frequent actions. Make system efficient to use. Simplicity and aesthetic integrity Things should look good, with simple graphic design. Use simple and natural dialog; eliminate extraneous words, graphics. All information should appear in a natural, logical order. 13

More UI Guidelines 14

W o r l d (Situation) Attend System / Device Stimuli Observe: Sense & Perceive Think: System 1/System 2 Act Responses Remember Device Awareness Device Mental Model Working Memory Situation Awareness Other Mental Models Other Declarative & Procedural Knowledge Long-Term Memory Attend-Observe-Remember-Think-Act Flow 15

W o r l d (Situation) Attend System / Device Stimuli Observe: Sense & Perceive Think: System 1/System 2 Act Responses Remember Device Awareness Device Mental Model Working Memory Situation Awareness Other Mental Models Other Declarative & Procedural Knowledge Long-Term Memory Attend-Observe-Remember-Think-Act Flow User Interface Guidelines Displays Awareness Situation Awareness System/Device Awareness Guidance Feedback Options & Means Controls Ergonomics 16

More UI Guidelines Displays Make display representations accessible, legible, & meaningful. Make representation salient in proportion to their frequency of use and immediate importance & urgency. Apply the 13 Principles of Display Design. Awareness Situation Provide relevant situation information via representations located in consideration of its frequency of use and immediate importance & urgency. System/Device Keep the user informed of the S/D's current state & function. Options & Means Inform the User of what can be done with/to the S/D & how to do it. Guidance Provide additional guidance information, especially for complex procedures. Controls Apply HF principles of control design, selection, placement, & orientation. Feedback Inform the User of what he/she has just done & what the S/D is doing in response. Ergonomics Design & locate controls & affordances in consideration of smallest & largest Users. Design/select controls & affordance so as to minimize the risk of musculoskeletal disorders from sustained use.

User Interface Evaluation Heuristic Evaluation Design specifications/mockups/prototypes Usability expert(s) Usability guidelines/checklists (earlier slides) Usability Testing Mockups/prototypes Representative users (3 6) Usability metrics: effectiveness, efficiency, user satisfaction, learnability, memorability Observation & data collection Usability questionnaires 18

'SUS - A quick and dirty usability scale' System Usability Scale John Brooke, Redhatch Consulting Ltd. 19

System Usability Scale 20

System Usability Scale 21

SUS Scores Scoring 1.Score answers 1, 3, 5, 7, 9 (positive questions): answer - 1 2.Score answers 2, 4, 6, 8, 10 (negative questions): 5 answer 3.Sum the scores 4.Multiply the sum by 2.5 5.Gives score in range 0 100. Mean score (over many UIs): 68 22

Post Study Sytem Usability Questionnaire (PSSUQ) 23

PSSUQ PSSUQ score is mean of the 19 answers. 24

Some Other Usability Questions Adapted from W3C's WAI Site Usability Testing Questions: http://www.w3.org/wai/eo/drafts/ucd/questions.html What are your overall impressions of the system? If you had to give the system a grade, from A to F, where A was exemplary and F was failing, what grade would you give it, and why? Name three words or characteristics that describe this system. What are the three things you like best about the system? What are the three things you like least about the system? If you could make one significant change to this system, what change would you make? Would you recommend this system to a colleague? To a friend? Do you have any other questions or comments about the system or your experiences with it? 25

Some More Usability Questions What are the three best things about this UI? What are the three worst things about this UI? What should we do to improve it? 26