15 KiB
Module 10: Storyboarding
Lesson 1: Transformations Within a View
What happens after the page loads
Pages Aren't Static
You have sketches of your pages now. The default state — keyframe 0.
But pages don't stay frozen. Things change.
- Buttons get clicked
- Forms get filled
- Data loads in
- Errors appear
- Animations play
All of this happens without leaving the page.
Scenario vs. Storyboard
This distinction is crucial:
| Concept | What Changes | Example |
|---|---|---|
| Scenario | Logical views change | User navigates Signup → Welcome |
| Storyboard | Elements within a view change | Button: Default → Loading → Success |
A scenario is the journey across pages. A storyboard is the transformation within a page.
SCENARIO (across pages):
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Page 1: │ nav │ Page 2: │ nav │ Page 3: │
│ Signup │ ─────► │ Welcome │ ─────► │ Dashboard │
└──────────────┘ └──────────────┘ └──────────────┘
STORYBOARD (within one page):
┌──────────────────────────────────────────────────────────────┐
│ Page 2: Welcome │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ K0 │ │ K1 │ │ K2 │ │ K3 │ │
│ │ │ │ │ │ │ │ │ │
│ │ Default │ │ Loading │ │ Success │ │ Animate │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ Same page, element transformations │
└──────────────────────────────────────────────────────────────┘
Why Storyboard?
Without storyboarding:
Developer: "What happens when the user clicks submit?" Designer: "Uh... it submits." Developer: "But what do they see? Loading state? Confirmation? Does the button change?" Designer: "I... didn't think about that."
With storyboarding:
Developer reads specification: "Submit button: Default → Loading (spinner replaces text) → Success (checkmark appears, redirects in 1.5s)" Developer knows exactly what to build.
The Default State Anchor
Everything starts from the default state.
Your sketch from Module 09? That's keyframe 0.
Keyframe 0: Default State
├── User hasn't interacted yet
├── Data hasn't loaded yet
├── No errors, no success
└── This is what they see first
Every transformation you document is a change FROM this state.
What Storyboards Capture
Three Types of Transformations:
1. USER INTERACTIONS
User action → Element responds
┌────────┐ user ┌────────┐
│ [btn] │ clicks │ ... │
└────────┘ ──────► └────────┘
Accordion Expands
2. SYSTEM STATE CHANGES
System event → View updates
┌────────┐ data ┌────────┐
│ ▓▓▓▓▓▓ │ loads │ Content│
└────────┘ ──────► └────────┘
Skeleton Real data
3. ANIMATIONS
Time-based transformation
┌────────┐ 200ms ┌────────┐
│ ✓ │ fade │ ✓ │
│ │ ──────► │Success!│
└────────┘ in └────────┘
Icon + Message
1. Interactions
User does something → Element responds
- Button pressed → Loading spinner appears
- Input focused → Placeholder fades, label animates
- Accordion clicked → Content expands
- Drag initiated → Element follows cursor
2. System State Changes
Something happens in the system → View reflects it
- Data loads → Skeleton replaced with content
- Error occurs → Error message appears
- Timer expires → Session timeout modal
- Real-time update → New item appears
3. Animations
Something changes over time
- Form submitted → Success message fades in
- Page loads → Elements stagger in
- Scroll happens → Header shrinks
- Error occurs → Field shakes
Keyframes
Storyboards are sequences of keyframes.
Each keyframe is a snapshot of the view at a specific moment:
Timeline View:
Keyframe 0: Default State
↓ (user clicks submit)
Keyframe 1: Loading State
↓ (server responds success)
Keyframe 2: Success State
↓ (redirect after 1.5s)
[Navigate to Welcome Screen]
Visual View:
K0 K1 K2
┌─────────┐ ┌─────────┐ ┌─────────┐
│ │ │ │ │ │
│ [Submit]│ │ (...) │ │ ✓ │
│ │ │ │ │ │
└─────────┘ └─────────┘ └─────────┘
Default Loading Success
↑ ↑ ↑
User sees User clicks Server
button button responds
The spaces between keyframes are animations or transitions.
Example: Password Field
K0: Default State K1: User Types K2: Password Strong K3: Show Password
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ Password │ │ Password │ │ Password │ │ Password │
│ ┌──────────────┐ │ │ ┌──────────────┐ │ │ ┌──────────────┐ │ │ ┌──────────────┐ │
│ │ │👁│ │ │ ••••• │👁│ │ │ •••••••• │👁│ │ │ MyP@ssw0rd! │👁│
│ └──────────────┘ │ │ └──────────────┘ │ │ └──────────────┘ │ │ └──────────────┘ │
│ │ │ [▌ ] Weak │ │ [████▌] Strong │ │ [████▌] Strong │
│ │ │ │ │ ✓ │ │ ✓ │
└──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘
Empty input Typing starts Strong password Click eye to reveal
The Transformation:
Keyframe 0: Default State
- Input empty
- Eye icon visible (closed)
- No validation message
Keyframe 1: User Types
- Characters masked as dots
- Strength indicator appears
- Shows "Weak" in red
Keyframe 2: Password Strong
- Strength indicator fills
- Shows "Strong" in green
- Checkmark appears
Keyframe 3: Show Password (on eye click)
- Characters become visible
- Eye icon opens
Each keyframe is a distinct state. The storyboard shows how they connect.
Why Each Change Happens
Don't just show what changes. Explain why.
| Transition | What Changes | Why |
|---|---|---|
| 0 → 1 | Strength indicator appears | User needs feedback while typing |
| 1 → 2 | Color shifts red → green | Reinforce password quality visually |
| 2 → 3 | Characters visible | User wants to verify what they typed |
The "why" connects to user experience. Every change serves a purpose.
What to Storyboard
Focus on complex, meaningful transformations:
| Interaction Type | What to Document |
|---|---|
| Async Actions | Submit → Loading (spinner) → Success/Error states |
| Multi-step Forms | Step progression, validation feedback, dynamic fields |
| Modals/Dialogs | Open animation, content loading, close behavior |
| Expand/Collapse | Accordion opens, content reveals, height animations |
| Complex Dropdowns | Multi-level menus, search filtering, dynamic options |
| Data Loading | Skeleton → Content, empty states, error states |
| Notifications | Entrance animation, auto-dismiss timing, user dismiss |
| Progressive Disclosure | Show more, inline editing, conditional fields |
Don't storyboard: Hover states, focus rings, standard link colors, or other behaviors developers already know.
Timing Matters
Some transitions need timing specifications:
Loading spinner: Appears after 300ms delay
(Don't show spinner for quick operations)
Success message: Visible for 3 seconds
(Then auto-dismiss)
Modal open: 200ms ease-out animation
(Feels snappy but not jarring)
Timing affects user perception. Specify when it matters.
Error States
Don't forget what happens when things go wrong:
Happy Path vs Error Path:
HAPPY PATH: ERROR PATHS:
K0 ──► K1 ──► K2 K0 ──► K1 ──► E1 (Validation)
│ │ │
┌──────┐ ┌──────┐ ┌──────┐ │ │ └─► ┌──────────┐
│Submit│ │ ... │ │ ✓ │ │ │ │ Email! │
└──────┘ └──────┘ └──────┘ │ │ │ ┌──────┐ │
Default Loading Success │ │ │ │error │ │
│ │ │ └──────┘ │
│ │ └──────────┘
│ │ Field error
│ │
│ └─► E2 (Network)
│ ┌──────────┐
│ │ Network │
│ │ error! │
│ │ [Retry] │
│ └──────────┘
│ System error
Error State Details:
Keyframe E1: Validation Error
- Field border turns red
- Error message appears below
- Focus moves to first error field
Keyframe E2: Network Error
- Form grays out slightly
- Error banner appears at top
- Retry button becomes available
Error states are as important as success states.
The Storyboarding Principle
When to create a storyboard:
Ask: "Would a developer know exactly what to build without this?"
- YES → Don't storyboard (it's standard behavior)
- NO → Storyboard it (it needs documentation)
SKIP STORYBOARDING: DO STORYBOARD:
Simple hover state Async form submission
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ Submit │ │ Submit │ │ Submit │ │ ... │ │ ✓ │ │ Error! │
└────────┘ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘
Default Hover K0 K1 K2 K3
❌ Too simple ✅ Complex flow needs documentation
Link color change Modal dialog animation
───────────── ┌──────────────────────────────────┐
Click me │ │
───────────── │ ┌──────────────────────────┐ │
❌ Standard │ │ │ │
│ │ Modal Content │ │
│ │ │ │
│ └──────────────────────────┘ │
│ │
└──────────────────────────────────┘
K0 → K1 (fade in, 200ms ease-out)
✅ Custom timing & effect
Examples:
| Behavior | Storyboard? | Why |
|---|---|---|
| Button hover effect | ❌ No | Standard design system behavior |
| Form submission with loading state | ✅ Yes | Complex async flow with multiple states |
| Link color change on click | ❌ No | Standard browser behavior |
| Modal opening animation | ✅ Yes | Custom timing and entrance effect |
| Input focus ring | ❌ No | Standard accessibility pattern |
| Multi-step wizard progress | ✅ Yes | Complex flow with validation between steps |
The rule: Storyboard custom, complex, or non-obvious behaviors. Skip standard UI patterns.
What's Next
In the next lesson, you'll learn specific techniques for documenting storyboards effectively — the format, tools, and level of detail that makes specifications actionable for developers.
Continue to Lesson 2: Storyboard Format →
Part of Module 10: Storyboarding