singular-particular-space/skills/commissioning-skill/fetched-skills/ux-design/references/uxh-krug-principles.md

# Krug's Usability Principles

Full methodology from "Don't Make Me Think" for creating intuitive, usable interfaces.

## The Reality of How Users Use the Web

### Fact 1: We Don't Read, We Scan

**Why users scan:**
- They're on a mission (have a goal)
- They know they don't need to read everything
- They're good at scanning from years of practice

**Design implications:**
- Create visual hierarchy (important things bigger, bolder)
- Use headings and subheadings liberally
- Keep paragraphs short
- Use bulleted lists
- Highlight key terms

### Fact 2: We Don't Make Optimal Choices, We Satisfice

**Satisficing** = "satisfying" + "sufficing"

Users click the first reasonable option, not the best option.

**Why satisficing:**
- Optimizing is hard and takes time
- The penalty for guessing wrong is low (back button)
- Weighing options doesn't improve results much
- Guessing is more fun

**Design implications:**
- Make the right choice obvious
- Don't rely on users reading all options
- Make consequences clear before clicking

### Fact 3: We Don't Figure Out How Things Work, We Muddle Through

Users don't read instructions. They try things until something works.

**Why muddling through:**
- It's not important to them to know how it works
- If they find something that works, they stick with it
- It rarely matters if they don't use something optimally

**Design implications:**
- Make things obvious so "figuring out" isn't needed
- Expect users to use things "wrong"
- Design for recovery from mistakes

---

## Things You Should Never Do

### Don't Make Users Think

Signs that your page makes users think:

| Symptom | Example |
|---------|---------|
| Puzzling labels | "Solutions" (solutions to what?) |
| Links that could go anywhere | "Click here" |
| Unexplained options | Checkboxes without context |
| Unfamiliar terminology | Industry jargon |
| Gratuitous cleverness | Puns, wordplay in navigation |

### Don't Waste Users' Goodwill

Users have a finite reservoir of goodwill:

**Things that diminish goodwill:**
- Hiding info they need (phone numbers, prices)
- Punishing them for not doing things your way
- Asking for unnecessary information
- Making them feel stupid
- Making them repeat themselves
- Sites that look like an afterthought
- Amateur errors (broken links, typos)

**Things that increase goodwill:**
- Know what questions they have and answer them
- Minimize steps
- Put effort into UI quality
- Know what they're likely to struggle with
- Make it easy to recover from errors
- Apologize when things go wrong

### Don't Make Words Seem Important If They're Not

**Happy talk example:**
> "Welcome to our website! We're excited to help you find exactly what you're looking for. Our team of dedicated professionals is committed to providing you with the best possible experience."

**Reality:** Users skip this. It says nothing.

**Rule:** If users will skip it, remove it.

---

## Navigation Must-Haves

### The Permanent Navigation

Every page needs:

1. **Site ID** (logo/name) - Top left corner
2. **Page name** - Prominent, matches link that brought them
3. **Sections** - Major site areas
4. **Local navigation** - What's in this section
5. **Utilities** - Sign in, Search, Help, Cart
6. **"You are here" indicator** - Highlighted nav item

### The Trunk Test

Can users answer these on any random page?

| Question | Element That Answers It |
|----------|------------------------|
| What site is this? | Logo/Site ID |
| What page am I on? | Page title |
| What major sections exist? | Main navigation |
| What are my options here? | Local navigation |
| Where am I in the structure? | Breadcrumbs, highlighted nav |
| How can I search? | Search box |

### Breadcrumbs

**Good breadcrumbs:**
```
Home > Products > Shoes > Running > Men's Trail Runners
```

**Rules:**
- Put them at the top
- Use ">" between levels
- Make the current page name visible but not a link
- Use small text (secondary importance)

---

## Homepage Guidelines

The homepage has to do too many things:

1. Site identity and mission
2. Site hierarchy (navigation)
3. Search
4. Teases (content, features)
5. Timely content
6. Deals
7. Shortcuts (popular items)
8. Registration/Sign in

### Homepage Priorities

**Must do:**
- Tell me what this site is
- Tell me what I can do here
- Tell me why I should be here (and not somewhere else)
- Start me on my way

**Should do:**
- Show me what I'm looking for
- Show me where to start
- Establish credibility and trust

### The Big Bang Theory of Web Design

**You have 3-4 seconds to answer:**
1. What is this?
2. What can I do here?
3. Why should I be here?

### Tagline Guidelines

| Good Tagline | Bad Tagline |
|--------------|-------------|
| Conveys unique value | Generic platitude |
| Specific and informative | Vague and fluffy |
| 6-8 words | Too long or too short |
| Instantly understandable | Requires thought |

Examples:
- Good: "Find anything from thousands of stores"
- Bad: "Welcome to the future of shopping"

---

## Mobile Usability

### Mobile Considerations

**Constraints:**
- Smaller viewport
- Fat fingers (need bigger targets)
- Single-column layout
- No hover states
- Variable attention and context

### Mobile Specifics

| Issue | Solution |
|-------|----------|
| Tiny tap targets | Minimum 44×44 px |
| Crowded nav | Hamburger or bottom nav |
| Long forms | Break into steps |
| Hover-dependent UI | Alternative for touch |
| Text too small | 16px minimum body text |

### Mobile Trade-offs

**What to prioritize:**
- Primary tasks front and center
- Essential content visible
- Fast load times
- Easy to tap, hard to mis-tap

**What to hide/remove:**
- Secondary navigation
- Non-essential images
- Decorative elements
- Long-form content

---

## Usability Testing on $0

### How Many Users?

**3-4 users catches most issues.**

Testing with more users has diminishing returns. Better to test with 3, fix issues, then test again with 3.

### What to Test

1. Can they complete core tasks?
2. Where do they get stuck?
3. What do they say out loud?
4. What did they expect vs. what happened?

### Test Protocol

**Before:**
- "I'm testing the site, not you"
- "Think out loud as you go"
- "There are no wrong answers"

**During:**
- Don't help. Don't explain. Just watch.
- Note hesitations and confusions
- Write down what they say

**After:**
- Ask what was confusing
- Ask what they expected
- Ask how they'd describe the site

### Common Findings

| What Users Do | What It Means |
|---------------|---------------|
| Click wrong thing | Label is confusing |
| Hesitate | Decision isn't obvious |
| Look around lost | "You are here" is unclear |
| Read everything | Design isn't self-evident |
| Use search immediately | Navigation is failing |
| Express confusion | Copy is unclear |

---

## Accessibility Basics

### Why It Matters

- 15-20% of population has some disability
- Accessible sites are better for everyone
- It's often required by law
- It's the right thing to do

### Quick Wins

| Fix | Benefit |
|-----|---------|
| Add alt text to images | Screen readers can describe |
| Use sufficient contrast | Low-vision users can read |
| Allow keyboard navigation | Motor-impaired users can navigate |
| Use semantic HTML | Assistive tech understands structure |
| Add focus indicators | Keyboard users know where they are |
| Make touch targets large | Everyone benefits |