mirror of
https://github.com/garrytan/gstack.git
synced 2026-09-11 23:49:01 +02:00
Garry TanandClaude Fable 5
4fce22d708
design-html 57→49KB, design-shotgun 53→50KB. Sections wrap
{{UX_PRINCIPLES}} so scripts/resolvers/design.ts stays the source of
truth; the pretext-patterns STOP sits at the top of Step 3 so the read
provably precedes the Write.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
87 lines
4.6 KiB
Markdown
87 lines
4.6 KiB
Markdown
<!-- AUTO-GENERATED from doctrine.md.tmpl — do not edit directly -->
|
|
<!-- Regenerate: bun run gen:skill-docs -->
|
|
## UX Principles: How Users Actually Behave
|
|
|
|
These principles govern how real humans interact with interfaces. They are observed
|
|
behavior, not preferences. Apply them before, during, and after every design decision.
|
|
|
|
### The Three Laws of Usability
|
|
|
|
1. **Don't make me think.** Every page should be self-evident. If a user stops
|
|
to think "What do I click?" or "What does this mean?", the design has failed.
|
|
Self-evident > self-explanatory > requires explanation.
|
|
|
|
2. **Clicks don't matter, thinking does.** Three mindless, unambiguous clicks
|
|
beat one click that requires thought. Each step should feel like an obvious
|
|
choice (animal, vegetable, or mineral), not a puzzle.
|
|
|
|
3. **Omit, then omit again.** Get rid of half the words on each page, then get
|
|
rid of half of what's left. Happy talk (self-congratulatory text) must die.
|
|
Instructions must die. If they need reading, the design has failed.
|
|
|
|
### How Users Actually Behave
|
|
|
|
- **Users scan, they don't read.** Design for scanning: visual hierarchy
|
|
(prominence = importance), clearly defined areas, headings and bullet lists,
|
|
highlighted key terms. We're designing billboards going by at 60 mph, not
|
|
product brochures people will study.
|
|
- **Users satisfice.** They pick the first reasonable option, not the best.
|
|
Make the right choice the most visible choice.
|
|
- **Users muddle through.** They don't figure out how things work. They wing
|
|
it. If they accomplish their goal by accident, they won't seek the "right" way.
|
|
Once they find something that works, no matter how badly, they stick to it.
|
|
- **Users don't read instructions.** They dive in. Guidance must be brief,
|
|
timely, and unavoidable, or it won't be seen.
|
|
|
|
### Billboard Design for Interfaces
|
|
|
|
- **Use conventions.** Logo top-left, nav top/left, search = magnifying glass.
|
|
Don't innovate on navigation to be clever. Innovate when you KNOW you have a
|
|
better idea, otherwise use conventions. Even across languages and cultures,
|
|
web conventions let people identify the logo, nav, search, and main content.
|
|
- **Visual hierarchy is everything.** Related things are visually grouped. Nested
|
|
things are visually contained. More important = more prominent. If everything
|
|
shouts, nothing is heard. Start with the assumption everything is visual noise,
|
|
guilty until proven innocent.
|
|
- **Make clickable things obviously clickable.** No relying on hover states for
|
|
discoverability, especially on mobile where hover doesn't exist. Shape, location,
|
|
and formatting (color, underlining) must signal clickability without interaction.
|
|
- **Eliminate noise.** Three sources: too many things shouting for attention
|
|
(shouting), things not organized logically (disorganization), and too much stuff
|
|
(clutter). Fix noise by removal, not addition.
|
|
- **Clarity trumps consistency.** If making something significantly clearer
|
|
requires making it slightly inconsistent, choose clarity every time.
|
|
|
|
### Navigation as Wayfinding
|
|
|
|
Users on the web have no sense of scale, direction, or location. Navigation
|
|
must always answer: What site is this? What page am I on? What are the major
|
|
sections? What are my options at this level? Where am I? How can I search?
|
|
|
|
Persistent navigation on every page. Breadcrumbs for deep hierarchies.
|
|
Current section visually indicated. The "trunk test": cover everything except
|
|
the navigation. You should still know what site this is, what page you're on,
|
|
and what the major sections are. If not, the navigation has failed.
|
|
|
|
### The Goodwill Reservoir
|
|
|
|
Users start with a reservoir of goodwill. Every friction point depletes it.
|
|
|
|
**Deplete faster:** Hiding info users want (pricing, contact, shipping). Punishing
|
|
users for not doing things your way (formatting requirements on phone numbers).
|
|
Asking for unnecessary information. Putting sizzle in their way (splash screens,
|
|
forced tours, interstitials). Unprofessional or sloppy appearance.
|
|
|
|
**Replenish:** Know what users want to do and make it obvious. Tell them what they
|
|
want to know upfront. Save them steps wherever possible. Make it easy to recover
|
|
from errors. When in doubt, apologize.
|
|
|
|
### Mobile: Same Rules, Higher Stakes
|
|
|
|
All the above applies on mobile, just more so. Real estate is scarce, but never
|
|
sacrifice usability for space savings. Affordances must be VISIBLE: no cursor
|
|
means no hover-to-discover. Touch targets must be big enough (44px minimum).
|
|
Flat design can strip away useful visual information that signals interactivity.
|
|
Prioritize ruthlessly: things needed in a hurry go close at hand, everything
|
|
else a few taps away with an obvious path to get there.
|