UX Compare

ux-extract

• "Across claude.ai, Linear, Notion, Vercel, and Superhuman — how are empty states handled?"
• "Which apps use keyboard shortcuts, and what's the shared vocabulary?"
• "When we build our billing page, should we follow convention or deliberately break it?"

When to use

• Before a build — comparing 3–5 references for the feature class you're about to build reveals the convention and the tradeoffs
• During a design review — "this pattern isn't in any of the 5 references we've extracted — is that deliberate?"
• For team alignment — shared reference for a design decision
• To produce a design brief — convergent patterns become the baseline; divergent patterns become the discussion

Inputs

Available libraries

• docs/ux-extracts/<app-name>/pattern-library.md

• .jez/artifacts/ux-extracts/<app-name>/pattern-library.md

• ~/Documents/.jez/artifacts/ux-extracts/<app-name>/pattern-library.md

Available pattern libraries:
- claude.ai      (extracted 2026-03-12)
- linear.app     (extracted 2026-02-28)
- notion.so      (extracted 2026-01-15) ← 3 months old
- superhuman     (extracted 2026-03-20)

ux-extract

Scope / focus

• Whole library — compare every category across every library (verbose but comprehensive)
• One category — just empty states, just keyboard, just modals (tighter, more useful for specific decisions)
• A feature area — "how do these apps handle settings", crosses multiple categories but stays focused
• A specific question — "which apps support offline?" — searches Notable Absences sections too

Libraries to include

Comparison Process

1. Read every library

pattern-library.md

• Extraction date
• Scope of the extract (whole app vs partial)
• Any Notable Absences section — often the most interesting data for comparison

2. Walk category by category

1. List what each app does — one bullet per app, concrete and verbatim where possible
2. Identify convergence — what's the same across most or all? This is the low-risk default.
3. Identify divergence — where do they genuinely differ? This is a design decision.
4. Flag unique approaches — only one app does X. Either innovation or weirdness; call it out either way.
5. Flag coverage gaps — if an app's library doesn't cover this category, say so (don't silently treat absent-from-library as absent-from-app).

3. Cross-reference absences

4. Synthesise recommendations

• Safe default — the convergent pattern. Following it means users feel at home.
• Deliberate choices — the divergent patterns, with the tradeoff of each so the user can pick.
• Avoid — unique-to-one patterns unless there's a clear reason why that one app does it differently.
• Gaps worth filling — absences that are surprising, or that your users would benefit from seeing addressed.

Output

docs/ux-comparisons/<topic>-YYYY-MM-DD.md

.jez/artifacts/ux-comparisons/<topic>-YYYY-MM-DD.md

empty-states

keyboard-shortcuts

onboarding

destructive-actions

# UX Comparison: Empty States

Compared: claude.ai, linear.app, notion.so, superhuman
Date: 2026-04-19
Scope: How these apps handle empty states across list views, onboarding, and zero-data dashboards.

## At a glance

[2-3 sentences: what converges, what diverges, what's missing across the set]

## Pattern-by-pattern

### Empty list state

- **claude.ai**: illustration + headline + description + primary CTA + 3 shortcut hints
- **linear**: headline only, small text, no CTA
- **notion**: template picker (unique — offers 12 templates)
- **superhuman**: empty state not reached in extract (all-data demo account)

Convergence: most show some form of guidance; none are fully blank.
Divergence: claude.ai guides toward keyboard workflow; notion guides toward templates.
Unique: notion's template-first empty state.
Coverage gap: superhuman not assessed.

### Empty search results
[...]

## Recommendations

- **Safe default**: illustration + one-line description + primary CTA. All convergent apps do this.
- **Consider**: shortcut hints (like claude.ai) if your power-user persona is strong. Tradeoff: adds visual noise that doesn't help first-time users.
- **Skip**: notion's template picker unless you have a templates feature.
- **Fill a gap**: none of the 4 apps explain *why* the list is empty. A one-liner ("No clients yet — add your first to get started") is convergent practice and worth preserving.

## Source libraries

- claude.ai — 2026-03-12
- linear.app — 2026-02-28
- notion.so — 2026-01-15 (stale, re-extract recommended)
- superhuman — 2026-03-20

Autonomy

• Just do it: Discover available libraries, read them, write the comparison document, cite specific screenshots or copy from the source libraries
• Ask first: If the user didn't specify scope — one focused question is cheaper than a sprawling comparison
• Stop and confirm: If fewer than 2 usable libraries exist — comparing is impossible with 1 library, suggest

  ux-extract

  first

Reference files

Tips

• Don't re-list everything from every library. The comparison is value-add synthesis. If you're just copying bullets from 5 libraries, you're not comparing.
• Convergence is usually the safest choice, but not always the most interesting one. Call out where convergence might be copy-paste rather than good design.
• Cite screenshots from the source libraries — don't copy them. "See claude.ai pattern library § Empty States, screenshot 502" keeps extracts as the single source of truth.
• Stale libraries are still useful — just note the date. A 12-month-old library is a snapshot of that moment, not nothing.
• Recommendations must be opinionated. "It depends" is the weakest possible output. State a position. The user can disagree.
• Comparisons age too. Re-run when underlying extracts get refreshed, or when a new reference enters the set.

Future: more than 5 apps

• Tier 1 (closest to your app) — detailed bullets
• Tier 2 (reference-class) — summary bullets
• Tier 3 (outliers, novel approaches) — mention by exception