5 min read
On this page

HCI Foundations

Human Information Processing

Human-computer interaction rests on understanding how humans process information. The human processor model (Card, Moran, Newell, 1983) divides processing into three subsystems.

Perceptual Processing

The perceptual system receives stimuli through sensory channels and organizes them into meaningful patterns.

  • Visual processing: ~100ms cycle time. Dominant channel for most interfaces. Sensitive to motion, contrast, and color.
  • Auditory processing: ~70ms cycle time. Critical for alerts, notifications, and voice interfaces.
  • Haptic processing: Touch and proprioception. Increasingly important with touchscreens and wearables.

Change blindness occurs when users fail to notice significant visual changes, especially during interruptions or saccades. This has direct implications for interface feedback design.

Cognitive Processing

The cognitive processor interprets perceptual input, makes decisions, and plans actions (~70ms cycle time).

Key constraints:

  • Working memory: 7 +/- 2 items (Miller, 1956), more accurately 4 +/- 1 chunks (Cowan, 2001)
  • Processing bottleneck: Humans are essentially single-channel processors for conscious decision-making
  • Dual-process theory: System 1 (fast, automatic, intuitive) vs. System 2 (slow, deliberate, analytical)

Motor Processing

The motor system executes physical actions (~70ms cycle time). Governed by speed-accuracy tradeoffs and biomechanical constraints.

Predictive Models of Interaction

Fitts' Law

Movement time to acquire a target is a function of distance and target size:

MT = a + b * log2(2D / W)

MT = movement time
D  = distance to target center
W  = width of target along movement axis
a, b = empirically determined constants

Design implications:

  • Make frequently used targets large (big buttons for primary actions)
  • Place targets near the cursor's likely position
  • Screen edges and corners have effectively infinite width (edge targeting)
  • Minimum recommended touch target: 44x44 CSS pixels (Apple), 48x48dp (Google)

Hick's Law (Hick-Hyman Law)

Decision time increases logarithmically with the number of choices:

RT = a + b * log2(n)

RT = reaction/decision time
n  = number of equally probable alternatives

Design implications:

  • Reduce option counts in menus and navigation
  • Group and categorize choices hierarchically
  • Progressive disclosure: reveal complexity gradually
  • Does NOT apply when users already know what they want (expert search)

Steering Law

Time to navigate through a constrained path (e.g., nested dropdown menus):

T = a + b * (D / W)

D = path length
W = path width

This explains why cascading dropdown menus are difficult to use --- the user must steer through a narrow tunnel. Solutions include mega menus, delay timers, and diagonal tolerance zones (the "Amazon triangle").

Human Memory

Sensory Memory

  • Iconic (visual): ~250ms duration, high capacity
  • Echoic (auditory): ~3-4 seconds duration

Short-Term / Working Memory

  • Duration: ~20 seconds without rehearsal
  • Capacity: ~4 chunks
  • Design implication: Do not require users to remember information across screens. Display contextual info where needed.

Long-Term Memory

  • Declarative: Facts and events (explicit recall)
  • Procedural: Skills and habits (implicit, automatic)
  • Recognition is far easier than recall --- prefer menus and options over blank input fields

Memory and Interface Design

Recognition over recall:
  BAD:  "Enter the command to save"
  GOOD: [File] > [Save]  or  Ctrl+S shown in menu

Chunking:
  BAD:  4085557234
  GOOD: (408) 555-7234

Attention

Selective Attention

Users focus on task-relevant stimuli while filtering others. Implications:

  • Banner blindness: Users ignore areas that look like ads
  • Inattentional blindness: Unexpected elements go unnoticed during focused tasks

Divided Attention

Multitasking degrades performance for tasks requiring cognitive resources. Automatic (procedural) tasks can be combined with cognitive tasks more successfully.

Designing for Attention

  • Use visual hierarchy to guide attention to important elements
  • Limit distractions and competing stimuli
  • Use animation sparingly --- motion captures attention involuntarily
  • Notifications should be proportional to urgency

Conceptual Foundations

Mental Models

A mental model is the user's internal representation of how a system works. Users form mental models through experience, analogy, and exploration.

Designer's Model  -->  System Image  -->  User's Model
(conceptual model)    (the interface)    (mental model)

Goal: User's model should align closely with the designer's model.
The system image is the only communication channel.

When mental models are wrong, users make systematic errors. Good design makes the system's conceptual model transparent.

Affordances and Signifiers (Norman, 2013)

Affordance: A relationship between an object's properties and an agent's capabilities that determines how the object could be used. A flat surface affords support; a button affords pressing.

Signifier: A perceivable indicator that communicates where and how to act. Affordances exist whether or not they are visible; signifiers make them discoverable.

Physical example:
  Door handle (bar)  -> signifies PUSH
  Door handle (pull) -> signifies PULL
  Flat plate         -> signifies PUSH only

Digital example:
  Raised/shadowed button  -> signifies clickability
  Underlined blue text    -> signifies hyperlink
  Cursor change to pointer -> signifies interactivity

Mapping

The relationship between controls and their effects. Natural mapping leverages spatial or analogical correspondence.

| Mapping Quality | Example | |----------------|---------| | Good | Stove knobs arranged to match burner layout | | Good | Scroll direction matching content movement | | Poor | Light switches with no spatial correspondence to lights | | Poor | Arbitrary keyboard shortcuts with no mnemonic basis |

Feedback

Every action should produce an immediate, perceivable response. Feedback closes the gulf of evaluation --- the gap between the system's state and the user's understanding of it.

Types of feedback:

  • Visual: Button state changes, progress bars, highlighting
  • Auditory: Click sounds, error tones, completion chimes
  • Haptic: Vibration on touch, force feedback
  • System status: Loading indicators, confirmation messages

Timing matters:

  • < 100ms: Feels instantaneous
  • 100ms - 1s: Noticeable delay, no indicator needed
  • 1s - 10s: Show progress indicator

  • 10s: Show progress bar with estimate; allow background operation

Norman's Gulfs

  • Gulf of Execution: Distance between user's goal and available actions. Reduced by good affordances, signifiers, and mapping.
  • Gulf of Evaluation: Distance between system state and user's understanding. Reduced by good feedback and visibility of system status.

Seven Stages of Action (Norman)

1. Goal        - Form the goal
2. Plan        - Plan the action
3. Specify     - Specify the action sequence
4. Perform     - Execute the action
   ---- WORLD CHANGES ----
5. Perceive    - Perceive the state of the world
6. Interpret   - Interpret the perception
7. Compare     - Compare outcome with goal

Each stage is an opportunity for design to help or hinder the user. Errors can occur at any stage: forming the wrong goal, planning the wrong action, misperceiving feedback, or misinterpreting results.

Key Takeaways

| Principle | Core Insight | |-----------|-------------| | Fitts' Law | Bigger and closer targets are faster to acquire | | Hick's Law | Fewer choices mean faster decisions | | Steering Law | Constrained paths are slow to navigate | | Memory limits | Support recognition; don't demand recall | | Mental models | Make system behavior match user expectations | | Affordances | Design objects so their use is self-evident | | Feedback | Every action needs a visible, timely response |