tomevault-io 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
Visibility of system status
- Show loading indicators
- Confirm actions completed
- Display progress for long operations
Match between system and real world
- Use familiar language
- Follow real-world conventions
- Avoid technical jargon
User control and freedom
- Provide undo/redo
- Allow cancel actions
- Easy navigation back
Consistency and standards
- Follow platform conventions
- Consistent button styles
- Predictable behavior
Error prevention
- Validate before submit
- Confirmation for destructive actions
- Smart defaults
Recognition rather than recall
- Show options visibly
- Provide context and hints
- Recent items/history
Flexibility and efficiency
- Keyboard shortcuts
- Customizable workflows
- Expert shortcuts
Aesthetic and minimalist design
- Remove unnecessary elements
- Focus on essential content
- White space usage
Help users recognize and recover from errors
- Clear error messages
- Suggest solutions
- Don't blame the user
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
Converted and distributed by TomeVault — claim your Tome and manage your conversions.