user-feedback-clarity

Included with Lifetime

$97 forever

Use when users don't notice feedback, miss state changes, or can't tell if their action worked

Data & Analytics

What this skill does


# User Feedback Clarity

Make feedback animations unmissable using Disney's principles.

## Problem Indicators
- Users click multiple times (didn't see feedback)
- "Did it work?" questions
- Users miss success/error states
- Form submission confusion
- State changes go unnoticed

## Diagnosis by Principle

### Anticipation
**Issue**: No buildup before action completes
**Fix**: Show loading/processing state immediately. User should know their input was received.

### Follow Through
**Issue**: Feedback appears and vanishes too quickly
**Fix**: Let feedback linger. Success messages need 2-3 seconds minimum. Add settle animation.

### Staging
**Issue**: Feedback appears outside user's focus
**Fix**: Show feedback near the trigger. If button was clicked, feedback should appear on/near button.

### Exaggeration
**Issue**: Feedback is too subtle
**Fix**: Increase contrast, size change, or motion. Feedback must compete with user's task focus.

### Secondary Action
**Issue**: Only one feedback channel
**Fix**: Combine channels: visual + motion + color. Error = red + shake. Success = green + checkmark + pulse.

## Quick Fixes

1. **Immediate acknowledgment** - Show something within 100ms
2. **Animate the trigger** - Button should respond visibly
3. **Use color + motion together** - Redundant signals
4. **Keep feedback in viewport** - Near user's focus
5. **Add haptic feedback** - On supported devices

## Troubleshooting Checklist

- [ ] Does feedback appear within 100ms of action?
- [ ] Is feedback in user's current focus area?
- [ ] Would feedback be noticed peripherally?
- [ ] Are multiple senses engaged (visual, motion)?
- [ ] Does feedback last long enough to read?
- [ ] Is error feedback more prominent than success?
- [ ] Test: Can users tell if action succeeded without reading text?
- [ ] Test with users—ask "did that work?"

## Code Pattern

```css
/* Button feedback */
.button:active {
  transform: scale(0.95);
}

.button.loading {
  pointer-events: none;
}

.button.success {
  animation: successPulse 300ms ease-out;
}

@keyframes successPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); background: var(--success); }
  100% { transform: scale(1); }
}

/* Error shake */
@keyframes errorShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
```

Files: 1

Size: 2.5 KB

Complexity: 5/100

Category: Data & Analytics

Source: https://github.com/dylantarre/animation-principles/tree/main/skills/12-by-problem-type/user-feedback-clarity

Related in Data & Analytics

clawarr-suite

Included

Comprehensive management for self-hosted media stacks (Sonarr, Radarr, Lidarr, Readarr, Prowlarr, Bazarr, Overseerr, Plex, Tautulli, SABnzbd, Recyclarr, Unpackerr, Notifiarr, Maintainerr, Kometa, FlareSolverr). Deep library exploration, analytics, dashboard generation, content management, request handling, subtitle management, indexer control, download monitoring, quality profile sync, library cleanup automation, notification routing, collection/overlay management, and media tracker integration (Trakt, Letterboxd, Simkl).

Data & Analyticsscripts

querying-soql

Included

SOQL query generation, optimization, and analysis with 100-point scoring. Use this skill when the user needs SOQL/SOSL authoring or optimization: natural-language-to-query generation, relationship queries, aggregates, query-plan analysis, and performance or safety improvements for Salesforce queries. TRIGGER when: user writes, optimizes, or debugs SOQL/SOSL queries, touches .soql files, or asks about relationship queries, aggregates, or query performance. DO NOT TRIGGER when: bulk data operations (use handling-sf-data), Apex DML logic (use generating-apex), or report/dashboard queries.

Data & Analyticsscripts

app-store-optimization

Included

App Store Optimization (ASO) toolkit for researching keywords, analyzing competitor rankings, generating metadata suggestions, and improving app visibility on Apple App Store and Google Play Store. Use when the user asks about ASO, app store rankings, app metadata, app titles and descriptions, app store listings, app visibility, or mobile app marketing on iOS or Android. Supports keyword research and scoring, competitor keyword analysis, metadata optimization, A/B test planning, launch checklists, and tracking ranking changes.

Data & Analyticsscripts

habit-flow

Included

AI-powered atomic habit tracker with natural language logging, streak tracking, smart reminders, and coaching. Use for creating habits, logging completions naturally ("I meditated today"), viewing progress, and getting personalized coaching.

Data & Analyticsscripts

app-store-optimization

Included

Data & Analyticsscripts

visualizing-data

Included

Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics. Provides systematic framework for selecting appropriate visualizations based on data characteristics and analytical purpose. Includes 24+ visualization types organized by purpose (trends, comparisons, distributions, relationships, flows, hierarchies, geospatial), accessibility patterns (WCAG 2.1 AA compliance), colorblind-safe palettes, and performance optimization strategies. Use when creating visualizations, choosing chart types, displaying data graphically, or designing data interfaces.

Data & Analyticsscripts