05-knowledge of user interface design · 2011-07-01 · 4 Psychological Principles It Is Easier to...

User Interface Design

Lecture 4

Requirements Gathering: Knowledge of User Interface Design

What to click, Yes or No?

C. Patanothai 2110646:04-Knowledge of User Interface Design 2

Knowledge Types for UI Design

• Information-gathering activities

• User interface design knowledge, from theory

(cognitive psychology), and experience

C. Patanothai 2110646:04-Knowledge of User Interface Design 3

Minimizing work

• Cognitive work – comprehension of product behaviors

• Memory work – recall of product behaviors, commands, names and

locations of objects and controls and other relationships between objects

• Visual work – where the eye should start on a screen, finding object,

decoding layouts

• Physical work – keystrokes, mouse movement, gesture (click, drag, double-

click), switching between input modes, # of clicks required

C. Patanothai 2110646:04-Knowledge of User Interface Design 4

Design Knowledge

• Design Principles – derived from experience – abstract, high-level guides – general, difficult to apply – First Principles of Interactive Design

• Design Rules

– low-level – high specific instruction – 8 Golden Rules

C. Patanothai 2110646:04-Knowledge of User Interface Design 5

4 Psychological Principles

• Users see what they expect to see

• Users have difficulty focusing on more than one activity at a time

• It is easier to perceive a structured layout

• It is easier to recognize something that to recall it

C. Patanothai 2110646:04-Knowledge of User Interface Design 6

4 Psychological Principles

C. Patanothai 2110646:04-Knowledge of User Interface Design 7

Users See What They Expect to See

What do you see?

• Principle of consistency

– throughout the UI

• Principle of exploiting prior knowledge

– users perceive the screen using their prior knowledge

C. Patanothai 2110646:04-Knowledge of User Interface Design 8

4 Psychological Principles

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

C. Patanothai 2110646:04-Knowledge of User Interface Design 9

– The Cocktail Party Effect

– Principle of Perceptual Organization

• Group like things together

– Principle of Importance

• Prominent display for important items

4 Psychological Principles

C. Patanothai 2110646:04-Knowledge of User Interface Design 10

It Is Easier to Perceive a Structured Layout

4 Psychological Principles

Gestalt principles

a. Proximity

b. Similarity

c. Closure

d. Continuity

e. Symmetry

C. Patanothai 2110646:04-Knowledge of User Interface Design 11

Figure-Ground Segregation

C. Patanothai 2110646:04-Knowledge of User Interface Design 12

Exercise (5 minutes)

C. Patanothai 2110646:04-Knowledge of User Interface Design 13

How well does this web sites support the principles of proximity, similarity, closure, and continuity?

4 Psychological Principles

It Is Easier to Recognize Something Than to Recall It

C. Patanothai 2110646:04-Knowledge of User Interface Design 14

• Knowledge in the head & Knowledge in the world

• Principle of recognition

exceptions

• expert prefer key combinations

• routine operator don’t like to read the same info. repeatedly

Three Principles from Experience: Visibility, Affordance, and Feedback

C. Patanothai 2110646:04-Knowledge of User Interface Design 15

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

Three Principles from Experience: Visibility, Affordance, and Feedback

C. Patanothai 2110646:04-Knowledge of User Interface Design 16

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

- affordance: strong clues to

operations of things - no picture, label, or instruction

is required

Affordance: actual vs. perceived

C. Patanothai 2110646:04-Knowledge of User Interface Design 17

Three Principles from Experience: Visibility, Affordance, and Feedback

C. Patanothai 2110646:04-Knowledge of User Interface Design 18

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

Discussion

• Principles to support usability, for example,

– learnability

• simplicity

• predicability

• …

C. Patanothai 2110646:04-Knowledge of User Interface Design 19

C. Patanothai 2110646:04-Knowledge of User Interface Design 20

Other Principles

• Constraints

• Natural mapping

C. Patanothai 2110646:04-Knowledge of User Interface Design 32

Constraints

• Boundary

• Some can be selected, some cannot

• physical vs. logical

– cannot move cursor outside the screen

C. Patanothai 2110646:04-Knowledge of User Interface Design 33

Natural Mapping

• Mapping should match functionality

• direct is the best

• natural mapping does not have to be direct – light switch

– oven control

– turn signal

C. Patanothai 2110646:04-Knowledge of User Interface Design 34

Poor Physical Natural Mapping

C. Patanothai 2110646:04-Knowledge of User Interface Design 35

Good Physical Natural Mapping

C. Patanothai 2110646:04-Knowledge of User Interface Design 36

Logical Mapping

C. Patanothai 2110646:04-Knowledge of User Interface Design 37

8 Golden Rules

• Strive for consistency

• Enable frequent users to use shortcuts

• Offer informative feedback

• Design dialog to yield closure

• Offer simple error handling

• Permit easy reversal of actions

• Support internal locus of control

• Reduce short-term memory load

C. Patanothai 2110646:04-Knowledge of User Interface Design 38