Skip to content

UI Craft Rules

Most craft rules are applications of mechanisms in ux-psychology-principles, not findings of their own. Knowing the mechanism tells you when a rule can bend. Distilled from ux-psychology-research §7–8.

Rules and their mechanisms

Rule Mechanism Grade of the rule
One grid, one spacing scale Proximity, continuity; consistency → first-impression trust (Tuch 2012) Mechanism replicated; "24 px" specifically is folklore
Smaller gaps inside groups than between Proximity Replicated
Dividers and boxes sparingly Common region overrides proximity Replicated
Related things adjacent (rating by title, quantity by CTA) Proximity, split attention, social proof at the decision point Replicated
Muted palette, one accent spent rarely Pop-out needs calm distractors; Von Restorff Replicated
One font family; hierarchy via size, weight, line height Fewer varying dimensions, each means more Folklore as a rule, sound default
Body line height ≈1.5, line length ≈45–75 ch Readability Contested (long lines read faster on screen; moderate preferred)
Small caps get letter-spacing Crowding Contested, small effect
CTA in sentence case, not all caps Caps read as shouting (convention) Folklore for usability, legitimate as tone
One icon style Similarity; mixed styles create accidental isolates Mechanism replicated
Consistent catalogue imagery Similarity, credibility Folklore as a rule
Badges: shortest copy, no redundant icon Redundancy effect Mechanism replicated
Drop redundant display labels ("Price:") Redundancy Replicated — never for form inputs
Variable state lives in controls, not titles Display must match state No study; prevents a real bug
CTA shows the total ("Add 2 kg — €9.80") Working memory, honest anchoring Hiding fees raises revenue (Blake 2021); showing them is the honest choice
Sticky title / sticky action bar on long mobile pages Working memory, Fitts Replicated mechanisms; must not cover focus
Presets from real usage data Defaults, Hick, Fitts Replicated; inflated presets = anchoring abuse

Accessibility is the same mechanisms at their limit

WCAG 2.2 Requirement Mechanism
1.4.3 (AA) Text ≥ 4.5:1, large ≥ 3:1 Figure–ground, legibility. "Lower-contrast body text" is fine only above 4.5:1 — it's aesthetic, not a readability gain (Legge 1987).
1.4.11 (AA) UI components and icons ≥ 3:1 Icons over photos need a scrim or chip to guarantee it.
1.4.12 (AA) Survives line height 1.5, letter spacing 0.12 em No fixed-height text boxes.
2.5.8 (AA) Targets ≥ 24×24 px (44×44 AAA) Fitts.
2.4.11 (AA) Focus not obscured Sticky bars must not cover the focused field.
2.3.3 (AAA) Motion can be turned off prefers-reduced-motion.
1.4.1 (A) Colour never the only signal Badges and status carry text or shape.

The cut-offs (4.5:1, 24 px) are consensus engineering, not experimental thresholds — treat them as floors.