12-1.md

Visual Perception

CS 349 - User interfaces, LEC 001

7-18-2016

Elvin Yung

Slides

• We want to talk about physical limitations of your body, particularly in your visual acuity, etc.
• We care about this the most because most UIs are visual.

Psychophysics

• Psychophysics is the idea that you are separate from the world.
• Seems philosophical, but the essentially it means that your perception of the physical world isn't perfect.
• Because your visual/audial perception isn't precise enough, we can do things like lossy compression, which lets us throw away data without noticing it.

Temporal Resolution

• aka how you perceive the flickering of light
• At about 45 Hz, an intermittent flickering light starts to seem continuous. This is called the critical flicker frequency (CFF).
• This lets us do animation. Film is 24 fps, NTSC video is 60 fps, etc.
• The Hobbit films were the first to be shot at 48 fps. Some people complained that it made the special effects look more fake.

The Human Eye

• At the edges of the retina, you don't actually have very good resolution.
• At the macula you have the best color depth, etc.

Spatial Resolution

Measuring Acuity

• 20/20 vision: You can perceive lines at 1 arc minute distance
• Implication: A dot pitch (i.e. pixel size) of 0.23 mm is sufficient for most people.

Color

• Objective color: the actual math
• Subjective color: what color we think something is
• We agree on most subjective colors, but not all.
  • Remember the dress meme?

the Visible Spectrum

Additive Color Model

• We mostly use this
• Start with "nothing" (i.e. black), combine colored lights to combine white
• Works particularly well for monitors
• Variants: we use RGB for displays, HSV/HSB for color, YUV for human perception
  • YUV is biased towards things that the human eye can perceive well

Subtractive Color Model

• Colored light is absorbed to create black.
• Works well with printed pages
• CMY/CMYK - common in printing

HSV/HSB

• HSV stands for hue, saturation, and value/brightness.

• It is the most common model that we use for colors.

• Maps to visible spectrum.

• Hue is the actual color.

• Saturation is the richness of the color, i.e. from less hue to more hue.

• Value or brightness is a fixed-saturation representation for

• The model is represented spatially with hue going around, saturation extending out from the center, and brightness extending up.

• You've probably seen HSV represented in a color picker, where you pick the hue in a separate widget, and then get a 2D grid of the saturation and brightness.

Perceiving Color

• Two different light sensors in the eye:

  • 6-7 million cones that perceive color
  • 120 million rods that distinguish light from dark

• Cones and rods are unevenly distributed.

• Rods are mostly in the periphery of vision, cones are mostly in the middle (a lot are packed together in the fovea).

• There's a tiny little blind spot in our vision, where our brains fill in the information.

• Humans are trichromatic. There are three main types of cones:

  • Blue cones aren't good at picking up color.
  • Green cones are great, which means that humans can generally perceive a wide spectrum of green colors.
  • Interestingly, our red cones are better at picking out yellow colors.

• Rods aren't great at picking out color, but they're better than nothing.

• Remember though that it's not just one cone that's responsible for receiving colors, but rather a combination of lots of cones.

• Color presentation matters.

• It's hard to distinguish two colors under these conditions:

  • paleness: the colors are pale.
  • size: the object is small or thin
  • separation: the color patches are far apart.

Color-blindness

• Precisely, color-blindness means that you're missing particular types of cones.
• Monochromacy is when you're missing 2 or 3 types of cone. This is super rare!
• Dichromacy:
  • Protanopia: missing red cones (~1% of males)
  • Deuteranopia: missing green cones (also ~1% of males)
  • Tritanopia: missing blue cones and blue sensitive rods. (super super rare)

Peripheral Vision

• We are essentially blind in the periphery, but it's still good for:
  • Guiding the fovea, which helps with eye movement
  • Detecting motion
  • Helping us see light in the dark, because rods are more light sensitive.

Color and UI

To make messages visible:

• Put messages where users are already looking.
• Put the error message near what it refers to. (If this is in dispute with the above point, bias towards the above)
• Use red for errors (but consider color-blindness)
• Heavy artillery: pop-up alerts, sound, blink, motion, etc.

Displays

• A pixel on a display is really made up of red, blue, and green components, which we call sub-pixels.
• This is why we use RGB for colors: we want to dictate how the pixel is exactly displayed.
• Bit-depth or color-depth in a display is the number of bits allocated to each pixel to specify the color.
  • e.g. 24 bits = 8 bits for each color, 16 bits = 5 red bits, 5 blue bits, 6 green bits (use 1 more bit for green because humans see green better)
  • 24 bits is about 16.7 million colors, which is generally enough.
  • We mostly do 32 bit displays, which lets us add an 8-bit alpha channel.

CRT

• Phosphor coating on screen
• Shoot at phosphor with an electron gun to make it emit light in different colors
• Since the light is very temporary, we need to shoot at it very frequently.
• Very bulky.

LCD

• We gradually shifted from CRT to LCD, because it's more portable.
• Use a layer of liquid crystal
• Rigid crystal membrane in the middle

"LED"

• Basically the same as an LCD display, except with an LED backlight.

OLED

• Like LCD, but throw away the crystal membrane in the middle
• We can build more flexible things with this display.
• Currently super expensive, but getting cheaper!

tl;dr

• The physical world is different from our visual perception of it.
• When designing a UI, it's important to consider that difference.