Human-Computer Interaction – Design & Perceptual Organisation

Perception

  • Definition

    • A cognitive process where individuals organize and interpret sensory impressions to assign meaning to their environment.
    • Behaviour is driven by the perceived reality, not objective reality.
    • The human mind constantly assembles, organizes, and categorises incoming information.

  • Design relevance

    • Interfaces must match users’ expectations and mental models, not just factual accuracy.
    • Mis-alignment between system state and user perception leads to errors, frustration, and reduced trust.

Perceptual Process (High-level Flow)

  • Stimuli ➔ Receiving ➔ Selective Attention ➔ Perceptual Organisation ➔ Interpretation ➔ Response
  • Key stages
    • Receiving / Organising: Raw sensory input enters the system.
    • Selective Attention: Only a subset is granted cognitive “bandwidth.”
    • Perceptual Organisation: Grouping of stimuli into recognisable patterns.
    • Interpretation: Assigning semantic meaning.
    • Response: Behavioural, cognitive, or emotional reaction.

Perceptual Organisation (General)

  • The brain groups stimuli into coherent, recognisable wholes.
  • Example: Hearing “wooden object with four legs” instantly evokes a single mental image (a chair) before physically seeing it.
  • Design takeaway: Leverage conventions (icons that look like folders, trash-cans, etc.) so users recognise function without analysis.

Perceptual Illusions

  • Defined as reliable perceptual errors—situations where perceived properties (length, brightness, area, angle) deviate from measurable reality.
  • Illustrative slides (“THE CAT/ABC/157”, SCIENCE → “S615N65 1986 OPIL”) show how identical shapes/letters are read differently depending on surrounding context.
  • Design warning: Context can systematically mislead; verify colour contrasts, angles, gradients, or motion cues will not create unintended illusions.

Pre-Attention (Low-Level Vision)

  • Pre-attentive processing

    • A small, fixed set of visual attributes are detected in <200\,\text{–}\,250\,\text{ms}—faster than eye-movement latency.
    • If decision time remains constant as distractors increase, the feature is deemed pre-attentive (parallel rather than serial search).

  • Core design implications

    • Use distinctive pre-attentive features (colour hue, curvature, orientation…) to make critical information pop-out.
    • Avoid combining two or more features (conjunction search) for elements that must be found quickly.
Demonstrations from slides
  • Pop-out search: Target red circle among green circles—detection time ≈ constant (parallel).
  • Shape pop-out: Curved vs angular objects.
  • Conjunction failure: Red circle among red squares + green circles—requires serial scanning.
  • “How many 3’s?” matrix: illustrates difficulty when target feature isn’t pre-attentive.
Catalogue of Pre-Attentive Features (as listed)
  • Colour (hue, intensity), curvature, size, length/width, orientation, closure, density/contrast, numerosity estimation, line terminators, intersections, flicker, motion direction/velocity, 3-D depth cues, lighting direction, binocular lustre, artistic properties.

Influences on Perception (Slides 23-26)

  • Though slides list only headings, common factors include context, culture, prior knowledge, emotional state, and physical limitations (vision acuity, colour blindness).
  • Design: Provide redundancy and customisation (e.g., colour-blind safe palettes, localisation).

Gestalt Principles (Laws of Perceptual Organisation)

Overarching statement: “The whole is other than the sum of its parts.” Understanding these laws enables designers to craft interfaces that align with innate visual cognition.

Summary List (slide 29)

Proximity · Similarity · Continuity · Closure · Symmetry · Figure-Ground · Common Fate · Connectedness · Simplicity (Prägnanz) · Past Experience.

1. Proximity
  • Rule: Objects close in space are perceived as a group.
  • Interface guidance
    • Group related controls (e.g., Back/Forward buttons).
    • Insert adequate whitespace between unrelated elements to avoid false grouping.
  • Examples
    • Good vs bad toolbar spacing in Microsoft IE screenshots.
    • Yahoo! signup form: section headings vs fields.
    • Lowe’s e-commerce page: price blocks vs company-info links.
    • Column text demo: insufficient gutter blurs separation; added space restores clarity.
2. Similarity
  • Rule: Visually similar objects (colour, shape, size) appear related.
  • Use cases: Icon families, tag styles, status indicators.
  • Countermeasure: If similarity causes confusion, break it via different hues or leverage proximity.
  • Slide demos: Shape/size/colour arrays, browser preference panes, macOS Finder smart folders, BBC headline list where link style groups categories.
3. Continuity (Good Continuation)
  • Rule: The eye prefers flowing lines & curves; it completes paths rather than seeing abrupt breaks.
  • Applications: Metro maps, line graphs, breadcrumb trails.
  • Examples: Mis-aligned vs aligned graphs; numbered workflow diagram that also uses arrows & proximity; bad IE menu where broken alignment disrupts scan path.
4. Closure
  • Rule: Incomplete figures tend to be perceived as complete.
  • Implications: Logos (IBM, WWF panda), “white-space” icons, skeleton loading screens.
  • Slides: Triangle formed by pac-man circles; stack/folder/database pictograms; “COHERENCE” word with missing strokes still legible.
5. Symmetry
  • Rule: Symmetrical forms are inherently preferred and simplified by the brain.
  • Benefits: Faster recognition, aesthetic appeal.
  • Design: Balance layouts, dialog boxes.
  • Warning: Asymmetry can be used intentionally to attract attention or signal exception.
  • Examples: Vertical mirror pairs; bad vs improved list layouts where symmetry reduces cognitive load.
6. Figure-Ground
  • Rule: Visual field is divided into figure (focus) and ground (background).
  • Influencing variables: Relative size, contrast, attention.
  • Categories
    • Stable: Clear distinction.
    • Reversible: Both regions vie for figure status (Rubin’s vase).
    • Ambiguous: Minimal cues—may oscillate.
  • Design: Maintain high contrast for text, avoid ambiguous overlays, use layering & shadows for depth.
  • Slides: Reversible example; portfolio site with call-to-action button isolated via contrast.
7. Common Fate
  • Rule: Elements moving in the same direction are grouped.
  • Examples: Dragging multiple desktop icons; loading spinners comprising multiple pills rotating together.
  • Design: Animated transitions that keep related components in a single motion path reinforce grouping.
8. Connectedness
  • Rule: Items linked by lines, frames, or shading are perceived as a unit.
  • Stronger than proximity or similarity when cues conflict.
  • Usage: Card layouts, bordered fieldsets, accordion headers.
  • Slide demos: News channel boxes with outlines; flight dashboard with line connectors.
9. Simplicity (Prägnanz)
  • Rule: People seek the simplest, most stable interpretation possible.
  • Outcome: Complex scenes are reduced to basic shapes.
  • Examples: Olympic rings seen as five circles, not overlapping curved lines; Twitter sign-in page refined vs noisy version.
  • Design mantra: "Remove until nothing breaks."
10. Past Experience
  • Rule: Elements frequently encountered together in an individual’s history are grouped.
  • Contextual & culturally dependent; e.g., letter pairs “qu” in English, or traffic-light colour positions.
  • Slide: Repetitions of the word “minimum” – prior reading experience helps identify the group quickly despite tight spacing.

Practical UI/UX Takeaways

  • Use pre-attentive cues for error alerts, status indicators, and critical warnings (e.g., red + icon curvature).
  • Leverage proximity and similarity to create logical structure in forms, toolbars, and menus.
  • Maintain continuity in navigation flows; avoid broken alignments or jagged reading paths.
  • Employ closure & symmetry for engaging logos and icons while reducing visual complexity.
  • Ensure sufficient figure-ground contrast; respect accessibility guidelines (e.g., WCAG contrast ratios ≥4.5:1\ge 4.5:1 for normal text).
  • Animate groups with common fate so motion reinforces, not confuses, relationships.
  • Use borders or background panels (connectedness) sparingly but decisively to highlight meaningful clusters.
  • Default to simplicity (Prägnanz)—users will impose it anyway, so design with clear hierarchies.
  • Consider past experience: adopt platform conventions (hamburger menu on mobile, Ctrl+S for save) to shorten learning curves.

Ethical & Practical Considerations

  • Illusion-induced errors: Avoid layouts that can mislead (e.g., length illusions causing misinterpretation of progress bars).
  • Accessibility: Pre-attentive features may fail for colour-blind or motion-sensitive users; include alternative cues (shape + text).
  • Cultural Variance: Past-experience principle differs globally (e.g., reading direction LTR vs RTL impacts proximity & continuity).
  • Cognitive Load: Overuse of grouping cues can overwhelm; strive for consistent minimalism.

Quick Reference Equations & Facts

  • Pre-attentive threshold: t_{\text{pre}} < 250\,\text{ms}.
  • Eye-movement latency: tsaccade≈200 mst_{saccade} \approx 200\,\text{ms} (therefore anything faster must be parallel processing).
  • WCAG text contrast: Luminosity ratio≥4.5:1\text{Luminosity\ ratio} \ge 4.5:1 normal, ≥3:1\ge 3:1 large text.

Recap Checklist for Designers

  • [ ] Group controls by proximity & separate unrelated ones.
  • [ ] Maintain visual similarity only where semantics match.
  • [ ] Align elements to foster continuity.
  • [ ] Use whitespace to support closure & avoid clutter.
  • [ ] Mirror layouts or balance weights for symmetry.
  • [ ] Ensure strong figure-ground contrast.
  • [ ] Animate related objects together (common fate).
  • [ ] Frame critical clusters (connectedness).
  • [ ] Default to simplicity; remove unnecessary decoration.
  • [ ] Respect user conventions (past experience).