/nw-usability-engineering

name: nw-usability-engineering
description: Cognitive science principles applied to futuristic interface design -- Fitts, Hick, Miller, cognitive load theory, and Nielsen heuristics
user-invocable: false
disable-model-invocation: true

Usability Engineering for Futuristic Interfaces

Core Cognitive Laws

Fitts's Law (Target Acquisition)

**Formula**: Time = a + b * log2(Distance/Width + 1)

**Application**: Important interactive targets must be large enough and close to likely cursor positions.

• Primary actions: minimum 44x44px touch target, 32x32px pointer target
• Screen edges and corners are infinite-width targets (use them for frequent actions)
• Group related actions to minimize cursor travel between sequential operations
• Radial menus (Warframe-style) minimize Fitts distance -- all options equidistant from center

**Futuristic pitfall**: Holographic/floating UI elements tempt designers to scatter controls in space. Every pixel of distance between sequential actions costs time. Cluster related controls even in expansive layouts.

Hick's Law (Decision Time)

**Formula**: Time = b * log2(n + 1) where n = number of choices

**Application**: Reduce simultaneous choices. Use progressive disclosure.

• Maximum 5-7 visible options at any decision point
• Group into categories first, then reveal details (two 5-option menus faster than one 25-option menu)
• Default/recommended option visually distinguished (larger, brighter, positioned first)
• Remove options rather than disabling them when context makes them irrelevant

**Futuristic pitfall**: Sci-fi interfaces love to display everything at once (NERV control room, Minority Report). Real users need progressive disclosure. Show the operational layer first, reveal engineering details on demand.

Miller's Law (Working Memory)

**Principle**: Working memory holds 7 +/- 2 chunks simultaneously.

**Application**: Never present more than 7 distinct information groups per view.

• Dashboard panels: 5-7 maximum per viewport
• Navigation items: 5-7 top-level categories
• Form fields per section: 5-7 visible at once (paginate/accordion beyond)
• Data table columns visible without scroll: 5-7 (allow horizontal scroll for detail)
• Chunk related items visually (proximity, shared background, border)

**Futuristic pitfall**: Dense utilitarian displays (Expanse-style) tempt exceeding 7 chunks. Solve with clear visual grouping -- proximity and shared containers turn 20 data points into 5 chunks of 4.

Cognitive Load Theory

Three types of cognitive load:

| Type | Definition | Design Goal | |------|-----------|-------------| | Intrinsic | Inherent complexity of the task | Cannot reduce -- task IS complex | | Extraneous | Load from poor design | Eliminate -- this is YOUR fault | | Germane | Load from learning/understanding | Facilitate -- support mental model building |

**Reducing extraneous load**:

• Consistent interaction patterns (same gesture/click always does same type of thing)
• Spatial stability (elements stay in predictable positions)
• Visual hierarchy via contrast, size, position (not decoration)
• Contextual help at point of need (not separate documentation)
• Reduce required memory by keeping state visible

**Supporting germane load**:

• Use metaphors that map to user's existing mental models
• Progressive complexity (basic first, advanced on demand)
• Visual feedback confirming correct mental model ("yes, that's how this works")
• Undo support everywhere (reduces fear of exploration)

Nielsen's 10 Usability Heuristics (Futuristic Lens)

1. Visibility of System Status

System communicates what is happening through appropriate feedback within reasonable time.

Futuristic application: Ambient indicators (color temperature, particle density, background pulse) for persistent state. Explicit notifications only for state changes requiring action. Dead Space's health-on-spine is ideal -- always visible, never intrusive.

2. Match Between System and Real World

System uses user's language, follows real-world conventions, information appears natural and logical.

Futuristic application: Sci-fi aesthetic must not override domain language. A medical dashboard should use medical terms, not sci-fi terms. The visual wrapper is futuristic; the content vocabulary is domain-native.

3. User Control and Freedom

Users need a clearly marked emergency exit to leave unwanted states without extended dialogue.

Futuristic application: Every modal has visible close. Every action has undo. Every navigation has back. Gestural interfaces (Minority Report-style) need an explicit "cancel" gesture. Never trap users in an animation sequence.

4. Consistency and Standards

Users should not have to wonder whether different words, situations, or actions mean the same thing.

Futuristic application: Once a visual pattern means something (glow = interactive, pulse = processing, red = critical), it means that EVERYWHERE. A single inconsistency destroys the entire visual language. Document the semantic mapping and enforce it.

5. Error Prevention

Eliminate error-prone conditions or present confirmation before commit.

Futuristic application: Destructive actions require two-step confirmation with distinct interactions (not two identical clicks). Preview results before committing. Constraint inputs to valid ranges rather than validating after entry.

6. Recognition Rather Than Recall

Minimize memory load by making objects, actions, and options visible.

Futuristic application: Keep recent actions, relevant options, and system state visible. Command-line-style interfaces need autocomplete and history. Never require users to remember codes, IDs, or sequences.

7. Flexibility and Efficiency of Use

Accelerators for experts that do not burden novices. Allow customization.

Futuristic application: Keyboard shortcuts, radial menus, command palettes for power users. Visual affordances for novices. Layer complexity: surface (visual),