Human Capabilities: Perception

Announcements How did your Heuristic Evaluation go? Difficulties doing the process? Insights from combining your work (Group part)? Teams: Did you find workflow problems (Pass 1)? Teams: Did you find low-level problems (Pass 2)? Upcoming due dates (web page).

Perception and the Senses Senses: smell, taste, sight, hearing, touch, proprioception (body position awareness), pain, temperature, balance, ... Change: Habituation: Senses physically react to change. Absence of change leads us to physically lose sensitivity. Eye compensates some by shifting around, but nose can't (so we become sensitized to a smell). But: there is a “just noticeable difference” (jnd) eg: Doubling # photons does not double perceived intensity of a picture.

T&T #23 (Habituating): Wandering Element Where’s that control now? And speaking of Habituation, it can be POSITIVE too – unless you get in the way of it, like Wandering Element. Imagine returning to the garage and your car had moved? Same control, different location. UI Tenets & Traps© | All Rights Reserved

T&T #23: Wandering Element Where’s that control now? Same control, different location. UI Tenets & Traps© | All Rights Reserved

T&T #24 (Habituating): Inconsistent appearance Are these the same thing? Habituating Same control, different appearance. UI Tenets & Traps© | All Rights Reserved

Are these the same thing? Should they look the same? Which trap? Same cue, different appearance. UI Tenets & Traps© | All Rights Reserved

Perception How information is acquired from the world by senses they are the input devices to the brain’s “ALU” so, if doesn’t make it thru senses => not delivered to brain. UI: design UI features that are readily perceivable Q: How can we tell when they are and when they aren’t? A: see next slides.

Perception is Demand-driven and Expectation-driven Pulls in only what it needs (lazy, not eager). No change dulls perception: UI: Repeated “Are you sure?” messages. UI: The rightmost button is always “OK”? Frames (patterns): Sense what you normally sense. This is a a room in a house, so… Priming: Sense what you expect to sense. Look at this bathroom. Biased by context. Makes ventriloquism work (video: 0:52-2:01) Paul Zerdin Habituation can be leveraged for efficiency/understandabitility in a UI too. Great place for T&T #23 & #24: these are Habitation T&Ts, which show us how Habituation should be Leveraged.

Visual perception (low level) Eye: Pupil/lens, place image on retina. From there, to brain. Retina has photoreceptor cells: rods and cones. Rods: tell us dark vs. light. Can detect in very dim light. Lots of rods (120M). Cones can detect color. But need much light to do this. Only a few cones (6-7M). 64% of cones see red, 32% see green, only 2% see blue.

Our visual system reduces complexity We see structure(s) (Gestalt principle). Figure/ground. Symmetry. We see groups. Proximity, similarity, continuity. Common fate. Figure/ground: rectangles are figure, enclosing rectangle and its content is background. Symmetry: as per the caption. Proximitry, similarity: Notice how they make us group things. Continuity: notice that we still see the diamonds. Common fate: demo on the desktop by moving a window.

Exercise: Gestalt Principles Which one(s) do you see in here? (Push “File” to pop it up) (Click “File” again to make it go away) Figure/ground? Symmetry? Proximitry? Similarity? Continuity? Common fate: it appears together and disappears together.

T&T #6: Poor Grouping Quick, mute the call! UI Tenets & Traps© | All Rights Reserved

T&T #6: Poor Grouping Going down? UI Tenets & Traps© | All Rights Reserved

Colors Color-blindness Excessive/gratuitous colorings Red/green color blindness most common: 7-8% of males red from green, 0.4% of women. Excessive/gratuitous colorings distracting unprofessional impart meaning where none/different intended Interface Hall of shame: Compuserve's WinCim 2.0 application

Basic Principles Hue (“color”) vs. light eg, Red vs. light “how much light it reflects” (regardless of hue) eg: closeness to black vs saturation (“how much paint you added”). Light Not much light

Contrast – Howto’s Choose 1 hue, from light recommended hues, lighten, desaturate Choose 2nd hue from dark recommendations, darken, saturate. And not adjacent colors. Not as effective Effective Not as effective

Which is easiest to read and why? What is the time? What is the time? What is the time? What is the time? What is the time?

Other senses Sound (hearing): Touch: Pitch – frequency, loudness – amplitude, location We are good at sound! We have a lot of bandwidth, in part because of language facilities. UIs can use when appropriate but can hog our attention. Touch: Pressure, pain, temperature (hot/cold). Potential for use in advanced UIs. Motor system (input & output system): Often causes errors: wrong button, double-click vs. single-click, ...

Perception take-aways 1 Some UI devices/paradigms leverage more senses than others. eg: WIMP? eg: (fairly basic) cell phone? eg: iPhone? eg: Wii?

Perception take-aways 2 These are pre-brain (or at least pre-“ALU”)! If you want info to get to/from brain, has to make it thru senses first. These are the human UI to the brain. Must be: discernable distinguishable from similar if combined with Change, will be more likely to be perceived, but can steal your attention eg: banner ad examples

Activity In your teams, look at any screen of your team project. Look for good/bad examples of: Gestalt: Figure/ground, similarity, proximity, continuity, symmetry, common fate Habituation. Keep notes! You’ll want to fix the problems you find.