UX Design Principles

Overview

This skill provides UX design expertise and core design principles. Apply these automatically when designing or implementing user interfaces.

Core Design Laws

Fitts's Law

Law: The time to acquire a target is a function of distance and size.

Application:

•Touch targets ≥44px (iOS HIG) or ≥48dp (Material)
•Large, close buttons for important actions
•Edges and corners are fastest (infinite width)

Implementation:

css

button {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 24px;
}

Hick's Law

Law: Decision time increases logarithmically with choices.

Application:

•≤7 options visible at once
•Use progressive disclosure for advanced features
•Group related options
•Provide smart defaults

Implementation:

•Initial screen: 3-5 primary actions
•Advanced options: Behind "More" or settings
•Wizards: One decision per step

Miller's Law

Law: Working memory holds 7±2 items.

Application:

•Chunk information into groups
•Navigation: ≤7 top-level items
•Forms: Group related fields
•Lists: Use pagination or virtualization

Implementation:

code

Navigation:
├─ Dashboard
├─ Projects
├─ Team
├─ Settings
└─ Help
(5 items - within 7±2 limit)

Jakob's Law

Law: Users expect your site to work like others they know.

Application:

•Follow platform conventions (iOS, Android, Web)
•Logo in top-left links to home
•Search in top-right
•Cart icon in header
•Standard form patterns

Implementation:

•iOS: Bottom tab bar, swipe back
•Android: Navigation drawer, FAB
•Web: Header with logo/nav, hero section

Aesthetic-Usability Effect

Law: Beautiful designs are perceived as easier to use.

Application:

•Clean, consistent visual design
•Proper spacing (whitespace)
•Clear visual hierarchy
•Professional typography

Implementation:

css

/* Spacing system (8px base) */
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 48px;

Progressive Disclosure

Law: Show only what's needed now, hide complexity.

Application:

•Basic features upfront
•Advanced features in menus
•Expand/collapse sections
•Wizard flows for complex tasks

Implementation:

code

User Profile (Initial):
├─ Name
├─ Email
└─ [Advanced Settings] (collapsed)

User Profile (Expanded):
├─ Name
├─ Email
└─ Advanced Settings ▼
    ├─ Timezone
    ├─ Language
    ├─ Privacy
    └─ Notifications

Recognition Over Recall

Law: Show options, don't make users remember.

Application:

•Dropdowns instead of text input
•Autocomplete for known values
•Recently used items
•Visible navigation

Implementation:

html

<!-- Good: Recognition -->
<select>
  <option>United States</option>
  <option>Canada</option>
  <option>United Kingdom</option>
</select>

<!-- Bad: Recall -->
<input type="text" placeholder="Enter country">

Doherty Threshold

Law: Productivity soars when computer responds in <400ms.

Application:

•Instant feedback (<100ms)
•Loading states (100-400ms)
•Skeleton screens (>400ms)
•Optimistic UI updates

Implementation:

javascript

// Show loading immediately
setLoading(true);

// Optimistic update
updateUI(data);

// Then send request
await api.save(data);

UI Component Specifications

Buttons

Primary Button:

code

Size: 44px min height
Padding: 12px 24px
Border-radius: 8px
Font: 16px, semibold
Color: High contrast (4.5:1 ratio)
State: hover, active, disabled, loading

Button Hierarchy:

•Primary: 1 per screen (main action)
•Secondary: Supporting actions
•Tertiary: Low-emphasis actions

Forms

Best Practices:

•Label above input (easier to scan)
•Input height: 44-48px
•Error message below input
•Inline validation after blur
•Group related fields

Layout:

code

[Label]
[Input field - 44px height]
[Error message (red, 14px)]

[Space: 24px between fields]

[Label]
[Input field - 44px height]

Cards

Structure:

code

Card:
├─ Image (16:9 aspect ratio)
├─ Padding: 16-24px
├─ Title: 18-20px, bold
├─ Body: 14-16px, regular
├─ Action: Button or link
└─ Shadow: Subtle elevation

Navigation

Patterns:

•Mobile: Bottom tab bar (3-5 items)
•Desktop: Top header + sidebar
•Tablet: Adaptive (collapsible sidebar)

Implementation:

•Active state clearly visible
•Icons + labels (not icons alone)
•Consistent positioning

Spacing

8px Grid System:

code

Micro: 4px   (icon-text gap)
XS:    8px   (tight spacing)
S:     16px  (comfortable)
M:     24px  (section spacing)
L:     32px  (major sections)
XL:    48px  (page sections)
XXL:   64px  (hero spacing)

Color & Accessibility

Contrast Requirements

WCAG AA (minimum):

•Normal text: 4.5:1 ratio
•Large text (18px+): 3:1 ratio
•UI components: 3:1 ratio

Implementation: Always check contrast:

code

Text on background: ≥4.5:1
Button on background: ≥3:1
Icons on background: ≥3:1

Color Palette

Structure:

code

Primary:   Brand color (CTAs, links)
Secondary: Supporting color
Success:   Green (#22c55e)
Warning:   Orange (#f59e0b)
Error:     Red (#ef4444)
Neutral:   Grays (backgrounds, borders)

Shades: Each color: 50, 100, 200, ..., 900

•50-100: Backgrounds
•200-300: Borders
•400-600: Interactive elements
•700-900: Text

Responsive Design

Breakpoints

code

Mobile:  < 640px
Tablet:  640px - 1024px
Desktop: > 1024px

Mobile-First Approach

css

/* Mobile (base) */
.container {
  padding: 16px;
}

/* Tablet */
@media (min-width: 640px) {
  .container {
    padding: 24px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

Animation & Motion

Timing

code

Micro-interactions: 100-200ms
Transitions:        200-300ms
Complex animations: 300-500ms

Easing

code

Entering: ease-out (start fast, end slow)
Exiting:  ease-in (start slow, end fast)
Moving:   ease-in-out (smooth)

Implementation

css

button {
  transition: all 200ms ease-out;
}

.modal-enter {
  animation: fadeIn 300ms ease-out;
}

.modal-exit {
  animation: fadeOut 200ms ease-in;
}

Validation Checklist

Use this for every UI:

Layout

• Touch targets ≥44px
• Proper spacing (8px grid)
• Visual hierarchy clear
• Responsive (mobile, tablet, desktop)

Content

• Options ≤7 visible
• Progressive disclosure for complexity
• Recognition over recall

Accessibility

• Color contrast ≥4.5:1
• Keyboard navigation works
• Screen reader friendly
• Focus states visible

Interaction

• Loading states (<400ms)
• Error states with messages
• Success feedback
• Disabled states clear

Consistency

• Follows platform conventions
• Consistent styling
• Predictable behavior
• Familiar patterns

Output Format

When creating UX specifications, use this structure:

markdown

## [Screen Name]

### Purpose
[What this screen does]

### User Journey
[How user arrives here]

### Components

#### [Component Name]
- **Type:** Button/Input/Card/etc.
- **Size:** [dimensions]
- **Content:** [what it contains]
- **Behavior:** [interactions]
- **States:** [default, hover, active, etc.]

### Layout
[ASCII or description of layout]

### Responsive Behavior
- Mobile: [how it adapts]
- Tablet: [how it adapts]
- Desktop: [how it adapts]

### Design Principles Applied
- [ ] Fitts's Law: [how]
- [ ] Hick's Law: [how]
- [ ] Miller's Law: [how]
- [ ] Jakob's Law: [how]
- [ ] Aesthetic-Usability: [how]
- [ ] Progressive Disclosure: [how]
- [ ] Recognition: [how]
- [ ] Doherty Threshold: [how]

Integration with Frontend Skill

When frontend-engineer implements UI:

•Load this ux-design skill for reference
•Apply design principles automatically
•Use spacing system (8px grid)
•Implement responsive breakpoints
•Add loading/error/success states
•Ensure accessibility standards
•No need to ask user about these standards - just apply them