HUMAN COMPUTER INTERACTION

Similar documents
Lecture 10 Usability

What is interaction design? What is Interaction Design? Example of bad and good design. Goals of interaction design

HCI and Design SPRING 2016

Human-Computer Interaction: An Overview. CS2190 Spring 2010

Jakob Nielsen s Heuristics (

Chapter 10 Interactive Systems And Usability Organizational Requirements Engineering

CSSE Requirements

Interaction Design DECO1200

User Interface Evaluation

Design Heuristics and Evaluation

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

cs465 principles of user interface design, implementation and evaluation

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

Human-Computer Interaction

6 Designing Interactive Systems

Design Rules. increasing generality. increasing authority. Guide lines. Standards. increasing authority. increasing generality

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

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

6 Designing Interactive Systems

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

Hyper Mesh Code analyzer

Interaction Design. Heuristic Evaluation & Cognitive Walkthrough

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

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

Computer Systems & Application

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

User Interface Design

Heuristic Evaluation. Jon Kolko Professor, Austin Center for Design

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

What is interaction design?

Introduction to Internet Applications

Usability. HCI - Human Computer Interaction

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

What is interaction design?

Learnability of software

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

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

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

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

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

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

User Experience Report: Heuristic Evaluation

Usability Goals. September 14, 2016

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

Interaction Design. Task Analysis & Modelling

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

Heuristic Evaluation

HEURISTIC EVALUATION WHY AND HOW

CogSysIII Lecture 9: User Modeling with GOMS

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

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

USER INTERFACE DESIGN + PROTOTYPING + EVALUATION Interface Hall of Fame or Shame?

What is interaction design?

User-Centered Design. Jeff Bos, Design Insights BlackBerry

Gleanings Ch 5, 6, 7. Design Naviga3on Organiza3on and layout

USABILITY, ACCESSIBILITY, ACCEPTABILITY

Chapter 1: What is interaction design?

iscreen Usability INTRODUCTION

Heuristic Evaluation of Covalence

Introduction to Human-Computer Interaction

USERINTERFACE DESIGN & SIMULATION. Fjodor van Slooten

Crab Shack Kitchen Web Application

Interface Design Issues Lecture 8

SBD:Interaction Design

This quiz is closed book, closed notes. You have 80 minutes to complete it. Your name:

MIT GSL week 4 Wednesday. User Interfaces II

Usability and User Interface Design

Heuristic Evaluation Gempots.com

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

USER INTERFACE DESIGN

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

By: I-Chen Lin, Assistant Professor

Heuristic Evaluation of NUIG Participate Module 1

15/16 CSY2041 Quality and User-Centred Systems

Interaction design. The process of interaction design. Requirements. Data gathering. Interpretation and data analysis. Conceptual design.

CS 147: dt+ux Design Thinking for User Experience Design, Prototyping & Evaluation November 3, 2015

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

Lecture 7 Interaction Fundamentals

USERINTERFACE DESIGN & SIMULATION. Fjodor van Slooten

1/24/2018. User Interface Design CSC 4700 Software Engineering

Why User Interface Design? What

This tutorial has been intended for the users willing to take the human computer interactions as a next level of study in their career.

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

Lecture 22: Heuristic Evaluation. UI Hall of Fame or Shame? Spring User Interface Design and Implementation 1

HCI+D: USER INTERFACE DESIGN + PROTOTYPING + EVALUATION! Interface Hall of Fame or Shame?!

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

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

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

Whirlwind Tour Of Human-Computer Interaction

Lose It! Weight Loss App Heuristic Evaluation Report

Heuristic Evaluation of Enable Ireland

HUMAN- COMPUTER INTERFACE DESIGN. What is a model? Why modelling? 24/10/2008. Human-Computer Interface Design. M C ESCHER - Relativity

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

Additional reading for this lecture: Heuristic Evaluation by Jakob Nielsen. Read the first four bulleted articles, starting with How to conduct a

SE 542 Human Computer Interaction. Spring Week #5

Analytical Evaluation

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

User-Centered Design Process

Sri Vidya College of Engineering & Technology Question bank (unit 2) UNIT 2 TWO MARKS

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

Transcription:

HUMAN COMPUTER INTERACTION 3. USABILITY AND CONCEPTUAL MODEL I-Chen Lin, National Chiao Tung University, Taiwan

"One most unfortunate product is the type of engineer who does not realize that in order to apply the fruits of science for the benefit of mankind, he must not only grasp the principles of science, but must also know the needs and aspirations, the possibilities and the frailties, of those whom he would serve." -- Vannevar Bush Reference and many slides courtesy of James Landay, CS, UC Berkeley, "User Interface Design, Prototyping, and Evaluation Terry Winograd, CS, Stanford, "Introduction to Human Computer Interaction Design J. Preece, Y. Rogers, and H. Sharp, Interaction Design beyond Human Computer Interaction,.John Wiley & Sons, 2002. D. Stone, et al., User Interface Design and Evaluation, Morgan Kaufmann Publishers.

User-centered Iterative Design Developers working with target users Think of the world in users terms Identify usability and user experience goals Understanding work process Not technology-centered/feature driven Iterate at every stage Prototype Design Evaluate

Objectives of Usability Chapter The goals of interaction design Understand when and how design tradeoffs are made Have a first-level knowledge of the major concepts in usability and their associated guidelines

Usability Goals Effective to use (effectiveness) General goals Efficient to use (efficiency) E.g. number of steps, one-click option Safe to use (safety) Preventing users from serious errors. Recovery functions [e.g. undo ]

Usability Goals (cont.) Have good utility (utility) With powerful tools Easy to learn (learnability) E.g. Tutorials 10-minute rules (Nelson, 1980) Dependent on frequency of usages, complexity of tasks, etc.

Maya interfaces, http://www.pixtur.de

Usability Goals (cont.) Easy to remember how to use (memorability) E.g. meaningful icons, command names, These goals can be in conflict with one another!

User Experience Goals Satisfying Enjoyable Fun Entertaining Helpful Motivating Aesthetically pleasing Supportive of creativity Rewarding Emotionally fulfilling These can be hard to evaluate! Some combinations will also be incompatible

Heuristics "Eight Golden Rules of Interface Design" [Shneiderman] 1. Strive for consistency. 2. Enable frequent users to use shortcuts. 3. Offer informative feedback. 4. Design dialog to yield closure. 5. Offer simple error handling. 6. Permit easy reversal of actions. 7. Support internal locus of control. 8. Reduce short-term memory load.

10 Usability Principles [Nielsen] 1. Visibility of system status 2. Match between system and the real world Speak the users language 3. User control and freedom Emergency exits?! 4. Consistency and standards Tabbed dialog for setting options in MS Web Studio Inconsistent display of possible tabs

10 Usability Principles [Nielsen] 5. Help users recognize, diagnose, and recover from errors Good error messages 6. Error prevention 7. Recognition rather than recall 8. Flexibility and efficiency of use Invisible to novice users but for experienced users E.g. shortcuts

10 Usability Principles [Nielsen] 9. Aesthetic and minimalist design Avoid irrelevant information 10. Help and documentation

Principles for Transforming Difficult Tasks into Simple Ones [Norman] 1. Use both knowledge in the world and knowledge in the head 2. Simplify the structure of tasks 3. Make things visible 4. Get the mappings right

Principles for Transforming Difficult Tasks into Simple Ones [Norman] 5. Exploit the power of constraints 6. Design for error 7. When all else fails, standardize

Design Tradeoffs How can dimensions be evaluated together? Defined in context of users and tasks Require clear consensus on priorities Can we violate one to satisfy another? e.g., Consistency/efficiency

Design Guidelines Meet the Real World Design organizations and their cultures Different assumptions about users and goals History and legacy Conflicting priorities External constraints and regulations Don t be so quick to assume that bad designs are the result of ignorance or stupidity

Usability & Our Project 1 Eyetoy games, PS2 Interactive games usually have to fulfill user experience goals. Usability goals are also important in initiation, game stages, etc.

Objectives of Ch. Conceptual Model Conceptualize interaction design before trying to build anything. Understand the need for a clear conceptual model in interface design Be able to analyze and create appropriate models for specific applications. Understand the use of metaphors in designing interfaces Be able to choose them appropriately

Conceptual Models In interacting with any system (software or others), a person has a concept of what the system is: what its components are, what properties they have, and what interactions they can enter into... This conceptual model underlies the more specific aspects of interface, such as screen representations and command structures.

Conceptual Models based on Activities (Instructing) 1. Instructing E.g. Commands in DOS or Unix. E.g. Control keys, menu options in windows. Benefits: quick and efficient for repetitive actions. Have to avoid remembering a large set of command names.

Conceptual Models based on Activities (Conversing) 2. Conversing E.g. help facilities, search engines, etc. E.g. Voice or natural language based system Benefits: friendly for novices Drawbacks: Misunderstanding (for NLP) Repetition and inefficiency (e.g. phonebased systems) Too much expectation (e.g. intelligent or animated agents.)

Conceptual Models based on Activities (Manipulation) 3. Manipulation and navigation Exploiting users knowledge of how they do this in the physical world. Properties Continuous representation of objects and actions. Immediate feedback. Physical actions instead of issuing commands. Virtual Sculpting, CMLab

Conceptual Models based on Activities (Manipulation) 3. Manipulation and navigation Benefits: Learning basic functions rapidly Easily remembering how to use Usually no error messages Immediate responses Users feel in control Flight Simulator X, Microsoft Fig from: wiki Drawbacks: Expecting reactions like the physical ones. GT5, PS3 game Fig from:http://www.techorz.com

Conceptual Models based on Activities 4. Exploring and browsing (based on activities) E.g. CD-ROMs, web pages, etc. Conceptual Models based on objects Focusing on a particular objects. E.g. spreadsheet (Excel)

Conceptual Models Mental representation of how object works & how interface controls affect it People have preconceived models that you may not be able to change dragging to trash? deletes (eject disk a bad idea!) Visual Clues (affordances)

Design Model & User s Model Design Model User s Model System image Customers get model from experience & usage through system image

Design Guides Provide good conceptual model customers want to understand how UI controls impact object Make things visible if object has function, interface should show it Map interface controls to customer s model infix -vs- postfix calculator -- whose model? Provide feedback what you see is what you get!

Metaphors A metaphor implies many elements of the model to a user who is familiar with the metaphorical object (e.g., a physical desktop) In general a model requires more learning without metaphors to which users can anchor it to their previous experience.

Example Metaphors

Misused Metaphors Direct translations Software CD player that requires turning volume knob with the mouse Software telephony solution that requires the user to dial a number by clicking on a simulated keypad Airline web site that simulates a ticket counter!

Quicktime 4.0

Conceptual Models & Our Project 1 Eyetoy games, PS2 Game stages should belong to direct manipulation. Continuous & immediate response, etc. Conceptualizing the interaction.