codymaster 4.1.4 → 4.3.0

package/skills/cm-ux-master/references/heuristic-conflicts.md

@@ -0,0 +1,296 @@
+# Resolving Heuristic Conflicts
+
+When usability principles contradict each other—frameworks for making trade-off decisions.
+
+## The Nature of Conflicts
+
+Usability heuristics are guidelines, not laws. In real design, they often pull in opposite directions. Good UX design requires recognizing these tensions and making thoughtful trade-offs.
+
+**Common tension patterns:**
+- Simplicity vs. Power
+- Consistency vs. Optimal for context
+- Efficiency vs. Error prevention
+- User control vs. Guidance
+- Discoverability vs. Clean interface
+
+---
+
+## Major Heuristic Conflicts
+
+### 1. Simplicity vs. Flexibility
+
+**The tension:**
+- "Keep it simple" (Krug, Nielsen)
+- "Support user control and freedom" (Nielsen #3)
+- "Flexibility and efficiency of use" (Nielsen #7)
+
+**Example:** Photo editing app
+- Simple: Few options, quick editing
+- Flexible: Many controls, professional results
+
+**Resolution framework:**
+
+| Factor | Lean Simple | Lean Flexible |
+|--------|-------------|---------------|
+| User expertise | Novice | Expert |
+| Task frequency | Occasional | Daily |
+| Consequences of error | Low | High |
+| Time pressure | High | Low |
+
+**Design patterns:**
+- Progressive disclosure (simple default, power underneath)
+- Personas-based modes (Basic/Advanced)
+- Contextual features (show when relevant)
+
+### 2. Consistency vs. Context Optimization
+
+**The tension:**
+- "Consistency and standards" (Nielsen #4)
+- "Match between system and real world" (Nielsen #2)
+
+**Example:** Destructive actions
+- Consistent: Red "Delete" button everywhere
+- Context-optimized: Prominent delete for items that should be deleted, hidden for critical data
+
+**Resolution framework:**
+
+| Factor | Lean Consistent | Lean Contextual |
+|--------|-----------------|-----------------|
+| User base diversity | High | Low |
+| Learning curve concern | Yes | No |
+| Action frequency | Common | Rare |
+| Mental model strength | Established | Forming |
+
+**Design patterns:**
+- Consistent patterns, contextual prominence
+- Same actions, different emphasis
+- Gradual introduction of contextual variations
+
+### 3. Efficiency vs. Error Prevention
+
+**The tension:**
+- "Error prevention" (Nielsen #5)
+- "Flexibility and efficiency of use" (Nielsen #7)
+
+**Example:** Checkout flow
+- Error prevention: Confirmation at every step
+- Efficiency: One-click purchase
+
+**Resolution framework:**
+
+| Factor | Lean Error Prevention | Lean Efficiency |
+|--------|----------------------|-----------------|
+| Reversibility | Irreversible | Easily undone |
+| Cost of error | High (money, data) | Low |
+| User familiarity | New users | Power users |
+| Frequency | Rare | Very frequent |
+
+**Design patterns:**
+- Undo instead of confirm (efficient + safe)
+- Confidence-based friction (add steps for risky actions)
+- User-controlled safety level
+
+### 4. Discoverability vs. Clean Interface
+
+**The tension:**
+- "Recognition rather than recall" (Nielsen #6)
+- "Aesthetic and minimalist design" (Nielsen #8)
+
+**Example:** Feature-rich application
+- Discoverable: Show all options visibly
+- Clean: Hide features until needed
+
+**Resolution framework:**
+
+| Factor | Lean Discoverable | Lean Clean |
+|--------|-------------------|------------|
+| Feature frequency | Core features | Edge cases |
+| User expertise | Beginner | Expert |
+| Task complexity | Simple | Complex |
+| Screen real estate | Generous | Limited |
+
+**Design patterns:**
+- Primary actions visible, secondary in menus
+- Progressive disclosure
+- Contextual menus
+- Search/command palettes for power users
+
+### 5. Guidance vs. User Control
+
+**The tension:**
+- Help users avoid errors
+- Respect user autonomy
+
+**Example:** Form validation
+- Guidance: Prevent submission until valid
+- Control: Let users submit and see what happens
+
+**Resolution framework:**
+
+| Factor | Lean Guidance | Lean Control |
+|--------|---------------|--------------|
+| User expertise | Novice | Expert |
+| Error recovery | Difficult | Easy |
+| System tolerance | Low (strict rules) | High (flexible) |
+| User frustration with restrictions | Low | High |
+
+**Design patterns:**
+- Inline guidance (not blocking)
+- Warnings vs. blockers
+- "Are you sure?" rather than "You can't"
+
+---
+
+## Resolution Framework
+
+### Step 1: Identify the Conflict
+
+Name the specific heuristics in tension:
+- Which principle says do A?
+- Which principle says do B?
+- Why can't we fully satisfy both?
+
+### Step 2: Assess the Context
+
+Consider:
+- **User type:** Novice vs. expert
+- **Task criticality:** Browsing vs. financial transaction
+- **Frequency:** One-time vs. daily
+- **Reversibility:** Can they undo?
+- **Consequence:** What happens if wrong?
+
+### Step 3: Prioritize for This Context
+
+| Context | Usually Prioritize |
+|---------|-------------------|
+| Critical data, irreversible | Error prevention > Efficiency |
+| Frequent actions, low stakes | Efficiency > Error prevention |
+| New users, unfamiliar domain | Guidance > Control |
+| Expert users, familiar domain | Flexibility > Simplicity |
+| Limited screen, focused task | Minimalism > Discoverability |
+| Learning interface | Discoverability > Minimalism |
+
+### Step 4: Design for Both When Possible
+
+Often, clever design satisfies both:
+
+| Conflict | Both-And Solution |
+|----------|-------------------|
+| Simple vs. Powerful | Progressive disclosure |
+| Efficient vs. Safe | Undo instead of confirm |
+| Clean vs. Discoverable | Contextual reveal |
+| Consistent vs. Optimal | Consistent patterns, variable emphasis |
+| Guided vs. Controlled | Warnings, not blockers |
+
+### Step 5: Test the Trade-off
+
+Validate with real users:
+- Does the chosen priority work for target users?
+- Are edge cases handled acceptably?
+- Do users understand why limitations exist?
+
+---
+
+## Common Conflict Scenarios
+
+### Scenario: Onboarding Flow
+
+**Conflict:** Efficiency (skip it) vs. Guidance (require it)
+
+**Resolution:**
+- Allow skip but show value
+- Defer to contextual moments
+- Progressive onboarding during natural use
+
+### Scenario: Mobile Navigation
+
+**Conflict:** Discoverability (show all options) vs. Minimalism (hamburger menu)
+
+**Resolution:**
+- Bottom navigation for 3-5 key items
+- Hamburger for secondary items
+- Tab bar > hamburger for primary navigation
+
+### Scenario: Form Validation
+
+**Conflict:** Error prevention (validate immediately) vs. Efficiency (let them type)
+
+**Resolution:**
+- Validate on blur (not on keystroke)
+- Show errors inline, not modal
+- Allow submission, show all errors
+
+### Scenario: Confirmation Dialogs
+
+**Conflict:** Error prevention (confirm everything) vs. Efficiency (just do it)
+
+**Resolution:**
+- Confirm only irreversible/high-cost actions
+- Provide undo instead of confirm
+- Use clear language about consequences
+
+### Scenario: Default Settings
+
+**Conflict:** User control (let them configure) vs. Simplicity (sensible defaults)
+
+**Resolution:**
+- Smart defaults that work for 80%
+- Easy access to change settings
+- Don't require configuration to start
+
+---
+
+## Decision Documentation
+
+When making trade-off decisions, document:
+
+```markdown
+## Design Decision: [Feature]
+
+### Conflict
+[Heuristic A] suggests we should...
+[Heuristic B] suggests we should...
+
+### Context
+- User type: [Novice/Expert]
+- Task: [Critical/Casual]
+- Frequency: [Daily/Occasional]
+- Reversibility: [Yes/No]
+
+### Decision
+We chose to prioritize [Heuristic] because...
+
+### Mitigation
+We addressed the other concern by...
+
+### Validation
+We'll know this is right when...
+```
+
+---
+
+## Key Principles
+
+### 1. Context Is King
+
+The same conflict should be resolved differently in different contexts. A banking app and a social media app may reach opposite conclusions.
+
+### 2. Know Your Users
+
+The trade-off depends heavily on user expertise and expectations. Test with real users, not assumptions.
+
+### 3. Design for Both When Possible
+
+Often, the conflict is artificial and clever design can satisfy both principles.
+
+### 4. Make Conscious Trade-offs
+
+Don't accidentally violate a heuristic. Violate it consciously with reasoning.
+
+### 5. Document Decisions
+
+Future you (and your team) will want to know why choices were made.
+
+### 6. Revisit Trade-offs
+
+As products and users evolve, optimal trade-offs may shift. Periodically review past decisions.

package/skills/cm-ux-master/references/krug-principles.md

@@ -0,0 +1,289 @@
+# 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 |