233 lines
6.7 KiB
Markdown
233 lines
6.7 KiB
Markdown
# Checklist: Designing New Interfaces
|
|
|
|
A 6-step process for approaching any new interface from scratch.
|
|
|
|
---
|
|
|
|
## Step 1: Define the System
|
|
|
|
Understand the technical and contextual landscape before designing.
|
|
|
|
### Key Questions
|
|
|
|
☐ **What type of system is this?**
|
|
- Web application — Cross-platform, easy updates, limited hardware access
|
|
- Mobile app — Native performance, deep device integration, separate iOS/Android
|
|
- Desktop software — Full processing power, deep system access, requires updates
|
|
- Embedded system — Fixed hardware, task-specific, constrained resources
|
|
|
|
☐ **What are the platform constraints?**
|
|
- Screen sizes and orientations
|
|
- Input methods (touch, mouse, keyboard, voice)
|
|
- Performance requirements
|
|
- Offline capabilities needed?
|
|
|
|
☐ **What data inputs/outputs exist?**
|
|
- How do users get data in?
|
|
- How do users get data out?
|
|
- What integrations are required?
|
|
|
|
### Best Practices
|
|
- Match the system type to user needs and contexts
|
|
- Consider browser extensions, mobile companions for web apps
|
|
- Prioritize input methods that fit user context
|
|
|
|
---
|
|
|
|
## Step 2: Model User Tasks
|
|
|
|
Define who users are and what they need to accomplish.
|
|
|
|
### Key Questions
|
|
|
|
☐ **Who are the different user types?**
|
|
- What roles exist?
|
|
- What permissions should each role have?
|
|
- What are their distinct needs?
|
|
|
|
☐ **What are primary tasks users need to accomplish?**
|
|
- What are the jobs-to-be-done?
|
|
- How do tasks break into step-by-step workflows?
|
|
- What are entry points, decision points, and endpoints?
|
|
|
|
☐ **How will users CRUD data?**
|
|
- Create, Read, Update, Delete flows
|
|
- Necessary sequencing and granularity
|
|
- Bulk operations needed?
|
|
|
|
☐ **What are key data entities?**
|
|
- What objects do users interact with?
|
|
- How are entities related? (1:1, 1:many, many:many)
|
|
- What's the data model?
|
|
|
|
### Best Practices
|
|
- Focus on most frequent and important tasks first
|
|
- Use simple, clear language for task descriptions
|
|
- Validate task models with user research or feedback
|
|
- Label buttons with actions ("Add Content" not "Submit")
|
|
|
|
---
|
|
|
|
## Step 3: Organize Information
|
|
|
|
Structure content and navigation before visual design.
|
|
|
|
### Key Questions
|
|
|
|
☐ **What are the high-level categories/sections?**
|
|
- Main content areas or features?
|
|
- How can categories be logically grouped?
|
|
|
|
☐ **What are relationships and hierarchies?**
|
|
- What's the hierarchy of importance?
|
|
- Which entities relate to which? (1:many, many:many)
|
|
|
|
☐ **What are primary and secondary navigation patterns?**
|
|
- Main nav menu structure?
|
|
- Contextual or in-page nav needed?
|
|
- Breadcrumbs? Secondary nav?
|
|
|
|
☐ **What content and actions should be prioritized?**
|
|
- What info is critical for task completion?
|
|
- How can visual hierarchy guide users?
|
|
|
|
### Best Practices
|
|
- Use card sorting or tree testing to validate IA
|
|
- Follow established conventions for nav
|
|
- Provide clear labels and signposts
|
|
- Use breadcrumbs for deep hierarchies
|
|
|
|
---
|
|
|
|
## Step 4: Gather Design Inspiration
|
|
|
|
Research before creating. Stand on shoulders of giants.
|
|
|
|
### Choose Your Originality Level
|
|
|
|
1. **Direct copies** — Replicate existing patterns exactly (fastest, least differentiation)
|
|
2. **Remixes** — Combine elements from multiple sources
|
|
3. **Indirect parallels** — Inspiration from different domains solving similar problems
|
|
4. **Metaphors/analogies** — Real-world concepts informing design
|
|
5. **True innovation** — New patterns from first principles (slowest, highest risk)
|
|
|
|
### Inspiration Sources
|
|
|
|
**Standard:**
|
|
- Dribbble, Behance, Awwwards, Pinterest
|
|
|
|
**More interesting:**
|
|
- ProductHunt — How startups differentiate
|
|
- Layers.to — Higher quality than Dribbble
|
|
- Pageflows.com — User flows of popular apps
|
|
- Mobbin.com — Mobile pattern library
|
|
- Teardowns.ai — AI feature patterns
|
|
|
|
### Best Practices
|
|
- Focus on examples matching your project constraints
|
|
- Look beyond direct competitors to adjacent domains
|
|
- Create moodboards and organized collections
|
|
- Annotate what works and what doesn't
|
|
|
|
---
|
|
|
|
## Step 5: Generate Rapid Ideas
|
|
|
|
Quantity before quality. Explore widely before refining.
|
|
|
|
### Key Activities
|
|
|
|
☐ **Sketch 6+ low-fidelity concepts**
|
|
- Don't judge while creating
|
|
- Set a timer (15-30 min)
|
|
- Explore diverse approaches
|
|
|
|
☐ **Vary the fundamentals**
|
|
- Different layouts
|
|
- Different navigation approaches
|
|
- Different information hierarchies
|
|
- Different interaction patterns
|
|
|
|
☐ **Focus on structure, not style**
|
|
- Boxes and labels, not colors and fonts
|
|
- Workflow and flow, not polish
|
|
|
|
### Idea Generation Techniques
|
|
|
|
- **Crazy 8s** — 8 ideas in 8 minutes
|
|
- **Worst possible idea** — Then invert
|
|
- **How would [X company] do this?** — Steal mental models
|
|
- **Analogy mapping** — How does [unrelated domain] solve this?
|
|
- **Constraint removal** — What if we had no [budget/time/tech] limits?
|
|
|
|
### Best Practices
|
|
- Timebox ideation to prevent overthinking
|
|
- Don't fall in love with first idea
|
|
- Involve others for diverse perspectives
|
|
- Compare against JTBD to evaluate
|
|
|
|
---
|
|
|
|
## Step 6: Enhance Fidelity
|
|
|
|
Move from concept to detailed design.
|
|
|
|
### Fidelity Progression
|
|
|
|
1. **Wireframes** — Structure and layout
|
|
2. **Low-fi mockups** — Basic styling, real content
|
|
3. **High-fi mockups** — Full visual design
|
|
4. **Interactive prototypes** — Testable flows
|
|
|
|
### Key Questions for Enhancement
|
|
|
|
☐ **Are all component states defined?**
|
|
- Default, hover, active, focus, disabled, loading, error
|
|
|
|
☐ **Are all interactions specified?**
|
|
- Primary interactions (clicks, taps)
|
|
- Secondary interactions (hovers, long-press)
|
|
- Gestures and shortcuts
|
|
|
|
☐ **Is content scalability addressed?**
|
|
- Empty states
|
|
- Minimal content
|
|
- Maximum/overflow content
|
|
- Edge cases
|
|
|
|
☐ **Is system feedback clear?**
|
|
- Loading states
|
|
- Success/error feedback
|
|
- Progress indicators
|
|
|
|
☐ **Is user input handled?**
|
|
- Validation states
|
|
- Error messages
|
|
- Help text
|
|
|
|
☐ **Is navigation complete?**
|
|
- All pages/views connected
|
|
- Back navigation
|
|
- Deep linking
|
|
|
|
### Best Practices
|
|
- Apply fidelity checklists (see 11-checklist-fidelity.md)
|
|
- Apply visual style checklists (see 12-checklist-visual-style.md)
|
|
- Test with real content, not lorem ipsum
|
|
- Review against JTBD and macro bets
|
|
|
|
---
|
|
|
|
## Quick Reference: 6-Step Summary
|
|
|
|
| Step | Focus | Output |
|
|
|------|-------|--------|
|
|
| 1. Define System | Platform, constraints, data | System requirements doc |
|
|
| 2. Model Tasks | Users, workflows, entities | Task flows, CRUD maps |
|
|
| 3. Organize Info | Categories, hierarchy, nav | Information architecture |
|
|
| 4. Gather Inspiration | Research, patterns, references | Moodboard, pattern library |
|
|
| 5. Generate Ideas | Divergent exploration | 6+ wireframe concepts |
|
|
| 6. Enhance Fidelity | Detail, polish, edge cases | High-fi designs, prototypes |
|
|
|
|
**Rule:** Resist the urge to skip to Step 6. Steps 1-5 make Step 6 dramatically faster and better.
|