Nicholai
f71583fc66
- Add algorithmic-art skill with license, template, and viewer. - Add artifacts-builder skill with scripts and components. - Add brand-guidelines skill with license. - Add canvas-design skill with fonts and license. - Add content-research-writer skill. - Add doc-coauthoring skill. - Add PDF, PPTX, XLSX skill assets. - Update ecosystem manifest and assets. Signed by Hubert The Eunuch
148 lines
3.9 KiB
Markdown
148 lines
3.9 KiB
Markdown
# UX Delight Principles
|
|
|
|
## Table of Contents
|
|
1. [Delight Hierarchy](#delight-hierarchy)
|
|
2. [Micro-Interactions](#micro-interactions)
|
|
3. [Personality & Voice](#personality--voice)
|
|
4. [Progressive Disclosure](#progressive-disclosure)
|
|
5. [Contextual Intelligence](#contextual-intelligence)
|
|
|
|
---
|
|
|
|
## Delight Hierarchy
|
|
|
|
Before pursuing delight, ensure foundation is solid:
|
|
|
|
```
|
|
╭─────────────╮
|
|
│ DELIGHT │ ← Moments of joy, surprise
|
|
├─────────────┤
|
|
│ USABILITY │ ← Efficient, learnable
|
|
├─────────────┤
|
|
│ RELIABILITY │ ← Works consistently
|
|
├─────────────┤
|
|
│ FUNCTIONAL │ ← Does what it claims
|
|
╰─────────────╯
|
|
```
|
|
|
|
**Rule**: Never add delight to broken functionality.
|
|
|
|
---
|
|
|
|
## Micro-Interactions
|
|
|
|
### Delight Opportunities
|
|
|
|
| Trigger | Example | Delight Pattern |
|
|
|---------|---------|-----------------|
|
|
| Task completion | Agent finishes work | Celebration animation |
|
|
| First-time action | Initial conversation | Warm welcome |
|
|
| Milestone reached | 10th task completed | Achievement unlock |
|
|
| Error recovery | Retry succeeds | Relief/encouragement |
|
|
| Wait time | Loading state | Engaging animation |
|
|
| Discovery | Finding hidden feature | Easter egg |
|
|
|
|
### Implementation Guidelines
|
|
- **Subtle > Flashy**: Don't interrupt workflow
|
|
- **Skippable**: Power users can bypass
|
|
- **Contextual**: Match emotional moment
|
|
- **Consistent**: Same action = same response
|
|
|
|
### Animation Timing
|
|
- Micro-feedback: 100-200ms (button press)
|
|
- State transitions: 200-400ms (panel open)
|
|
- Celebrations: 500-1000ms (completion)
|
|
- Attention: 1-2s (notification)
|
|
|
|
---
|
|
|
|
## Personality & Voice
|
|
|
|
### Agent Personality Expression
|
|
|
|
Each agent should feel distinct through:
|
|
|
|
**Language Patterns**
|
|
- Winston (Architect): Precise, uses diagrams
|
|
- Sally (UX): Enthusiastic, user-focused
|
|
- Barry (Quick Flow): Casual, action-oriented
|
|
- John (PM): Formal, strategic
|
|
|
|
**Response Timing**
|
|
- Eager agents: Respond quickly, short messages
|
|
- Thoughtful agents: Slight delay, comprehensive
|
|
|
|
**Visual Expression**
|
|
- Idle animations reflecting personality
|
|
- Custom emoji/icon sets per agent
|
|
- Color accents matching role
|
|
|
|
### Avoiding Uncanny Valley
|
|
- Don't pretend to have emotions agents don't have
|
|
- Acknowledge AI nature when appropriate
|
|
- Consistent personality (no sudden shifts)
|
|
|
|
---
|
|
|
|
## Progressive Disclosure
|
|
|
|
### Complexity Layers
|
|
|
|
**Layer 1: Core Actions (Always Visible)**
|
|
- Chat with agent
|
|
- View agent status
|
|
- Navigate office
|
|
|
|
**Layer 2: Power Features (Discoverable)**
|
|
- Memory dashboard
|
|
- Task assignment
|
|
- Deep work mode
|
|
|
|
**Layer 3: Advanced (On-Demand)**
|
|
- MCP tool inspection
|
|
- Worktree management
|
|
- Context configuration
|
|
|
|
### Disclosure Triggers
|
|
- **Time-based**: Introduce after N sessions
|
|
- **Action-based**: Unlock after completing X
|
|
- **Curiosity-based**: Reward exploration
|
|
- **Need-based**: Surface when relevant
|
|
|
|
### UI Patterns
|
|
- Expandable sections (accordion)
|
|
- "More options" menus
|
|
- Contextual tooltips
|
|
- Inline tutorials
|
|
|
|
---
|
|
|
|
## Contextual Intelligence
|
|
|
|
### Smart Defaults
|
|
Reduce decisions by inferring intent:
|
|
- Default to most-used agent
|
|
- Remember last conversation
|
|
- Pre-fill common inputs
|
|
- Suggest next action
|
|
|
|
### Proactive Assistance
|
|
Offer help before user asks:
|
|
- "Looks like you're stuck. Want help?"
|
|
- "You've been working on X. Ready to commit?"
|
|
- "Mary has context on this. Want to loop her in?"
|
|
|
|
### Environmental Awareness
|
|
React to user's context:
|
|
- Time of day (greetings, energy levels)
|
|
- Work patterns (suggest breaks)
|
|
- Project state (recent errors, blockers)
|
|
- Collaboration (who else is active)
|
|
|
|
### Delight Through Intelligence
|
|
The most delightful experiences feel magical:
|
|
- System anticipates needs
|
|
- Remembers preferences without asking
|
|
- Connects dots user didn't see
|
|
- Removes friction before it's felt
|