Design Principles

John Kelleher

with some material from John Stasko, UCB

2

Hall of Fame or Shame?

Page setup for printing in IE5

3

Hall of Shame

Page setup for printing in IE5

Problems codes for header & footer

information recognition over recall! no equivalent GUI help is the way to find out,

but not obvious how

4

Introduction

Science Finds,Industry Applies,Man Conforms.

[Motto of the 1933 Chicago World’s Fair]

People Propose,Science Studies,Technology Conforms.

[Don Norman’s person-centered motto for the next century]

5

Design

“It’s easy to make things hard. It’s hard to make things easy.” User interface is a creative process Designers have difficulty thinking like users

Can’t ‘unlearn’ something e.g. need for Save button

6

7

Why is Design Hard?Over the last century... the number of things to control has increased dramatically

car radio: AM, FM1, FM2, 5 pre-sets, station selection, balance, fader, bass,

treble, distance, mono/stereo, dolby, tape eject, fast forward and reverse, etc (while driving at night!)

display is increasingly artificial red lights in car indicate problems vs flames for fire

feedback more complex, subtle, and less natural is your digital watch alarm on and set correctly?

errors increasing serious and/or costly airplane crashes, losing days of work...

8

Lack of user discovery

Specifications are always wrong: “Only slightly more than 30% of the code

developed in application software development ever gets used as intended by end-users. The reason for this statistic may be a result of developers not understanding what their users need.”

Hugh Beyer and Karen Holtzblatt, “Contextual Design: A Customer-Centric Approach to Systems Design”,

ACM Interactions, Sep+Oct, 1997, iv.5, p. 62.

Need for prototyping and iteration

9

Why is Design Hard? (contd.)

Marketplace pressures adding functionality (complexity) now easy and

cheap computers

adding controls/feedback expensive physical buttons on calculator, microwave oven widgets consume screen real estate

design usually requires several iterations before success product pulled if not immediately successful

10

Why is Design Hard? (contd.)

People often consider cost and appearance over human factors design bad design not always visible people tend to blame themselves when errors occur

“I was never very good with machines” “I knew I should have read the manual!” “Look at what I did! Do I feel stupid!”

E.g. the new wave of cheap telephones: accidentally hangs up when button hit with chin bad audio feedback cheap pushbuttons — mis-dials common trendy designs that are uncomfortable to hold hangs up when dropped functionality that can’t be accessed (redial, mute, hold)

11

More issues with UI difficulties

Tasks and domains are complex MacDraw 1 (20cmd) vs. Illustrator Word 1 vs. Office XP (Word XP has 1000)

Existing theories and guidelines are not sufficient Too specific and/or too general Standard does not address all issues.

Adding graphics can make worse Pretty Easy to use

Can’t just copy other designs Legal issues

12

Differing Perspectives System (Programmer) Centred Design

What can be built easily on this platform? What can I create from the tools available? What do I as a developer find interesting to work on?

User Centred Design Design based upon user’s

abilities and needs context work tasks

13

What is Design?

Design is conscious Systematic principles and methods available Though, no effective rationalized generative

theories Still pervaded by intuition, tacit knowledge, and

gut reaction.

14

What is Design? (contd.)

Design keeps human concerns in the center creative solutions in a space of alternatives that is

shaped by competing values and resource needs, though rarely quantifiable

adherence to ‘Threshold of indignation’ for different classes of user

multidimensional understanding of what concerns users is critical to an understanding

15

What is Design? (contd.)

Design is a dialog with materials Iterative at two levels

Designer iterates prototypes User community recognise new potentials

Carroll's ‘Task-Artefact Cycle’

New technologies bring with them new domains for design Stone building brought architecture Printing brought graphic design Word processing brought DTP

16

What is Design? (contd.)

Design is creative Cannot be prescribed or rationalised It begins with finding the problems

Envisioning the needs that people have but do not recognise

Design is communication Couched in a background of shared design

language in the user community

17

What is Design? (contd.)

Design has social consequences social and political dimensions an explicit part of

the analysis and of the design dialog Participatory Design

Design is a social activity designer both facilitated and constrained by

interactions with other people and the organisation

18

What is User-centered Design?

Design FROM THE USER’S PERSPECTIVE user and customer not the same person

don’t design for managers work process Developers work WITH target users

help define what the system will do and how lots of iterative exploration and feedback from users maintain direct contact with real users

Understanding work process points where humans and computers intersect

Not technology-centered/feature driven

19

Know (and Respect) the User!

20

A counter example in capturing attention in the user interface.

What happened to the Apollo 13 screens during the Oxygen Tank 2 explosion.

21

Apollo 13 Screen at Time 1

22

Apollo 13 Screen at Time 2

23

Apollo 13 Screen at Time 3

Did anything important happen?

25

What really happened.

26

Apollo 13 Screen at Time 1

27

Apollo 13 Screen at Time 2

28

Apollo 13 Screen at Time 3

29

Data vs. Information

Data becomes information when shown in context to reference values (limits, past information, correlated data, what’s expected, etc.)

What is 800? Is it good or bad? Depends on the limits, and the scale, and our goals.

30

User-Centered Design Golden Rule: KNOW THE USER

Attributes physical & cognitive abilities

memory (retention and recall) cultural/ethnic issues

experiential Organizational / job abilities Users become a part of the design process

Involve users throughout project Difference from programming (debugging)

31

Seven Principles for User-Centred Design1. Use both knowledge in the world and

knowledge in the head.2. Simplify the structure of tasks.

provide mental aids use technology to make visible what would

otherwise be invisible automate but keep the task much the same change the nature of the task

3. Make things visible. Bridge the gulfs of Execution and Evaluation

32

Seven Principles for User-Centred Design4. Get the mappings right.

Exploit natural mappings Make sure that the user can determine the

relationships: between intentions and possible actions, between actions and their effects on the system, between actual system state and what is perceivable by sight/sound/feel, between the perceived system state and the needs, intentions and expectations of the users

5. Exploit the power of constraints Both natural and artificial

33

Seven Principles for User-Centred Design6. Design for error.

(Murphy's always there!)

7. When all else fails, standardise Any standard need only be learned once Standards only when all the necessary

information cannot be placed in the world or when natural mappings cannot be exploited

Design a thing by considering it in its next larger context

34

Simple Rules ofUser Interface Designs

Cognitive Engineering Principles based on psychology of user Don Norman’s Principles

Although users are distinct individuals they have similar architectures Learning and memory for items is similar Motor, visual and hearing performance is

similar

35

Some Basic Human Characteristics

Humans like to problem solve Humans don’t like insoluble problems Humans are always learning Learning is hard Humans use prior learning to support new

leaning Users don’t read manuals but work by copying

and asking Users are always building models of their world

36

Applying Psychology to Design

Use existing knowledge where possible Assist learning by using metaphor

User recognition over recall E.g. menu items

Don’t overload short-term memory Limit the need to remember information between screens,

by maintaining an external memory, e.g. of current settings

Design for consistency to avoid interference Retroactive and proactive

37

Applying Psychology to Design

Make use of human hardware E.g. colour vision

Use a variety of modalities E.g. vision and audio

Compensate for difficult tasks E.g. pop-up menus to avoid eye movement

Avoid anomalies E.g. unwanted after effects

38

The User as an Intelligent “Muddler”

Users don’t mind if something doesn’t make sense they build their own model to make it make

sense Users prefer simple models Inconsistency doesn’t bother a user

A simple model which doesn’t always match is better than a perfect complex model that is too hard to learn

39

What happens when you cancel a cancelled operation?

Do I have any choice in this?

Umm, thanks for the warning,but what should I do?

Uhhh… I give up on this one

40

Inane Dialog Boxes

41

Silly Help

Midwest Microwave's online catalog

42

ClearCase, a source-code control system from Rational Software

43

Usability Truths1. Your best guess is not good enough

2. The user is always right

3. The user is not always right

4. Users are not designers

5. Designers are not users

6. Vice presidents are not users

7. Less is More

8. Details matter

9. Help doesn’t

10. Usability Engineering is Process

(Drawn from J. Nielsen, Usability Engineering )

44

Alternative UI Attributes Invisible Minimal training required (easy to learn) High transfer of training (easy to remember) Predictability Few errors Easy to recover from errors People perform real tasks well (efficient) It is flexible It is intelligent People like it (subjectively pleasing)

… and many others“It is easy to make things hard. It is hard to make things easy.”

A. Chapanis, 1982

45

Design Approaches

Guidelines and Standards Discount Usability Engineering (Nielsen) Norman’s Action Cycle Model (1988)

46

Design Guidelines…

Apply at multiple levels of design Often become obvious to users of poorly

designed interfaces Are easy to ignore when deadlines approach Are neither complete nor orthogonal Have psychological underpinnings (hopefully)

47

Discount Usability Engineering (Nielsen)

“Le mieux est l’ennemi du bien” (Voltaire 1764)

Discount Usability Technique1 (Nielsen) User and task observation Scenarios Simplified thinking aloud Heuristic Evaluation

Management Issues Recognise the need for usability Give usability management support Devote & ring-fence resources Integrate systematic usability engineering activities Subject all user interfaces to user testing

Evolution of UE Acceptance Skepticism stage Curiosity Stage Partnership Stage Acceptance Stage

1 www.useit.com/papers/guerilla_hci.html

48

Norman’s Action Cycle Model (1988)

Forming the goal Forming the intention Specifying an action Executing the action Perceiving the state of the world Interpreting the state of the world Evaluating the outcome

49

Action Cycle

Physical System

Goals

Execution

Evaluation

50

Gulfs

Physical System Goals

Gulf of Execution

Gulf of Evaluation

51

Bridges

Physical System Goals

Interface Mechanism

Action Specification

Intentions

Interface Display

Interpretation

Evaluation

52

Gulfs of Execution and Evaluation

Gulf of Execution Differences between what user wants to do

and controls available E.g. filling a bath tub

Gulf of Evaluation Reflects user effort to compare known goal

with state of system. E.g. A-320 flight-path display feedback

53

Evaluation & Design Questions Execution

Can the user tell what actions are possible? Does the interface help with mapping from intention to

physical movement? Does the device easily support required actions?

Evaluation Can the user tell if the system is in the desired state? Can the user map from the system state to an

interpretation? Can the user tell what state the system is in?

End of Show

55

Extra Slides

56

Usability Principles

Physical System Goals

Visibility

Good Conceptual Model

Good Mappings

Feedback

Affordances

57

Factors in HCI

Exercise: What happens when a new computing system is introduced?

Case study – Library automation

OrganizationalFactors

EnvironmentalFactors

Health & Safety

Cognition andEmotion

ComfortFactors

User Interface Task Factors

Constraints System FunctionalityProductivity

Factors

58

The Waterfall Model ofSoftware Design

Requirements Analysis and Definition

System and Software Design

Implementation and Unit Testing

Integration and System Testing

59

HCI Design Cycle

Design

Prototype

Evaluate

60

The “Star” Life Cycle

Evaluation

ImplementationTask analysis/

Functional analysis

Requirementsspecification

Conceptual design/Formal design

Prototyping

Hix & Hartson (1989) Towards empirically derived methodologies and tools for human-computer interface development. International Journal of Man-Machine Studies, 31, 477-494