Top Banner
SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week. 20.02.2012 1
49

SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

Dec 29, 2015

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1

SE 204, IES 506 – Human Computer Interaction

Lecture 3: Guidelines, Principles and Theories

Lecturer: Gazihan Alankuş

There is no assignment this week.

20.02.2012

Page 2: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

© 2010 Pearson Addison-Wesley. All rights reserved.

Addison Wesley is an imprint of

Designing the User Interface:Strategies for Effective Human-Computer Interaction

Fifth Edition

Ben Shneiderman & Catherine Plaisantin collaboration with

Maxine S. Cohen and Steven M. JacobsRevised by Gazihan Alankuş

CHAPTER 2:Guidelines, Principles, and Theories

Page 3: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-3

© 2010 Pearson Addison-Wesley. All rights reserved.

Continuing with Introduction

• How would you design a piece of interactive software today?– By yourself?– Using lessons that other people have learned?

2-3

Page 4: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-4

© 2010 Pearson Addison-Wesley. All rights reserved.

There Are Examples of Good and Bad Design

2-4

Page 5: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-5

© 2010 Pearson Addison-Wesley. All rights reserved.

Do Not Ignore Existing Knowledge

• It’s like reinventing the wheel in the age of spaceships

2-5

Page 6: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-6

© 2010 Pearson Addison-Wesley. All rights reserved.

Knowledge About Designing Interactive Software

• Guidelines– Specific recommendations to be followed

• Principles– More general suggestions

• Theories– Broadly-useful information

2-6

Page 7: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-7

© 2010 Pearson Addison-Wesley. All rights reserved.

Knowledge About Designing Interactive Software

• Guidelines– Specific recommendations to be followed

• Principles– More general suggestions

• Theories– Broadly-useful information

2-7

Page 8: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-8

© 2010 Pearson Addison-Wesley. All rights reserved.

Guidelines

2-8

[adobe.com]

Page 9: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-9

© 2010 Pearson Addison-Wesley. All rights reserved.

Guidelines

• Shared language• Best practices• Critics

– Too specific, incomplete, hard to apply, and sometimes wrong

• Proponents– Encapsulate experience

2-9

Page 10: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-10

© 2010 Pearson Addison-Wesley. All rights reserved.

Navigating the interface

• For web pages– Standardize task sequences– Ensure that embedded links are descriptive– Use unique and descriptive headings– Use check boxes for binary choices– Develop pages that will print properly– Use thumbnail images to preview larger

images

2-10

Page 11: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-11

© 2010 Pearson Addison-Wesley. All rights reserved.

Accessibility guidelines

• Provide a text equivalent for every nontext element

• For any time-based multimedia presentation synchronize equivalent alternatives

• Information conveyed with color should also be conveyed without it

• Title each frame to facilitate identification and navigation

2-11

Page 12: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-12

© 2010 Pearson Addison-Wesley. All rights reserved.

Organizing the display

• Smith and Mosier (1986) offer five high-level goals– Consistency of data display– Efficient information assimilation by the user– Minimal memory load on the user– Compatibility of data display with data entry– Flexibility for user control of data display

2-12

Page 13: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-13

© 2010 Pearson Addison-Wesley. All rights reserved.

Getting the user’s attention

• Intensity• Marking• Size• Choice of fonts• Inverse video• Blinking• Color• Audio

2-13

Page 14: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-14

© 2010 Pearson Addison-Wesley. All rights reserved.

Knowledge About Designing Interactive Software

• Guidelines– Specific recommendations to be followed

• Principles– More general suggestions

• Theories– Broadly-useful information

2-14

Page 15: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-15

© 2010 Pearson Addison-Wesley. All rights reserved.

Principles

• More fundamental, widely applicable, and enduring than guidelines– Need more clarification

2-15

Page 16: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-16

© 2010 Pearson Addison-Wesley. All rights reserved.

Principles

• Fundamental principles– Determine user’s skill levels– Identify the tasks

• Five primary interaction styles• Eight golden rules of interface design• Prevent errors• Automation and human control

2-16

Page 17: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-17

© 2010 Pearson Addison-Wesley. All rights reserved.

Determine user’s skill levels

• “Know thy user”• Age, gender, physical and

cognitive abilities, education, cultural or ethnic background, training, motivation, goals and personality

• Design goals based on skill level– Novice or first-time users– Knowledgeable intermittent users– Expert frequent users

• Multi-layer designs

2-17

Page 18: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-18

© 2010 Pearson Addison-Wesley. All rights reserved.

Identify the tasks

• Task Analysis usually involve long hours observing and interviewing users

• Decomposition of high level tasks

2-18

Page 19: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-19

© 2010 Pearson Addison-Wesley. All rights reserved.

Identify the tasks

• Relative task frequencies – Can help making decisions about menus,

etc.

2-19

Page 20: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-20

© 2010 Pearson Addison-Wesley. All rights reserved.

Choose an interaction style

• Direct Manipulation• Menu selection• Form fill-in• Command language• Natural language

2-20

Page 21: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-21

© 2010 Pearson Addison-Wesley. All rights reserved.

Spectrum of Directness

2-21

Page 22: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-22

© 2010 Pearson Addison-Wesley. All rights reserved.

The 8 golden rules of interface design

1. Strive for consistency2. Cater to universal usability3. Offer informative feedback4. Design dialogs to yield closure5. Prevent errors6. Permit easy reversal of actions7. Support internal locus of control8. Reduce short term memory load

2-22

Page 23: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-23

© 2010 Pearson Addison-Wesley. All rights reserved.

Prevent errors

• Make error messages specific, positive in tone, and constructive

• Mistakes and slips (Norman, 1983)• Correct actions

– Gray out inappropriate actions– Selection rather than freestyle typing– Automatic completion

• Complete sequences– Single abstract commands– Macros and subroutines

2-23

Page 24: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-24

© 2010 Pearson Addison-Wesley. All rights reserved.

Automation vs. Human Control

2-24

Page 25: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-25

© 2010 Pearson Addison-Wesley. All rights reserved.

Automation and human control

2-25

Page 26: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-26

© 2010 Pearson Addison-Wesley. All rights reserved.

Automation and human control (cont.)

• Successful integration:– Users can avoid:

• Routine, tedious, and error prone tasks– Users can concentrate on:

• Making critical decisions, coping with unexpected situations, and planning future actions

2-26

Page 27: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-27

© 2010 Pearson Addison-Wesley. All rights reserved.

Automation and human control (cont.)

• Supervisory control needed to deal with real world open systems– E.g. air-traffic controllers with low

frequency, but high consequences of failure

– FAA: design should place the user in control and automate only to improve system performance, without reducing human involvement

2-27

Page 28: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-28

© 2010 Pearson Addison-Wesley. All rights reserved.

Agents?

• Should interfaces try to be like humans?

2-28

Page 29: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-29

© 2010 Pearson Addison-Wesley. All rights reserved.

Agents

• Goals for autonomous agents– knows user's likes and dislikes – makes proper inferences – responds to novel situations – performs competently with little guidance

• Tool like interfaces versus autonomous agents

2-29

Page 30: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-30

© 2010 Pearson Addison-Wesley. All rights reserved.

Agents

• Avatars representing human users, not computers, are more successful

2-30

Page 31: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-31

© 2010 Pearson Addison-Wesley. All rights reserved.

Automation and human control (cont.)

• User modeling for adaptive interfaces– keeps track of user performance – adapts behavior to suit user's needs – allows for automatically adapting system

• response time, length of messages, density of feedback, content of menus, order of menu items, type of feedback, content of help screens

– can be problematic • system may make surprising changes • user must pause to see what has happened • user may not be able to

– predict next change – interpret what has happened – restore system to previous state

2-31

Page 32: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-32

© 2010 Pearson Addison-Wesley. All rights reserved.

Automation and human control (cont.)

• Alternative to agents: – user control, responsibility, accomplishment – expand use of control panels

• style sheets for word processors • specification boxes of query facilities • information-visualization tools

2-32

Page 33: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-33

© 2010 Pearson Addison-Wesley. All rights reserved.

Automation and human control (concluded)

Features to aid in universal access

Above: Mac OS X system preference settings

Right: Windows Vista Control Panel

2-33

Page 34: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-34

© 2010 Pearson Addison-Wesley. All rights reserved.

Knowledge About Designing Interactive Software

• Guidelines– Specific recommendations to be followed

• Principles– More general suggestions

• Theories– Broadly-useful information

2-34

Page 35: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-35

© 2010 Pearson Addison-Wesley. All rights reserved.

Theories

• Beyond the specifics of guidelines• Principles are used to develop

theories• Descriptions/explanatory or

predictive• Motor task, perceptual, or cognitive

2-35

Page 36: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-36

© 2010 Pearson Addison-Wesley. All rights reserved.

Theories

2-36

Page 37: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-37

© 2010 Pearson Addison-Wesley. All rights reserved.

Explanatory and predictive theories

• Explanatory theories:– Observing behavior – Describing activity – Conceiving of designs – Comparing high-level concepts of two designs – Training

• Predictive theories:– Enable designers to compare proposed

designs for execution time or error rates

2-37

Page 38: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-38

© 2010 Pearson Addison-Wesley. All rights reserved.

Perceptual, Cognitive, & Motor tasks

• Perceptual or Cognitive subtasks theories–Predicting reading times for free text,

lists, or formatted displays

• Motor-task performance times theories:–Predicting keystroking or pointing times

2-38

Page 39: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-39

© 2010 Pearson Addison-Wesley. All rights reserved.

Taxonomy (explanatory theory)

–Order on a complex set of phenomena –Facilitate useful comparisons –Organize a topic for newcomers –Guide designers – Indicate opportunities for novel products.

2-39

Page 40: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-40

© 2010 Pearson Addison-Wesley. All rights reserved.

Different ways of thinking about interaction

• Design by levels• Stages of action• Consistency • Context of interaction

2-40

Page 41: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-41

© 2010 Pearson Addison-Wesley. All rights reserved.

Design by levels

• Four levels of abstraction:– Conceptual level:

• User's mental model of the interactive system – Semantic level:

• Describes the meanings conveyed by the user's command input and by the computer's output display

– Syntactic level: • Defines how the units (words) that convey

semantics are assembled into a complete sentence that instructs the computer to perform a certain task

– Lexical level: • Deals with device dependencies and with the

precise mechanisms by which a user specifies the syntax

• Approach is convenient for designers– Top-down nature is easy to explain – Matches the software architecture – Allows for useful modularity during design

2-41

Page 42: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-42

© 2010 Pearson Addison-Wesley. All rights reserved.

Stages of action models

• Seven stages of action 1. Forming the goal 2. Forming the intention 3. Specifying the action 4. Executing the action 5. Perceiving the system state 6. Interpreting the system state 7. Evaluating the outcome

• Norman's contributions – Context of cycles of action and evaluation. – Gulf of execution: Mismatch between the user's intentions

and the allowable actions – Gulf of evaluation: Mismatch between the system's

representation and the users' expectations

2-42

Page 43: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-43

© 2010 Pearson Addison-Wesley. All rights reserved.

Stages of action models (cont.)

• Four principles of good design – State and the action alternatives should be visible – Should be a good conceptual model with a consistent

system image – Interface should include good mappings that reveal the

relationships between stages – User should receive continuous feedback

• Four critical points where user failures can occur – Users can form an inadequate goal – Might not find the correct interface object because of an

incomprehensible label or icon – May not know how to specify or execute a desired action – May receive inappropriate or misleading feedback

2-43

Page 44: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-44

© 2010 Pearson Addison-Wesley. All rights reserved.

Consistency through grammars

Consistent user interface goal – Definition is elusive - multiple

levels sometimes in conflict – Sometimes advantageous

to be inconsistent.

Consistent Inconsistent A Inconsistent B

delete/insert character delete/insert character delete/insert character

delete/insert word remove/bring word remove/insert word

delete/insert line destroy/create line delete/insert line

delete/insert paragraph kill/birth paragraph delete/insert paragraph

2-44

Page 45: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-45

© 2010 Pearson Addison-Wesley. All rights reserved.

Consistency through grammars (cont.)

Inconsistent action verbs – Take longer to learn – Cause more errors – Slow down users – Harder for users to remember

2-45

Page 46: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-46

© 2010 Pearson Addison-Wesley. All rights reserved.

The disappearance of syntax

• Users must maintain a profusion of device-dependent details in their human memory. – Which action erases a character – Which action inserts a new line after the third line of a

text file – Which abbreviations are permissible – Which of the numbered function keys produces the

previous screen.

2-46

Page 47: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-47

© 2010 Pearson Addison-Wesley. All rights reserved.

The disappearance of syntax (cont.)

• Learning, use, and retention of this knowledge is hampered by two problems – Details vary across systems in an unpredictable

manner – Greatly reduces the effectiveness of paired-associate

learning • Syntactic knowledge conveyed by example and

repeated usage   • Syntactic knowledge is system dependent

2-47

Page 48: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-48

© 2010 Pearson Addison-Wesley. All rights reserved.

The disappearance of syntax (concluded)

• Minimizing these burdens is the goal of most interface designers – Modern direct-manipulation systems – Familiar objects and actions representing their task

objects and actions. – Modern user interface building tools – Standard widgets

2-48

Page 49: SE 204, IES 506 – Human Computer Interaction Lecture 3: Guidelines, Principles and Theories Lecturer: Gazihan Alankuş There is no assignment this week.

1-49

© 2010 Pearson Addison-Wesley. All rights reserved.

Contextual Theories

• User actions are situated by time and place– You may not have time to deal with shortcuts or device dependent

syntax, such as on mobile devices, when hurried– Physical space is important in ubiquitous, pervasive and embedded

devices, e.g. a museum guide stating information about a nearby painting

• A taxonomy for mobile device application development could include:– Monitor and provide alerts, e.g. patient monitoring systems– Gather information– Participate in group collaboration– Locate and identify nearby object or site– Capture information about the object and share that information

2-49