UX Patterns Skill

Purpose

Apply proven user experience patterns to create intuitive interfaces.

Navigation Patterns

Global Navigation

Top or side navigation for main sections.

• •Limit to 5-7 primary items
• •Highlight current section
• •Keep consistent across pages

Breadcrumbs

Show location in hierarchy.

• •Use for deep hierarchies
• •Each item is clickable
• •Current page is not a link

Search

Quick access to content.

• •Prominent placement
• •Autocomplete suggestions
• •Clear search button

Form Patterns

Inline Validation

Validate as user types.

• •Show success for valid fields
• •Show errors after field blur
• •Don't validate empty required fields until submit

Progressive Disclosure

Show fields progressively.

• •Start with essential fields
• •Reveal advanced options on demand
• •Group related fields

Smart Defaults

Pre-fill sensible values.

• •Remember previous choices
• •Use location for regional defaults
• •Pre-select common options

Feedback Patterns

Loading States

• •Skeleton screens for initial load
• •Spinners for short waits (< 3s)
• •Progress bars for long operations
• •Optimistic updates when possible

Empty States

• •Explain what should be here
• •Guide user to add content
• •Don't just show "No items"

Error States

• •Explain what went wrong
• •Suggest how to fix it
• •Provide a path forward

Confirmation Patterns

Destructive Actions

• •Require explicit confirmation
• •Show what will be affected
• •Use different color (red) for danger
• •Allow undo when possible