1 of 69

Human-Computer Interaction

​

saadh.info/hci

​

1

2 of 69

Attendance and Agenda

  1. Syllabus, Course Components, and Grading

​

  • Perception

​

  • Vision

2

3 of 69

CS has a loops problem…

3

4 of 69

HCI Research & User Experience (UX) Research

4

UX

HCI Research

5 of 69

Saunders Research Onion

5

6 of 69

1. Perception and Cognition

6

7 of 69

2. User Research Methods and Qualitative Analysis

7

Interviews

Contextual Inquiry

Think-out Aloud

8 of 69

3. Experimental Research in HCI

Error bars show

±1 standard deviation

9 of 69

4. Modeling Interactions

Units: bits

RT = a + b log2(n + 1)

Fitts’ Law

Hick-Hyman’ Law

10 of 69

5. Evaluations

Jakob Nielsen and Don Norman

11 of 69

6. Human-AI Interaction

12 of 69

1. Perception and Cognition

12

13 of 69

Humans and Computers

  • Humans are complicated. Computers by comparison function in rather strict terms according to their programmed capabilities

​

  • Human scientists confront something computer scientists rarely think about
    • Variability

​

  • This leads to…
    • Assume all users are like us
    • Assume all users are alike

​

​

13

14 of 69

Perception and Cognition: Humans and Computers

  • How do humans perceive the world?

​

  • Why do humans make mistakes? Why do humans forget things?

​

  • Why do we have trouble driving while talking on mobile phone?

​

  • Why do we accidentally like posts that we did not intend to like?

​

  • Why are we addicted to Instagram or TikTok?

14

15 of 69

Perception and Cognition: Humans and Computers

  • What are our limits? What are we on average? What states are we in?

​

  • We can think about human capabilities from different perspectives. Can you think of others besides the list above?

​

15

16 of 69

Situational Impairments

  • Situational Impairments
    • Suddenly going from bright sunlight to an indoor space
    • A loud nightclub
    • Sitting in front of a computer in a dark room

16

17 of 69

Humans and Computers

​

​

17

Human Operator in a Work Environment

18 of 69

Sensors and Responders

  • Sensors
    • Vision, Hearing, Touch, Taste, Smell, …more

​

  • Responders
    • Limbs, Voice, Eyes, …more

18

19 of 69

Vision: Both Receptor and Responder

19

Light Detection and Signal Transmission

Respond to brightness, distance, track objects

20 of 69

Vision

20

How do we perceive visual elements?

​

How do we perceive color?

21 of 69

Vision

  • Vision depends on brain as much as eyes
    • Eye’s function is to detect the pattern of light
    • Brain turns those patterns into images
    • Fovea: sharp central vision, 1% of retina, 50% of visual cortex in brain

​

  • Color Perception
    • Rods and Cones
    • Color blindness or color vision deficiency

​

21

22 of 69

Gestalt Principles

22

23 of 69

Gestalt Principles

  • Gestalt: German psychologists (1920s) tried to explain how visual perception works

​

  • Human visual system craves order:
    • “unified whole”

​

  • Refers to theories of visual perception

​

​

23

24 of 69

1. Gestalt Principles: Proximity

24

Do you see rows or columns?

25 of 69

1. Gestalt Principles: Proximity

25

How about now?

Objects that are close to each other are perceived as a group.

26 of 69

1. Gestalt Principles: Proximity

26

How does this look?

Can we do better?

27 of 69

1. Gestalt Principles: Proximity

27

28 of 69

1. Gestalt Principles: Proximity

28

How does this look?

Can we do better?

29 of 69

1. Gestalt Principles: Proximity

29

30 of 69

2. Gestalt Principles: Closure

30

Mind tends to fill in missing information to create a complete, familiar object or shape.

31 of 69

2. Gestalt Principles: Closure

31

Can we do better?

32 of 69

2. Gestalt Principles: Closure

32

33 of 69

3. Gestalt Principles: Similarity

33

Objects that are similar to one another in size, shape, and/or color are grouped together

​

34 of 69

3. Gestalt Principles: Similarity

34

Similarity overrides proximity

35 of 69

3. Gestalt Principles: Similarity

35

36 of 69

4. Gestalt Principles: Continuity

36

Mind continues patterns and styles

37 of 69

4. Gestalt Principles: Continuity

37

38 of 69

5. Gestalt Principles: Symmetry

38

Items that are similar in color, shape, size, or texture are perceived as part of the same group.

39 of 69

6. Gestalt Principles: Figure/Ground

39

We instinctively separate a visual field into the figure (the focal point, usually the main figure) and the ground (the background).

40 of 69

6. Gestalt Principles: Figure/Ground

40

41 of 69

6. Gestalt Principles: Figure/Ground

41

42 of 69

7. Gestalt Principles: Common Fate

42

Elements moving in the same direction or changing in the same way are perceived as related or as part of a single group.

43 of 69

7. Gestalt Principles: Common Fate

43

44 of 69

Vision

44

How do we perceive visual elements?

​

How do we perceive color?

45 of 69

Color: Hue, Saturation, and Brightness

45

Saturation is the intensity or purity of a hue from gray tone (no saturation) to pure, vivid color (high saturation).

​

Brightness is the relative lightness or darkness of a particular color, from black (no brightness) to white (full brightness).

​

Brightness = Value and is related to Tone.

​

Hue is the dominant color family or shade on the color spectrum,

46 of 69

Color Wheel

46

47 of 69

Color Harmonies

47

48 of 69

Do colors have meaning?

  • While with the advent of globalization certain colors may have achieved standard meanings (e.g., red for stop, green for go), it is safest to assume that color interpretation will vary from culture to culture

48

49 of 69

Do colors have meaning?

49

50 of 69

Using the Color Palette

  1. 60-30-10 rule: Use 60% for the dominant color, 30% for the secondary color, and 10% towards an accent color, and then iterate

​

  • Use colors consistently in your interface. If you use bright blue for your calls to action on one screen, that same color should be used for calls to action everywhere.

50

51 of 69

Color

51

Optimized to detect edges not absolute brightness and contrast

Ambient lighting and modality effects color perception

Color perception influenced by top down processes (context)

52 of 69

Color: Contrasts

  • Contrast measured by ratio of foreground and background luminance

​

  • Black and white has as ratio of 21:1

​

  • For small text, ratios below 7:1 are hard to read

​

  • For large text, ratios below 4.5:1 are hard to read.

​

52

53 of 69

Color: Influences on Contrast Sensitivity

  • Spatial frequency
    • The closer the lines, the harder it is to see text
    • This is why more contrast is needed for smaller text
  • Illumination
    • Overall illumination effectively reduces contrast
  • Age
    • People require more contrast as they age
  • Dynamic viewing
    • People require more contrast if text is moving because recognition has to happen faster

​

53

54 of 69

Color: Discrimination

  • Depends on three factors
    • Paleness
    • Stimulus size
    • Proximity

​

​

54

The less saturated two colors are, the harder it is to distinguish between them

Color determination is difficult for small or very thin objects (e.g. text)

The greater the distance between stimuli, the more difficult it is to distinguish subtle color differences

55 of 69

Color: Discrimination

  • If color coding text, use obvious color differences from opposite ends of the color spectrum that when rendered in grayscale are differentiated

​

  • Combine color coding with icons

​

  • Don’t use dark reds, blues, or violets against any dark colors. When rendered in grayscale, the text will disappear from a color blind person’s perception

55

56 of 69

Color: Color Blindness or Color Vision Deficiency

56

57 of 69

Color: Color Blindness or Color Vision Deficiency

57

Protanopia: Red may appear as shades of brown or gray, and certain shades of orange, yellow, and green can be confusing.

​

Deuteranopia: Greens may appear beige or tan, and they may confuse reds, greens, and yellows.

58 of 69

Color: Color Blindness or Color Vision Deficiency

  • Approximately 7-10% of Caucasian male population is color deficient
    • Recessive gene on X chromosome, so incidence in women is < 1%
    • Red/green insensitivity is most common
    • Possible to acquire color blindness through damage to the retina, optic nerve, brain or just migraines.
  • Everyone loses color vision in low light
  • Recommendation
    • For critical systems, design in monochrome first
    • Add color later

58

59 of 69

Color: Color Blindness or Color Vision Deficiency

  • Use distinctive colors

59

60 of 69

Color: Color Blindness or Color Vision Deficiency

60

61 of 69

Optical Illusions

61

62 of 69

Optical Illusions due to Overcompensation

  • Design with the user’s goal in mind
    • User-centered design

​

  • Avoid overly complex screens
    • Minimalist approach

​

62

63 of 69

Optical Illusions: Depth

63

64 of 69

Read on your own, Discuss

64

https://www.nngroup.com/articles/principles-visual-design/

65 of 69

Vision: Fixation and Saccade

65

Fixations: Still, focused eye moments.

​

Saccades: Rapid gaze shifts.

​

Scanpath: Eye movement trajectory.

66 of 69

Vision: Scanpath: The Unexpected Visitor

66

Remember the position of the people and objects in the room, estimate the ages of people

67 of 69

Vision: Scanpath

67

68 of 69

Vision: Eye-trackers for Research

68

69 of 69

Attendance & Next Time

  • Perception Cont.

​

  • Cognition

69