tomevault-io 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
Converted and distributed by TomeVault — claim your Tome and manage your conversions.