Files of Loops and modes in microinteractions
wondelai/
loops-modes.md
Show the full text258 lines
Loops and Modes in Microinteractions
Loops and modes are the long-term behavior of microinteractions. While triggers, rules, and feedback handle the moment-to-moment experience, loops and modes determine how an interaction evolves over time and how it adapts to different contexts. They are the mechanism for making microinteractions feel alive -- growing with the user, adapting to behavior, and avoiding stagnation.
Understanding Loops
A loop is a cycle that a microinteraction goes through repeatedly. The key question is: what happens when the microinteraction is triggered again? Does it behave the same way? Does it adapt? Does it expire?
Open Loops vs. Closed Loops
| Type | Behavior | Ends When | Example |
|---|---|---|---|
| Open loop | Repeats indefinitely until manually stopped | User or system explicitly stops it | Repeating alarm clock, auto-save every 5 minutes |
| Closed loop | Runs a fixed number of times or for a fixed duration | Completion condition is met | Countdown timer (reaches zero), 3-retry limit |
Designing Open Loops
Open loops run continuously and need careful management to avoid becoming annoying or resource-wasteful.
Design considerations:
| Consideration | Guideline | Example |
|---|---|---|
| Frequency | Match repetition rate to user need | Auto-save: every 30 seconds, not every second |
| Visibility | Show loop status without being intrusive | Small "Last saved: 2 min ago" text in footer |
| Control | Let users adjust or stop the loop | Toggle to enable/disable auto-save; frequency setting |
| Resource impact | Minimize battery, network, and CPU usage | Poll for updates every 60s, not every second; use WebSockets when available |
| Failure handling | Degrade gracefully if a cycle fails | Skip failed auto-save; retry next cycle; show warning after 3 failures |
Designing Closed Loops
Closed loops have a natural endpoint. The design challenge is communicating progress and handling completion.
Design considerations:
| Consideration | Guideline | Example |
|---|---|---|
| Progress | Show how far along the loop is | "Attempt 2 of 3" or progress ring |
| Completion | Clear signal when loop ends | Timer reaches 00:00 with sound/vibration |
| Early exit | Allow cancellation before completion | "Cancel" button on countdown timer |
| End state | Define what happens after the last cycle | Timer shows "Done!" with dismiss action |
| Failure to complete | Handle cases where loop cannot finish | "Max retries reached. Try again manually." |
Long Loops: Behavior Over Time
Long loops are the most powerful -- and most neglected -- aspect of microinteraction design. A long loop asks: how should this microinteraction behave differently the 100th time compared to the first time?
Progressive Reduction
Progressive reduction means removing scaffolding as users demonstrate mastery. The microinteraction starts helpful and becomes streamlined.
| Use Count | Behavior | Rationale |
|---|---|---|
| 1-3 uses | Full labels, tooltips, coaching marks | User is learning |
| 4-10 uses | Labels remain, tooltips disappear | User recognizes patterns |
| 11-50 uses | Labels shrink to icons, hints removed | User knows the interface |
| 50+ uses | Icons only, keyboard shortcuts promoted | User is an expert |
Implementation strategies:
| Strategy | Mechanism | Example |
|---|---|---|
| Use counter | Track trigger count per user | After 5 uses, hide "swipe to delete" tooltip |
| Time-based | Track days since first use | After 7 days, collapse onboarding sidebar |
| Behavior-based | Detect user competence from actions | If user uses keyboard shortcut 3 times, hide toolbar button label |
| Explicit | Let user dismiss scaffolding | "Got it, don't show again" link on tooltip |
Adaptive Long Loops
Adaptive loops change the microinteraction based on accumulated user behavior patterns.
| Adaptation | What Changes | Example |
|---|---|---|
| Smart defaults | Default values shift to match user's typical input | Email compose defaults to the team the user writes to most |
| Frequency adjustment | How often the interaction triggers or repeats | Notification frequency decreases if user ignores 5 in a row |
| Content personalization | What content appears in the interaction | Search autocomplete prioritizes user's past searches |
| Complexity scaling | Simpler version for new users, richer for experts | Photo editor shows basic controls by default, reveals advanced on demand |
| Suggestion refinement | Predictions improve with use | Keyboard autocorrect learns from user's vocabulary |
Long Loop Design Principles
1. Never degrade core functionality. Progressive reduction should remove scaffolding, not features. The base action must always work.
2. Provide a way back. If a tooltip was hidden after 10 uses, provide a "?" icon or help menu to resurface it.
3. Track per-feature, not globally. A user who is expert at one feature may be a beginner at another. Track usage at the microinteraction level.
4. Avoid the uncanny valley. If the system adapts based on behavior, the changes should either be invisible (smart defaults) or transparent (explicit recommendations). Half-visible adaptation feels creepy.
5. Test the 100th use. Most designers test the first use. Few test the 100th. Run the complete interaction 100 times and evaluate: does it still feel right? Is there unnecessary friction for an expert?
Understanding Modes
A mode is a temporary state where the same trigger produces a different result. In edit mode, clicking a paragraph selects it for editing. In view mode, clicking the same paragraph does nothing (or follows a link). Modes are powerful but dangerous.
Why Modes Are Dangerous
| Problem | Description | Real-World Example |
|---|---|---|
| Mode error | User performs the right action in the wrong mode | Typing when Caps Lock is on; drawing when in eraser mode |
| Mode confusion | User does not know which mode they are in | Editing a live document thinking it is a draft |
| Mode amnesia | User forgets they entered a mode | Left phone in Do Not Disturb; missed urgent calls |
| Action inconsistency | Same trigger does different things | Click selects text in edit mode, follows link in view mode |
When Modes Are Justified
Despite their dangers, modes are sometimes the right design choice:
| Justification | Why It Works | Example |
|---|---|---|
| Physical constraints | Limited input controls must serve multiple functions | Caps Lock/Shift on keyboard (limited key count) |
| Separation of concerns | Editing and viewing are fundamentally different activities | Google Docs edit mode vs. suggestion mode vs. view mode |
| Safety | Prevent accidental destructive actions in normal use | "Edit mode" in CMS protects published content |
| Complexity management | Different tasks need different tool sets | Photoshop tools: brush, eraser, selection, text |
Mode Design Guidelines
1. Make the current mode unmistakably visible.
| Method | Where to Apply | Example |
|---|---|---|
| Color-coded background | Entire screen or workspace | Yellow tint in edit mode |
| Persistent banner | Top of screen | "You are editing this page" banner |
| Tool indicator | Near cursor or toolbar | Active tool highlighted in toolbar; cursor changes shape |
| Mode label | Status bar or header | "DRAFT" / "PUBLISHED" / "EDITING" label |
2. Make mode transitions deliberate. Entering and exiting a mode should require a conscious action (button click, keyboard shortcut), not happen accidentally (hover, proximity).
3. Minimize the number of modes. Every mode doubles the testing surface. Two modes mean 2x testing. Five modes mean 5x.
| Number of Modes | Complexity | Guidance |
|---|---|---|
| 1 (no modes) | Low | Ideal -- same action always produces same result |
| 2 | Moderate | Acceptable for clear binary states (edit/view) |
| 3 | High | Reconsider -- can you merge or eliminate one? |
| 4+ | Very high | Almost certainly too many; redesign with fewer modes |
4. Provide mode escape. Users must always have a clear, obvious way to exit a mode. The escape route should be visible at all times while in the mode.
| Escape Method | Implementation | Example |
|---|---|---|
| Explicit button | "Done," "Exit," "Close" button visible in mode | "Done Editing" button in top-right |
| Keyboard shortcut | Escape key exits mode | Esc exits full-screen mode |
| Timeout | Mode auto-exits after inactivity | Edit mode locks after 15 minutes idle |
| Gesture | Swipe down or pinch to dismiss | Swipe down exits full-screen image view |
Avoiding Mode Errors
Mode errors occur when users perform the correct action in the wrong mode. They are one of the most frustrating user experiences because users did the right thing -- the system responded wrong.
Prevention Strategies
| Strategy | How It Works | Example |
|---|---|---|
| Spring-loaded modes | Mode exists only while holding trigger | Caps Lock as long as Shift is held (not toggled) |
| Undo on mode exit | Offer to undo all actions on mode exit | "Discard changes?" dialog when exiting edit mode |
| Mode confirmation | Show a brief confirmation when entering mode | "Edit mode" banner flashes for 2 seconds on entry |
| Preemptive warning | Warn before an action that depends on mode | "You are in eraser mode. Switch to pen to draw." |
| Eliminate the mode | Use a different UI pattern instead | Instead of "edit mode," use inline editing with pencil icon per field |
Spring-Loaded Modes
Spring-loaded modes (also called quasi-modes) are temporary: they exist only while the user holds a trigger. When the trigger is released, the mode exits automatically. This eliminates mode amnesia because the user is physically reminded of the mode through the held action.
| Spring-Loaded Mode | Trigger | Exits When | Example |
|---|---|---|---|
| Shift for uppercase | Hold Shift key | Release Shift | Typing uppercase letters |
| Space for preview | Hold Space bar | Release Space | macOS Quick Look preview |
| Drag for reorder | Hold and drag | Release finger/mouse | iOS home screen icon reordering |
| Alt for alternate | Hold Alt/Option key | Release Alt | Alternate toolbar functions |
Loop and Mode Combinations
Loops and modes can interact. A mode might change the loop behavior, or a loop might trigger a mode transition.
Common Combinations
| Pattern | How It Works | Example |
|---|---|---|
| Mode-specific loop | Loop behavior differs by mode | Do Not Disturb mode: notification loop suppressed |
| Loop triggers mode | After N repetitions, mode changes | After 3 failed login attempts, account enters "locked" mode |
| Mode affects loop frequency | Mode changes loop timing | "Focus mode" reduces notification frequency from real-time to hourly |
| Loop exits mode | After timeout, mode reverts | Screen dims to sleep mode after inactivity loop |
Real-World Loop and Mode Examples
Alarm Clock
| Aspect | Design |
|---|---|
| Loop type | Open loop: repeats at same time until disabled |
| Long loop | After 3 snoozes, snooze interval shortens (2nd: 9 min, 3rd: 5 min) |
| Mode | Snooze mode: alarm is temporarily silenced |
| Mode indicator | "Snoozing until 7:09 AM" displayed on screen |
| Mode escape | "Stop" button always visible alongside "Snooze" |
Text Editor (Google Docs)
| Aspect | Design |
|---|---|
| Loop type | Auto-save open loop: saves every few seconds while editing |
| Long loop | Saves become less frequent during periods of no edits |
| Modes | Editing, Suggesting, Viewing |
| Mode indicator | Mode selector dropdown + colored cursor (blue = editing, green = suggesting) |
| Mode escape | Mode selector always visible in toolbar |
Smart Thermostat (Nest)
| Aspect | Design |
|---|---|
| Loop type | Temperature check loop: every 5 minutes |
| Long loop | Learns schedule over 2 weeks; adapts set-points automatically |
| Modes | Home, Away, Eco, Manual override |
| Mode indicator | Leaf icon (eco), "Away" text, temperature display |
| Mode escape | Manual adjustment exits Away/Eco mode immediately |
Notification System
| Aspect | Design |
|---|---|
| Loop type | Open loop: checks for new notifications at interval |
| Long loop | Reduces frequency if user ignores notifications consistently |
| Modes | Normal, Do Not Disturb, Focus |
| Mode indicator | DND icon in status bar, banner at top of notification panel |
| Mode escape | Toggle in control center; scheduled auto-exit |
Loop and Mode Checklist
Loops
- Is this an open or closed loop? Is that the right choice?
- For open loops: can users stop or adjust the loop?
- For closed loops: is progress shown? What happens at completion?
- Have you designed the long loop (behavior at 1st, 10th, 100th use)?
- Does the interaction use progressive reduction for experienced users?
- Can users resurface removed scaffolding if they need help?
- Is loop frequency appropriate for user need and system resources?
Modes
- Is a mode necessary, or can you avoid it entirely?
- Is the current mode visible at all times?
- Is mode entry deliberate (not accidental)?
- Is there an obvious, always-visible escape from every mode?
- Have you tested for mode errors (right action, wrong mode)?
- Could you use a spring-loaded mode instead of a toggle mode?
- Is the total number of modes three or fewer?
| 1 | # Loops and Modes in Microinteractions |
| 2 | |
| 3 | Loops and modes are the long-term behavior of microinteractions. While triggers, rules, and feedback handle the moment-to-moment experience, loops and modes determine how an interaction evolves over time and how it adapts to different contexts. They are the mechanism for making microinteractions feel alive -- growing with the user, adapting to behavior, and avoiding stagnation. |
| 4 | |
| 5 | ## Understanding Loops |
| 6 | |
| 7 | A loop is a cycle that a microinteraction goes through repeatedly. The key question is: what happens when the microinteraction is triggered again? Does it behave the same way? Does it adapt? Does it expire? |
| 8 | |
| 9 | ### Open Loops vs. Closed Loops |
| 10 | |
| 11 | | Type | Behavior | Ends When | Example | |
| 12 | |------|----------|-----------|---------| |
| 13 | | **Open loop** | Repeats indefinitely until manually stopped | User or system explicitly stops it | Repeating alarm clock, auto-save every 5 minutes | |
| 14 | | **Closed loop** | Runs a fixed number of times or for a fixed duration | Completion condition is met | Countdown timer (reaches zero), 3-retry limit | |
| 15 | |
| 16 | ### Designing Open Loops |
| 17 | |
| 18 | Open loops run continuously and need careful management to avoid becoming annoying or resource-wasteful. |
| 19 | |
| 20 | **Design considerations:** |
| 21 | |
| 22 | | Consideration | Guideline | Example | |
| 23 | |---------------|-----------|---------| |
| 24 | | **Frequency** | Match repetition rate to user need | Auto-save: every 30 seconds, not every second | |
| 25 | | **Visibility** | Show loop status without being intrusive | Small "Last saved: 2 min ago" text in footer | |
| 26 | | **Control** | Let users adjust or stop the loop | Toggle to enable/disable auto-save; frequency setting | |
| 27 | | **Resource impact** | Minimize battery, network, and CPU usage | Poll for updates every 60s, not every second; use WebSockets when available | |
| 28 | | **Failure handling** | Degrade gracefully if a cycle fails | Skip failed auto-save; retry next cycle; show warning after 3 failures | |
| 29 | |
| 30 | ### Designing Closed Loops |
| 31 | |
| 32 | Closed loops have a natural endpoint. The design challenge is communicating progress and handling completion. |
| 33 | |
| 34 | **Design considerations:** |
| 35 | |
| 36 | | Consideration | Guideline | Example | |
| 37 | |---------------|-----------|---------| |
| 38 | | **Progress** | Show how far along the loop is | "Attempt 2 of 3" or progress ring | |
| 39 | | **Completion** | Clear signal when loop ends | Timer reaches 00:00 with sound/vibration | |
| 40 | | **Early exit** | Allow cancellation before completion | "Cancel" button on countdown timer | |
| 41 | | **End state** | Define what happens after the last cycle | Timer shows "Done!" with dismiss action | |
| 42 | | **Failure to complete** | Handle cases where loop cannot finish | "Max retries reached. Try again manually." | |
| 43 | |
| 44 | |
| 45 | |
| 46 | ## Long Loops: Behavior Over Time |
| 47 | |
| 48 | Long loops are the most powerful -- and most neglected -- aspect of microinteraction design. A long loop asks: how should this microinteraction behave differently the 100th time compared to the first time? |
| 49 | |
| 50 | ### Progressive Reduction |
| 51 | |
| 52 | Progressive reduction means removing scaffolding as users demonstrate mastery. The microinteraction starts helpful and becomes streamlined. |
| 53 | |
| 54 | | Use Count | Behavior | Rationale | |
| 55 | |-----------|----------|-----------| |
| 56 | | **1-3 uses** | Full labels, tooltips, coaching marks | User is learning | |
| 57 | | **4-10 uses** | Labels remain, tooltips disappear | User recognizes patterns | |
| 58 | | **11-50 uses** | Labels shrink to icons, hints removed | User knows the interface | |
| 59 | | **50+ uses** | Icons only, keyboard shortcuts promoted | User is an expert | |
| 60 | |
| 61 | **Implementation strategies:** |
| 62 | |
| 63 | | Strategy | Mechanism | Example | |
| 64 | |----------|-----------|---------| |
| 65 | | **Use counter** | Track trigger count per user | After 5 uses, hide "swipe to delete" tooltip | |
| 66 | | **Time-based** | Track days since first use | After 7 days, collapse onboarding sidebar | |
| 67 | | **Behavior-based** | Detect user competence from actions | If user uses keyboard shortcut 3 times, hide toolbar button label | |
| 68 | | **Explicit** | Let user dismiss scaffolding | "Got it, don't show again" link on tooltip | |
| 69 | |
| 70 | ### Adaptive Long Loops |
| 71 | |
| 72 | Adaptive loops change the microinteraction based on accumulated user behavior patterns. |
| 73 | |
| 74 | | Adaptation | What Changes | Example | |
| 75 | |-----------|-------------|---------| |
| 76 | | **Smart defaults** | Default values shift to match user's typical input | Email compose defaults to the team the user writes to most | |
| 77 | | **Frequency adjustment** | How often the interaction triggers or repeats | Notification frequency decreases if user ignores 5 in a row | |
| 78 | | **Content personalization** | What content appears in the interaction | Search autocomplete prioritizes user's past searches | |
| 79 | | **Complexity scaling** | Simpler version for new users, richer for experts | Photo editor shows basic controls by default, reveals advanced on demand | |
| 80 | | **Suggestion refinement** | Predictions improve with use | Keyboard autocorrect learns from user's vocabulary | |
| 81 | |
| 82 | ### Long Loop Design Principles |
| 83 | |
| 84 | **1. Never degrade core functionality.** Progressive reduction should remove scaffolding, not features. The base action must always work. |
| 85 | |
| 86 | **2. Provide a way back.** If a tooltip was hidden after 10 uses, provide a "?" icon or help menu to resurface it. |
| 87 | |
| 88 | **3. Track per-feature, not globally.** A user who is expert at one feature may be a beginner at another. Track usage at the microinteraction level. |
| 89 | |
| 90 | **4. Avoid the uncanny valley.** If the system adapts based on behavior, the changes should either be invisible (smart defaults) or transparent (explicit recommendations). Half-visible adaptation feels creepy. |
| 91 | |
| 92 | **5. Test the 100th use.** Most designers test the first use. Few test the 100th. Run the complete interaction 100 times and evaluate: does it still feel right? Is there unnecessary friction for an expert? |
| 93 | |
| 94 | |
| 95 | |
| 96 | ## Understanding Modes |
| 97 | |
| 98 | A mode is a temporary state where the same trigger produces a different result. In edit mode, clicking a paragraph selects it for editing. In view mode, clicking the same paragraph does nothing (or follows a link). Modes are powerful but dangerous. |
| 99 | |
| 100 | ### Why Modes Are Dangerous |
| 101 | |
| 102 | | Problem | Description | Real-World Example | |
| 103 | |---------|-------------|-------------------| |
| 104 | | **Mode error** | User performs the right action in the wrong mode | Typing when Caps Lock is on; drawing when in eraser mode | |
| 105 | | **Mode confusion** | User does not know which mode they are in | Editing a live document thinking it is a draft | |
| 106 | | **Mode amnesia** | User forgets they entered a mode | Left phone in Do Not Disturb; missed urgent calls | |
| 107 | | **Action inconsistency** | Same trigger does different things | Click selects text in edit mode, follows link in view mode | |
| 108 | |
| 109 | ### When Modes Are Justified |
| 110 | |
| 111 | Despite their dangers, modes are sometimes the right design choice: |
| 112 | |
| 113 | | Justification | Why It Works | Example | |
| 114 | |--------------|-------------|---------| |
| 115 | | **Physical constraints** | Limited input controls must serve multiple functions | Caps Lock/Shift on keyboard (limited key count) | |
| 116 | | **Separation of concerns** | Editing and viewing are fundamentally different activities | Google Docs edit mode vs. suggestion mode vs. view mode | |
| 117 | | **Safety** | Prevent accidental destructive actions in normal use | "Edit mode" in CMS protects published content | |
| 118 | | **Complexity management** | Different tasks need different tool sets | Photoshop tools: brush, eraser, selection, text | |
| 119 | |
| 120 | ### Mode Design Guidelines |
| 121 | |
| 122 | **1. Make the current mode unmistakably visible.** |
| 123 | |
| 124 | | Method | Where to Apply | Example | |
| 125 | |--------|---------------|---------| |
| 126 | | **Color-coded background** | Entire screen or workspace | Yellow tint in edit mode | |
| 127 | | **Persistent banner** | Top of screen | "You are editing this page" banner | |
| 128 | | **Tool indicator** | Near cursor or toolbar | Active tool highlighted in toolbar; cursor changes shape | |
| 129 | | **Mode label** | Status bar or header | "DRAFT" / "PUBLISHED" / "EDITING" label | |
| 130 | |
| 131 | **2. Make mode transitions deliberate.** Entering and exiting a mode should require a conscious action (button click, keyboard shortcut), not happen accidentally (hover, proximity). |
| 132 | |
| 133 | **3. Minimize the number of modes.** Every mode doubles the testing surface. Two modes mean 2x testing. Five modes mean 5x. |
| 134 | |
| 135 | | Number of Modes | Complexity | Guidance | |
| 136 | |-----------------|------------|----------| |
| 137 | | **1 (no modes)** | Low | Ideal -- same action always produces same result | |
| 138 | | **2** | Moderate | Acceptable for clear binary states (edit/view) | |
| 139 | | **3** | High | Reconsider -- can you merge or eliminate one? | |
| 140 | | **4+** | Very high | Almost certainly too many; redesign with fewer modes | |
| 141 | |
| 142 | **4. Provide mode escape.** Users must always have a clear, obvious way to exit a mode. The escape route should be visible at all times while in the mode. |
| 143 | |
| 144 | | Escape Method | Implementation | Example | |
| 145 | |---------------|---------------|---------| |
| 146 | | **Explicit button** | "Done," "Exit," "Close" button visible in mode | "Done Editing" button in top-right | |
| 147 | | **Keyboard shortcut** | Escape key exits mode | Esc exits full-screen mode | |
| 148 | | **Timeout** | Mode auto-exits after inactivity | Edit mode locks after 15 minutes idle | |
| 149 | | **Gesture** | Swipe down or pinch to dismiss | Swipe down exits full-screen image view | |
| 150 | |
| 151 | |
| 152 | |
| 153 | ## Avoiding Mode Errors |
| 154 | |
| 155 | Mode errors occur when users perform the correct action in the wrong mode. They are one of the most frustrating user experiences because users did the right thing -- the system responded wrong. |
| 156 | |
| 157 | ### Prevention Strategies |
| 158 | |
| 159 | | Strategy | How It Works | Example | |
| 160 | |----------|-------------|---------| |
| 161 | | **Spring-loaded modes** | Mode exists only while holding trigger | Caps Lock as long as Shift is held (not toggled) | |
| 162 | | **Undo on mode exit** | Offer to undo all actions on mode exit | "Discard changes?" dialog when exiting edit mode | |
| 163 | | **Mode confirmation** | Show a brief confirmation when entering mode | "Edit mode" banner flashes for 2 seconds on entry | |
| 164 | | **Preemptive warning** | Warn before an action that depends on mode | "You are in eraser mode. Switch to pen to draw." | |
| 165 | | **Eliminate the mode** | Use a different UI pattern instead | Instead of "edit mode," use inline editing with pencil icon per field | |
| 166 | |
| 167 | ### Spring-Loaded Modes |
| 168 | |
| 169 | Spring-loaded modes (also called quasi-modes) are temporary: they exist only while the user holds a trigger. When the trigger is released, the mode exits automatically. This eliminates mode amnesia because the user is physically reminded of the mode through the held action. |
| 170 | |
| 171 | | Spring-Loaded Mode | Trigger | Exits When | Example | |
| 172 | |-------------------|---------|------------|---------| |
| 173 | | **Shift for uppercase** | Hold Shift key | Release Shift | Typing uppercase letters | |
| 174 | | **Space for preview** | Hold Space bar | Release Space | macOS Quick Look preview | |
| 175 | | **Drag for reorder** | Hold and drag | Release finger/mouse | iOS home screen icon reordering | |
| 176 | | **Alt for alternate** | Hold Alt/Option key | Release Alt | Alternate toolbar functions | |
| 177 | |
| 178 | |
| 179 | |
| 180 | ## Loop and Mode Combinations |
| 181 | |
| 182 | Loops and modes can interact. A mode might change the loop behavior, or a loop might trigger a mode transition. |
| 183 | |
| 184 | ### Common Combinations |
| 185 | |
| 186 | | Pattern | How It Works | Example | |
| 187 | |---------|-------------|---------| |
| 188 | | **Mode-specific loop** | Loop behavior differs by mode | Do Not Disturb mode: notification loop suppressed | |
| 189 | | **Loop triggers mode** | After N repetitions, mode changes | After 3 failed login attempts, account enters "locked" mode | |
| 190 | | **Mode affects loop frequency** | Mode changes loop timing | "Focus mode" reduces notification frequency from real-time to hourly | |
| 191 | | **Loop exits mode** | After timeout, mode reverts | Screen dims to sleep mode after inactivity loop | |
| 192 | |
| 193 | |
| 194 | |
| 195 | ## Real-World Loop and Mode Examples |
| 196 | |
| 197 | ### Alarm Clock |
| 198 | |
| 199 | | Aspect | Design | |
| 200 | |--------|--------| |
| 201 | | **Loop type** | Open loop: repeats at same time until disabled | |
| 202 | | **Long loop** | After 3 snoozes, snooze interval shortens (2nd: 9 min, 3rd: 5 min) | |
| 203 | | **Mode** | Snooze mode: alarm is temporarily silenced | |
| 204 | | **Mode indicator** | "Snoozing until 7:09 AM" displayed on screen | |
| 205 | | **Mode escape** | "Stop" button always visible alongside "Snooze" | |
| 206 | |
| 207 | ### Text Editor (Google Docs) |
| 208 | |
| 209 | | Aspect | Design | |
| 210 | |--------|--------| |
| 211 | | **Loop type** | Auto-save open loop: saves every few seconds while editing | |
| 212 | | **Long loop** | Saves become less frequent during periods of no edits | |
| 213 | | **Modes** | Editing, Suggesting, Viewing | |
| 214 | | **Mode indicator** | Mode selector dropdown + colored cursor (blue = editing, green = suggesting) | |
| 215 | | **Mode escape** | Mode selector always visible in toolbar | |
| 216 | |
| 217 | ### Smart Thermostat (Nest) |
| 218 | |
| 219 | | Aspect | Design | |
| 220 | |--------|--------| |
| 221 | | **Loop type** | Temperature check loop: every 5 minutes | |
| 222 | | **Long loop** | Learns schedule over 2 weeks; adapts set-points automatically | |
| 223 | | **Modes** | Home, Away, Eco, Manual override | |
| 224 | | **Mode indicator** | Leaf icon (eco), "Away" text, temperature display | |
| 225 | | **Mode escape** | Manual adjustment exits Away/Eco mode immediately | |
| 226 | |
| 227 | ### Notification System |
| 228 | |
| 229 | | Aspect | Design | |
| 230 | |--------|--------| |
| 231 | | **Loop type** | Open loop: checks for new notifications at interval | |
| 232 | | **Long loop** | Reduces frequency if user ignores notifications consistently | |
| 233 | | **Modes** | Normal, Do Not Disturb, Focus | |
| 234 | | **Mode indicator** | DND icon in status bar, banner at top of notification panel | |
| 235 | | **Mode escape** | Toggle in control center; scheduled auto-exit | |
| 236 | |
| 237 | |
| 238 | |
| 239 | ## Loop and Mode Checklist |
| 240 | |
| 241 | ### Loops |
| 242 | [ ] Is this an open or closed loop? Is that the right choice? |
| 243 | [ ] For open loops: can users stop or adjust the loop? |
| 244 | [ ] For closed loops: is progress shown? What happens at completion? |
| 245 | [ ] Have you designed the long loop (behavior at 1st, 10th, 100th use)? |
| 246 | [ ] Does the interaction use progressive reduction for experienced users? |
| 247 | [ ] Can users resurface removed scaffolding if they need help? |
| 248 | [ ] Is loop frequency appropriate for user need and system resources? |
| 249 | |
| 250 | ### Modes |
| 251 | [ ] Is a mode necessary, or can you avoid it entirely? |
| 252 | [ ] Is the current mode visible at all times? |
| 253 | [ ] Is mode entry deliberate (not accidental)? |
| 254 | [ ] Is there an obvious, always-visible escape from every mode? |
| 255 | [ ] Have you tested for mode errors (right action, wrong mode)? |
| 256 | [ ] Could you use a spring-loaded mode instead of a toggle mode? |
| 257 | [ ] Is the total number of modes three or fewer? |
| 258 |
Discussion
Alternatives
ImpeccableUse when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Apple designApple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.Building AnimationsBuild an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.
BreakRenders a component you choose in every state and scenario on a temporary page and stress tests it.Browse more free Claude skills or everything in Design.