UX Design Skill

User experience principles for creating intuitive, user-centered interfaces.

When to Use This Skill

• Designing user flows
• Improving usability
• Conducting UX audits
• Reducing friction points
• Enhancing user journeys

---

🎯 UX Principles

Nielsen's 10 Usability Heuristics

1. Visibility of system status

   • Show loading indicators
   • Confirm actions completed
   • Display progress for long operations

2. Match between system and real world

   • Use familiar language
   • Follow real-world conventions
   • Avoid technical jargon

3. User control and freedom

   • Provide undo/redo
   • Allow cancel actions
   • Easy navigation back

4. Consistency and standards

   • Follow platform conventions
   • Consistent button styles
   • Predictable behavior

5. Error prevention

   • Validate before submit
   • Confirmation for destructive actions
   • Smart defaults

6. Recognition rather than recall

   • Show options visibly
   • Provide context and hints
   • Recent items/history

7. Flexibility and efficiency

   • Keyboard shortcuts
   • Customizable workflows
   • Expert shortcuts

8. Aesthetic and minimalist design

   • Remove unnecessary elements
   • Focus on essential content
   • White space usage

9. Help users recognize and recover from errors

   • Clear error messages
   • Suggest solutions
   • Don't blame the user

10. Help and documentation

    • Easy to search
    • Context-sensitive help
    • Task-oriented

---

🔄 User Flow Design

Flow Structure

Entry Point → Task Steps → Confirmation → Success State
     ↓
Error Handling → Recovery Path

Sign Up Flow Example

Landing Page
    ↓
Email Input → Validation
    ↓
Password Create → Strength Check
    ↓
Profile Setup (Optional) → Skip Option
    ↓
Welcome / Onboarding
    ↓
Main Dashboard

Reduce Steps

❌ Bad: 5+ step registration
   Email → Password → Name → Phone → Address → Verify

✅ Good: Progressive disclosure
   Email + Password → Verify → (Collect more later)

---

📝 Forms UX

Best Practices

// ✅ Good: Clear labels, inline validation
<form>
  <label htmlFor="email">Email address</label>
  <input 
    id="email" 
    type="email"
    placeholder="you@example.com"
    aria-describedby="email-error"
  />
  {error && <span id="email-error" className="text-red-500">{error}</span>}
</form>

Form Guidelines

Do	Don't
Use single column	Multiple columns on mobile
Show password toggle	Force complex requirements
Inline validation	Validate only on submit
Smart defaults	Make user choose everything
Save progress	Lose data on navigation
Show required fields	Hide what's optional

Error Messages

❌ Bad: "Invalid input"
✅ Good: "Please enter a valid email address (e.g., name@example.com)"

❌ Bad: "Error 500"
✅ Good: "Unable to save. Please try again or contact support."

---

⚡ Reduce Friction

Friction Points

Friction	Solution
Too many clicks	Reduce steps, shortcuts
Waiting	Skeleton loading, optimistic UI
Confusion	Clear labels, tooltips
Errors	Validation, auto-correct
Decision fatigue	Smart defaults, recommendations

Optimistic UI

// Show success immediately, rollback if fails
function handleLike() {
  setLiked(true);  // Instant feedback
  
  api.like(postId).catch(() => {
    setLiked(false);  // Rollback on error
    toast.error('Failed to like');
  });
}

---

📱 Mobile UX

Touch Targets

• Minimum: 44x44px
• Comfortable: 48x48px
• Spacing between targets: 8px+

Thumb Zone

┌────────────────────┐
│   Hard to reach    │  ← Move important actions down
│                    │
│  Natural reach     │  ← Primary navigation here
│                    │
│  Easy access       │  ← Main CTAs, bottom nav
└────────────────────┘

Mobile Patterns

• Bottom navigation (5 items max)
• Pull to refresh
• Swipe actions
• Floating action button
• Modal sheets from bottom

---

🔔 Feedback & States

Every Action Needs Feedback

Click button    → Visual press state
Submit form     → Loading indicator
Success         → Confirmation message
Error           → Clear error + solution
Empty state     → Helpful guidance

State Hierarchy

1. Empty    → "No items yet. Create your first..."
2. Loading  → Skeleton or spinner
3. Error    → Error message + retry
4. Partial  → Show what's available
5. Success  → Full content

---

🧭 Navigation

Navigation Types

Type	Use Case
Top nav	Marketing sites, simple apps
Side nav	Dashboards, complex apps
Bottom nav	Mobile apps (5 items max)
Breadcrumbs	Deep hierarchies
Tabs	Related content sections

Navigation Guidelines

• Current location always visible
• Back button works as expected
• Consistent across app
• Maximum 7±2 items per level
• Search for large sites

---

♿ Accessibility (a11y)

Quick Checklist

• Keyboard navigation works
• Focus states visible
• Color contrast 4.5:1+
• Alt text on images
• Form labels linked
• Error messages announced
• Touch targets 44px+
• No motion for vestibular issues

---

📚 UX Resources

• Nielsen Norman Group
• Laws of UX
• ibelick/ui-skills
• nextlevelbuilder/ui-ux-pro-max-skill