Introduction to Human Computer Interaction Course on NPTEL, Spring - - PowerPoint PPT Presentation

▶
introduction to human computer interaction
SMART_READER_LITE
LIVE PREVIEW

Introduction to Human Computer Interaction Course on NPTEL, Spring - - PowerPoint PPT Presentation

May 09, 2023 512 likes •1.11k views

Introduction to Human Computer Interaction Course on NPTEL, Spring 2018 Week 8 & 9 Visual Design, Colors, Fitts Law, Gulfs Ponnurangam Kumaraguru (PK) Associate Professor ACM Distinguished & TEDx Speaker Linkedin/in/ponguru/ 1

slide-1
SLIDE 1

Introduction to Human Computer Interaction

Course on NPTEL, Spring 2018

Week 8 & 9 Visual Design, Colors, Fitts Law, Gulfs

Ponnurangam Kumaraguru (“PK”)

Associate Professor ACM Distinguished & TEDx Speaker Linkedin/in/ponguru/ fb/ponnurangam.kumaraguru, @ponguru

1

slide-2
SLIDE 2

1997

slide-3
SLIDE 3

2018

slide-4
SLIDE 4

1994

slide-5
SLIDE 5

1994

slide-6
SLIDE 6

1995

slide-7
SLIDE 7
slide-8
SLIDE 8

1996

slide-9
SLIDE 9
slide-10
SLIDE 10

1996

slide-11
SLIDE 11
slide-12
SLIDE 12

Fundamentals of Visual Design

12

slide-13
SLIDE 13

Outline

  • Grid Systems
  • Hierarchy of Size
  • Grouping
  • Small Multiples
  • Repetition
  • Color

13

slide-14
SLIDE 14

Example Grid – Amazon (1/3)

14

slide-15
SLIDE 15

Visual Grouping: Proximity

15

slide-16
SLIDE 16

Visual Grouping: Similarity

16

slide-17
SLIDE 17

Visual Grouping: Connections

17

slide-18
SLIDE 18

Visual Grouping: Ordering

18

slide-19
SLIDE 19

Making Things Distinct

Kevin Mullet and Darrell Sano, Designing Visual Interfaces

Size Value Orientation Texture Shape Position (2D / 3D)

19

slide-20
SLIDE 20

Small Multiples

20

slide-21
SLIDE 21

Outline

  • Grid Systems
  • Hierarchy of Size
  • Grouping
  • Small Multiples
  • Repetition
  • Color

21

slide-22
SLIDE 22

Repetition of design elements

22

slide-23
SLIDE 23

Map #1

23

slide-24
SLIDE 24

Map #2

24

slide-25
SLIDE 25

25

slide-26
SLIDE 26

Visual Grouping: Ordering

26

slide-27
SLIDE 27

Visual Grouping: Ordering

27

slide-28
SLIDE 28

Visual Grouping: Ordering

28

slide-29
SLIDE 29

How to Get Color Right

Design Tip

  • Design your UIs in grayscale first
  • Forces you to focus on intensity
  • Can use a photocopier to help here
  • Keep luminance (intensity) values from grayscale

when moving to color

  • Helps ensure everything remains clear

29

slide-30
SLIDE 30

Focus

Design Implication

  • Pure (saturated) colors require more focusing than

less pure (desaturated, pastels)

  • Don’t use saturated colors in UIs unless you really

need something to stand out (stop sign)

30

slide-31
SLIDE 31

https://color.adobe.com/

31

slide-32
SLIDE 32

Any human cognitive work that you are aware

  • f?
  • Cognitive Science
  • How is your brain processing information?
  • How does it recognize objects / words?
  • Michael Just & Tom Mitchel’s work

32

slide-33
SLIDE 33

Fitts’ Law

  • http://www.youtube.com/watch?v=pPKymEC_Hss
slide-34
SLIDE 34

So What Went Wrong?

34

slide-35
SLIDE 35

How to fix it?

35

slide-36
SLIDE 36

Fitts’ Law

“Model of human movement primarily used in human–computer interaction and ergonomics that predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size

  • f the target.”

36

slide-37
SLIDE 37

Fitts’ Law

  • Fitts’ law tells us about difficulty for

pointing and selection tasks

  • Predicts time to make a movement
  • Moving hand is a series of

micro-corrections

  • Time = A + B*log2(Dist / Size + 1)
  • A and B are empirically derived constants
  • Time to move the hand depends only
  • n relative precision required

37

slide-38
SLIDE 38

Fitts’ Law Example

  • Which will be faster on average?

– pie menu (bigger targets & less distance)

Today Sunday Monday Tuesday Wednesday Thursday Friday Saturday

Pop-up Linear Menu Pop-up Pie Menu

38

slide-39
SLIDE 39

Pie Menus in Practice

Pie menus are example

  • f an interaction technique

39

slide-40
SLIDE 40

Pie Menus in Practice

  • If better, why don’t we see them more?
  • Harder to implement
  • Don’t scale past a few items
  • Unfamiliar to people
  • E.g. iPod?

40

slide-41
SLIDE 41

The Interface Cycle

I want to add a thin black box around the title

41

slide-42
SLIDE 42

SYSTEM

  • Updates display

Display

The Interface Cycle

42

slide-43
SLIDE 43

USER

  • Evaluates and

understands display

SYSTEM

  • Updates display

Display

The Interface Cycle

43

slide-44
SLIDE 44

USER

  • Evaluates and

understands display

  • Formulates goals

and actions

SYSTEM

  • Updates display

The Interface Cycle

Display

44

slide-45
SLIDE 45

USER

  • Evaluates and

understands display

  • Formulates goals

and actions

  • Acts to produce inputs

SYSTEM

  • Updates display

The Interface Cycle

Display

45

slide-46
SLIDE 46

USER

  • Evaluates and

understands display

  • Formulates goals

and actions

  • Acts to produce inputs

SYSTEM

  • Updates display
  • Interprets input

events

Input Devices

The Interface Cycle

Display

46

slide-47
SLIDE 47

USER

  • Evaluates and

understands display

  • Formulates goals

and actions

  • Acts to produce inputs

SYSTEM

  • Updates display
  • Updates internal state
  • Interprets input

events

Input Devices

The Interface Cycle

Display

47

slide-48
SLIDE 48

Norman’s Gulfs

  • Norman describes two user activities

bridging users and systems

  • The Gulf of Evaluation
  • User perceives & interprets state of

system

User System

48

slide-49
SLIDE 49

Norman’s Gulfs

  • Norman describes two user activities bridging

users and systems

  • The Gulf of Evaluation
  • User perceives and interprets state of

system

  • The Gulf of Execution
  • User formulates inputs to achieve goals
  • Shrinking these “gulfs”

makes interfaces easier to use

User System

49

slide-50
SLIDE 50

Example Gulfs of Evaluation?

I want to add a thin black box around the title

50

slide-51
SLIDE 51

Example Gulfs of Evaluation?

  • User understands & evaluates display
  • Pretty easy to see no black box

around text yet

  • Compare editing web page in text editor

51

slide-52
SLIDE 52

Example Gulfs of Evaluation?

  • User understands & evaluates display
  • Pretty easy to see no black box

around text yet

  • Compare editing web page in text editor
  • Formulates goals and actions
  • Add a black box
  • Acts to produce inputs
  • Too many buttons?
  • Too many menus?
  • What’s dog on side for?

52

slide-53
SLIDE 53

Why Does Gulf of Evaluation Happen?

53

slide-54
SLIDE 54

Why Does Gulf of Evaluation Happen?

  • Some causes of Gulf of Evaluation
  • Poor use of colors
  • Bad layout, poor grouping
  • Important information looks same as

unimportant

  • Forcing people to remember lots of things
  • Lack of feedback in response to inputs
  • Unfamiliar display of information
  • Design patterns, convention

54

slide-55
SLIDE 55

Why Does Gulf of Execution Happen?

55

slide-56
SLIDE 56

Why Does Gulf of Execution Happen?

  • Some causes of Gulf of Execution
  • Unfamiliar devices
  • Unfamiliar interactions
  • Don’t know what is possible
  • Widgets might not have meaning

(solvable with experience)

  • Interaction patterns might not have

meaning (see above)

  • Example patterns: Dialogs, Shopping

Carts

56

slide-57
SLIDE 57

Activity

  • Find one interface that is cognizant and apply Fitt’s law and
  • ne interface that is not
  • Find two interfaces where the gulf of evaluation is high and

two interfaces where the gulf of execution is high

  • Post it to the mailing list

57

slide-58
SLIDE 58

Outcomes of the activity?

  • What did you learn?

58

slide-59
SLIDE 59

Ponnurangam Kumaraguru (“PK”) Associate Professor Indraprastha Institute of Information Technology New Delhi – 110078 pk@iiitd.ac.in precog.iiitd.edu.in