54
Human-Computer Interaction Course 2014: Lecture 3 Lora Aroyo Web & Media Group HCI Design Chapters 5, 9-11, 13-14

Lecture 3: Human-Computer Interaction: HCI Design (2014)

Embed Size (px)

DESCRIPTION

This is the third lecture of the HCI bachelor course at the VU University Amsterdam

Citation preview

Page 1: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Lora Aroyo Web & Media Group

HCI Design Chapters 5, 9-11, 13-14

Page 2: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Interaction Design Concepts

•  Design principles •  Affordance, Constraints, and Mapping •  Feedback •  Visibility •  Conceptual models •  Other factors:

–  transfer effects –  cultural associations –  individual differences

Lora Aroyo, Web & Media Group 2

Page 3: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Four psychological Principles

1.  Users See What They Expect to See

2.  Users Have Difficulty Focusing on More than One Activity at a Time

3.  It Is Easier to Perceive a Structured Layout

4.  It Is Easier to Recognize Something than to Recall It

Lora Aroyo, Web & Media Group 3

Page 4: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Principle 1

User’s confusions with the UI:

consistency

exploiting prior knowledge see what they want to see

Lora Aroyo, Web & Media Group 4

people don’t read

Page 5: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Principle 2

Users Have Difficulty Focusing on More Than One Activity at a Time

–  The Cocktail Party Effect

•  Principle of Perceptual Organization – Group alike things together

•  Principle of Importance –  Prominent display for important items

Lora Aroyo, Web & Media Group 5

Page 6: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Principle 3

It Is Easier to Perceive a Structured Layout

•  Law of proximity •  Law of similarity •  Law of closure •  Law of continuity •  Law of symmetry

Lora Aroyo, Web & Media Group 6

Page 7: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Principle 4

It Is Easier to Recognize Something Than to Recall It

•  Principle of recognition •  Knowledge in the head & Knowledge in the

world

Lora Aroyo, Web & Media Group 7

Page 8: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Principles from Experience: Affordance

The Principle of Affordance: –  It Should Be Obvious How a Control Is Used

Lora Aroyo, Web & Media Group 8

Page 9: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Affordances

•  The perceived and actual fundamental properties of the object that determine how it could possibly be used (Gibson 1977)

•  Some affordances are obvious, some learned •  Have suggestions or clues about to how to use these

properties •  Can be dependent on the

–  Experience –  Knowledge –  Culture of the actor

•  Can make an action easy or difficult

Lora Aroyo, Web & Media Group 9

Page 10: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Affordances of a Teapot?

Lora Aroyo, Web & Media Group 10

Page 11: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Based on slide by Saul Greenberg

In graphical, screen-based interfaces: –  designer has control over perceived affordances

•  display screen •  pointing device •  selection buttons •  keyboard

–  afford touching –  pointing –  looking –  clicking on every pixel of the display

Affordances in Screen-based UI

Lora Aroyo, Web & Media Group 11

Page 12: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Constraints

•  Restricting interaction to reduce errors

Lora Aroyo, Web & Media Group 12

Page 13: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Mappings

•  Relationships between controls and their results •  For devices, appliances

–  natural mappings use constraints and correspondences in the physical world

•  Controls on a stove •  Controls on a car

–  Radio volume »  Knob goes left to right to control volume »  Should also go in and out for front to rear speakers

•  For computer UI design –  mapping between controls and their actions on the computer

•  Controls on a digital watch •  Controls on a word processor program

Lora Aroyo, Web & Media Group 13

Page 14: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Slide adapted from Saul Greenberg

Mapping Controls to Physical Outcomes

back right

front left

back left

front right

24 possibilities, requires: -visible labels -memory

arbitrary full mapping

back

front

front back

2 possibilities per side =4 total possibilities

paired

Page 15: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Based on slide by Saul Greenberg

Transfer Effects

People transfer their expectations from familiar objects to similar new ones

–  positive transfer: previous experience applies to new situation

–  negative transfer: previous experience conflicts with new situation

Page 16: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Visibility •  Making it obvious which actions are available

Consistency

•  Similar functions are performed in the same way •  Identical terminology for identical operations

Feedback

•  Send information about what is happening back to the user

Lora Aroyo, Web & Media Group 16

Page 17: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Feedback

The Principle of Feedback: –  It Should Be Obvious When a Control Has Been Used

Lora Aroyo, Web & Media Group 17

Page 18: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Feedback and Explanations

Lora Aroyo, Web & Media Group 18

Page 19: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

From Bad to Better

Lora Aroyo, Web & Media Group 19

Page 20: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Feedback

Lora Aroyo, Web & Media Group 20

Page 21: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

The Principle of Visibility: –  It Should Be Obvious What a Control Is Used For

Visibility (perceived affordance)

Lora Aroyo, Web & Media Group 21

Page 22: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Consistency

Uniformity in appearance, placement, and behavior

Lora Aroyo, Web & Media Group 22

Page 23: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Structure & Consistency

Lora Aroyo, Web & Media Group 23

Page 24: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Page 25: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Cultural Associations

•  Groups of people learn idioms –  red = danger, green = go

•  But these differ in different places –  Light switches

•  America: down is off •  Britain: down is on

–  Faucets •  America: counter-clockwise is on •  Britain: counter-clockwise is off

Lora Aroyo, Web & Media Group 25

Page 26: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Metaphors

Lora Aroyo, Web & Media Group 26

Page 27: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Metaphors

Lora Aroyo, Web & Media Group 27

Facebook Timeline

Bookmark

Page 28: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

What’s Wrong?

Mapping – we’d expect to go off, low, high Feedback – when lamp is on, hard to tell from switch position whether it’s in low or high mode

Lora Aroyo, Web & Media Group 28

Page 29: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

What’s Wrong?

Lora Aroyo, Web & Media Group 29

Page 30: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

What’s Wrong?

CONSISTENCY: Different procedure for setting different intervals of time. FEEDBACK: When timer is at a time under 15 minutes, hard to tell if it’s actually on or not (silent failure).

Lora Aroyo, Web & Media Group 30

Page 31: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Star Trek TOS: Command Controls

Lora Aroyo, Web & Media Group 31

Page 32: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Design Knowledge

•  Design Principles –  First Principles of Interactive Design –  http://www.asktog.com/basics/firstPrinciples.html

•  Design Rules –  8 Golden Rules –  http://www.usask.ca/education/coursework/skaalid/theory/

interface.htm

Page 33: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

DESIGN GUIDELINES & RATIONALE

Lora Aroyo, Web & Media Group 33

Page 34: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Standards

•  ISO 9241: Ergonomic requirements for office work with visual display terminals (VDTs) –  defines usability as effectiveness, efficiency and satisfaction with

which users accomplish tasks •  ISO 14915: Software ergonomics for multimedia user

interfaces –  guidelines for design of multimedia interfaces

•  ISO 13407: Human-centered design processes for interactive systems –  management guidance through the development life-cycle

•  ISO/CD 20282: Ease of operation of everyday products –  four-part standard to ensure products can be used as consumers

expect them to

Lora Aroyo, Web & Media Group 34

Page 35: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Guidelines (1/2)

•  For optimizing the user experience – abstract guidelines (principles) applicable

during early life cycle activities – detailed guidelines (style guides) applicable

during later life cycle activities

•  http://www.usability.gov/pdfs/guidelines.html

Lora Aroyo, Web & Media Group 35

Page 36: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Guidelines (2/2)

•  Accessibility •  Page Layout

–  Navigation, Scrolling and Paging, Headings, Titles, and Labels

•  Content Organization –  Text Appearance –  Lists –  Links –  Screen–Based Controls (Widgets) –  Graphics, Images, and Multimedia

•  Search

Lora Aroyo, Web & Media Group 36

Page 37: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

DESIGN PRINCIPLES

Lora Aroyo, Web & Media Group 37

Page 38: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Keep it Simple

Lora Aroyo, Web & Media Group 38

Page 39: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Lora Aroyo, Web & Media Group 39

Page 40: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

All-in-One Doesn’t Work

Lora Aroyo, Web & Media Group 40

Page 41: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Buy a drink with your cell phone

Page 42: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

A Way to Achieve It

Lora Aroyo, Web & Media Group 42

Page 43: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Lora Aroyo, Web & Media Group 43

Page 44: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Organization of the UI in a meaningful way

Lora Aroyo, Web & Media Group 44

Page 45: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Tolerance

Prevent user from making mistakes – Prevention – Recoverability

•  Forward error recovery - system accepts the error and helps the user to accomplish their goal

•  Backward error recovery – undo the effects of the previous interaction

Lora Aroyo, Web & Media Group 45

Page 46: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Lora Aroyo, Web & Media Group 46

Page 47: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Location on the screen

Lora Aroyo, Web & Media Group 47

Mind the typical Ads location Use typical locations

Page 48: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

W3C Accessibility Guidelines

W3C Web Content Accessibility Guidelines http://www.w3.org/TR/WAI-WEBCONTENT/

1.  Provide alternatives to auditory and visual content 2.  Don’t rely on color alone 3.  Use markup and style sheets properly 4.  Clarify natural language usage

•  abbreviation and foreign text 5.  Create tables that transform gracefully 6.  New technology pages transform gracefully

•  accessible when newer technologies are not supported

Lora Aroyo, Web & Media Group 48

Page 49: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

W3C Accessibility Guidelines

7.  Ensure user control of time-sensitive content –  pausing/stoping of animation, scrolling, etc.

8.  Ensure direct accessibility of embedded UI 9.  Design for device independence

–  various input devices

10.  Use interim solutions (for older browsers to function) 11.  Use W3C technologies and guidelines 12.  Provide context and orientation information 13.  Provide clear navigation mechanisms 14.  Ensure that documents are clear and simple

Lora Aroyo, Web & Media Group 49

Page 50: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Style Guides

•  A typical guide includes: –  description of required interaction styles & user

interface controls –  guidance on when and how to use the various styles

or controls –  illustrations of styles and controls –  screen templates

Lora Aroyo, Web & Media Group 50

Page 51: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Example Style Guides

•  Apple Interface Guidelines –  http://developer.apple.com/DOCUMENTATION/UserExperience/

Conceptual/AppleHIGuidelines/

•  Microsoft Windows XP UI Guidelines –  http://www.microsoft.com/whdc/Resources/windowsxp/default.mspx

•  IBM’s Common User Access –  http://en.wikipedia.org/wiki/Common_User_Access

•  Motif Style Guide –  http://www.opengroup.org/motif/motif.data.sheet.htm

•  Sun Microsystems’ Java Look and Feel –  http://java.sun.com/products/jlf/ed2/book/HIGTitle.html

Lora Aroyo, Web & Media Group 51

Page 52: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

09/06/14 Lora Aroyo, Intelligent Information Systems, VU University Amsterdam

Page 53: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Design Rationale

•  Design rationale is information that explains why a system is the way it is

•  Benefits of design rationale –  communication throughout life cycle –  reuse of design knowledge across products –  enforces design discipline –  presents arguments for design trade-offs –  organizes potentially large design space –  capturing contextual information

•  Process-oriented –  preserves order of deliberation and decision making

•  Structure-oriented –  emphasizes post hoc structuring of considered design

alternatives

Lora Aroyo, Web & Media Group 53

Page 54: Lecture 3: Human-Computer Interaction: HCI Design (2014)

Human-Computer Interaction Course 2014: Lecture 3

Read more …