Foundations
Design principles
PRIZM's patterns aren't aesthetic choices — they're shaped by human factors and HCI research. This page documents the principles every C3 and Enterprise template adheres to, with the research that backs each one.
Core — apply across both products
Universal usability principles that show up in every PRIZM template, regardless of product.
Predictable information placement
Endsley (1995)Recurring UI elements live in fixed, predictable locations. They don't move based on app state.
Why
People locate familiar information faster when it occupies a predictable spatial location. Research on attention and perception shows that fixed-position indicators reduce visual search time and prevent change-blindness errors that occur when content migrates between screens.
Cognitive chunking
Miller (1956); Sweller (1988)Limit visible options to ~7±2 at any level of the interface. Use disclosure to extend depth without inflating breadth.
Why
Working memory is finite. Miller's classic capacity result and Sweller's cognitive load theory both predict that surfacing too many concurrent options degrades decision speed and accuracy. The effect compounds as attention is divided across more concurrent tasks.
How it shows up in PRIZM
Icon rails cap at ~8 apps. Side panels group content into ≤5 sections. Menu, Navigation Menu, and Tabs are the tools for keeping breadth low while preserving depth.
Fitts-aware action placement
Fitts (1954)Important actions are large and reachable. Destructive actions are never adjacent to their confirmations.
Why
Fitts' law predicts movement time as a function of target size and distance. Small or crowded targets compound error rates, and the cost of a misclick grows with the stakes of the action. Spatial separation between destructive and confirming actions is a primary defense against accidental commits.
Information layering by task relevance
Yeh & Wickens (2001)Show what the current task needs at the primary layer. Push secondary and on-demand information behind tabs, hover, or disclosure.
Why
Yeh and Wickens' clutter research shows that information density degrades target acquisition non-linearly — small amounts of clutter cost disproportionately. Layered displays preserve density where it matters and remove it where it doesn't.
How it shows up in PRIZM
Templates declare explicit primary / secondary / on-demand regions. Hover Card, Popover, and Sheet are the disclosure primitives.
C3 — for command and control
Principles specific to operator stations and command-and-control contexts. These are where C3 templates diverge most from Enterprise ones.
Operator dark mode
Dark-adaptation research; MIL-STD-1472Dark is the canonical operator state. Light mode exists for daylight, shared-screen, or briefing contexts.
Why
Operator stations run in dim ambient light for hours. Dark interfaces reduce eye strain, preserve dark adaptation for any window-out reference, and minimize scatter on cockpit-style glass. MIL-STD-1472 (DoD human engineering criteria) reflects the same logic for operator workstations.
How it shows up in PRIZM
The dark variant of C3 is the default surface for templates. Light is supported but expected to be the minority case.
Hierarchical alert escalation
Lees (1974); Stanton (1994)Severity escalates by perceptual salience: colour → icon shape → motion → audio. Don't escalate by stacking modalities — match the modality to the severity.
Why
Alarm-flooding research repeatedly shows that operators tune out interfaces where everything competes for top attention. Tiered salience preserves a meaningful difference between routine status and a real emergency.
How it shows up in PRIZM
Use Badge variants tiered by severity (success → warning → danger). Reserve motion (the hero-style pulse) for genuinely urgent indicators. Audio cues, when added, are reserved for the highest tier.
Reversibility — staged commit
Norman (1988); Reason (1990)Destructive C3 actions go through preview-then-commit. Bare buttons are reserved for cheap-to-undo operations.
Why
C3 actions often affect the real world — a deployed asset is deployed. Norman's gulf-of-execution and Reason's slip / lapse error taxonomy both argue for a deliberate confirmation step that requires the operator to re-engage with what they're about to do, not just click again.
Stress-resilient consistency
Driskell & Salas (1996)Layouts repeat across screens. Chrome (top bar, side panels, status regions) does not move between templates.
Why
Under high cognitive load and time pressure, operators revert to overlearned motor patterns. Inconsistent layouts force them back into deliberate visual search — exactly when they have least capacity for it.
How it shows up in PRIZM
All C3 templates compose the same App Shell. The icon-rail order, badge positions, and command surfaces stay constant. Per-app content lives inside the chrome, never replacing it.
Layered transparency for spatial context
Wickens (2002) — proximity compatibility principleFloating panels over canvas content (a map, a feed, a chart) use a translucent surface treatment. Operators retain spatial awareness of the data behind the panel rather than having it occluded.
Why
C3 operators work inside a continuous spatial mental model. When a panel pops on top and covers the underlying canvas entirely, the operator has to mentally re-anchor when it closes. Translucent surfaces preserve the spatial relationship so the canvas remains the operator's persistent reference frame. Reserved for floating surfaces only — alerts, emergency dialogs, and critical-error states stay solid so legibility under stress is uncompromised.
How it shows up in PRIZM
See Liquid glass. The treatment ships with Sheet, Popover, Tooltip, HoverCard, Menu, and ContextMenu via the variant="glass" prop, or via the surface-glass-chrome / surface-glass-panel utility classes for custom chrome.
Enterprise — for websites and applications
Principles specific to Enterprise contexts — webapps, dashboards, marketing pages. Calmer, more progressive, more forgiving than C3 patterns.
Progressive disclosure
Nielsen (2006); Tidwell (2010)Start with the common case. Reveal complexity on demand.
Why
Enterprise users vary widely in expertise and frequency of use. A default surface that exposes every option penalizes the 80% who only need the common path. Disclosure scales the interface to the user's current task.
Form ergonomics
Wroblewski (2008); Jarrett (2009)Group fields by mental model, not by database schema. Minimize required input. Validate inline, not on submit.
Why
Form research consistently shows that grouping fields the way users think about them (Identity → Address → Preferences) outperforms grouping by storage layout (Profile table → Address table). Inline validation cuts correction loops dramatically.
How it shows up in PRIZM
The Field wrapper composes label, hint, error, and input — supporting inline validation. Form templates demonstrate logical grouping and a "required-first" ordering.
Visual hierarchy through whitespace
Tufte (1990); Lidwell, Holden & Butler (2010)Use whitespace to signal grouping. Reserve colour and weight for emphasis, not for structure.
Why
Tufte's data-ink principle and Gestalt proximity grouping both point at the same thing — separation between groups is communicated more reliably by space than by lines or colour. Enterprise pages are read; spacing controls reading rhythm.
How it shows up in PRIZM
The spacing scale is generous in Enterprise. Cards have padding, sections breathe. Borders are used for separation, not decoration.
Default to undo over confirm
Nielsen (1994); Cooper, Reimann & Cronin (2007)Confirmation dialogs interrupt every user to catch the rare mistake. Default to a fast action with a clear undo, unless the action is genuinely irreversible.
Why
Confirmation is the opposite tradeoff from C3. In Enterprise contexts, most actions are cheap to reverse and users perform them frequently — making the common case slower to protect the rare case fails the cost-benefit calculation. C3 templates flip this; Enterprise templates lean toward optimistic UI with undo.
How it shows up in PRIZM
Enterprise destructive flows show a Toast with an Undo action rather than a Dialog confirm. Bulk and truly irreversible actions still confirm — the heuristic is "could a careful user undo this in 10 seconds?"
References
PRIZM is built on established research and scientific principles in human factors and human-computer interaction.
- Cooper, A., Reimann, R., & Cronin, D. (2007). About Face 3: The Essentials of Interaction Design.
- Driskell, J. E., & Salas, E. (1996). Stress and Human Performance.
- Endsley, M. R. (1995). Toward a Theory of Situation Awareness in Dynamic Systems. Human Factors, 37(1).
- Fitts, P. M. (1954). The Information Capacity of the Human Motor System in Controlling the Amplitude of Movement. Journal of Experimental Psychology, 47.
- Jarrett, C., & Gaffney, G. (2009). Forms that Work: Designing Web Forms for Usability.
- Lees, F. P. (1974). Quantification of Man-Machine System Reliability in Process Control. IEEE Transactions on Reliability.
- Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design.
- Miller, G. A. (1956). The Magical Number Seven, Plus or Minus Two. Psychological Review, 63(2).
- Nielsen, J. (1994). Usability Engineering.
- Nielsen, J. (2006). Progressive Disclosure. Nielsen Norman Group.
- Norman, D. A. (1988). The Design of Everyday Things.
- Reason, J. (1990). Human Error.
- Stanton, N. A. (1994). Human Factors in Alarm Design.
- Sweller, J. (1988). Cognitive Load During Problem Solving. Cognitive Science, 12(2).
- Tidwell, J. (2010). Designing Interfaces.
- Tufte, E. R. (1990). Envisioning Information.
- U.S. Department of Defense. MIL-STD-1472: Human Engineering Design Criteria for Military Systems, Equipment, and Facilities.
- Wroblewski, L. (2008). Web Form Design: Filling in the Blanks.
- Yeh, M., & Wickens, C. D. (2001). Display Signaling in Augmented Reality. Human Factors, 43(3).