feedback-principle

vjrivmon's avatarfrom vjrivmon

El sistema debe informar sobre resultados de acciones del usuario. Use cuando diseñe interacciones, estados de carga, confirmaciones, o manejo de errores.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 7, 2026
[UI Copy and Microcopy]

When & Why to Use This Skill

This Claude skill implements the fundamental 'Feedback Principle' of UX/UI design, ensuring that systems provide immediate and perceptible responses to every user action. It helps designers and developers create intuitive interfaces by standardizing how the system communicates interaction results, loading states, confirmations, and error handling based on established Human-Computer Interaction (HCI) theories.

Use Cases

  • Designing responsive micro-interactions such as button hover states and click animations to confirm user input within 100ms.
  • Developing effective loading experiences using skeleton screens, progress bars, and status messages to maintain user engagement during processing.
  • Crafting clear and actionable error messages that help users recover from mistakes rather than encountering silent failures.
  • Implementing success notifications and 'toast' messages to provide positive reinforcement and confirmation of completed tasks like form submissions.
  • Auditing existing user interfaces against UX anti-patterns to identify missing feedback loops and improve overall user confidence scores.
namefeedback-principle
authorux-ui-skills
version"1.0"
categorydesign-principles

Principio de Feedback

Resumen

Cada acción del usuario debe producir feedback perceptible del sistema. Los usuarios necesitan saber que sus acciones fueron recibidas y qué resultados produjeron.

Origen

  • Concepto: Principio fundamental de teoría de control y HCI
  • Documentado por: Ben Shneiderman, Don Norman
  • Año: ~1980s

Tipos de Feedback

Feedback Inmediato (<100ms)

  • Cambios de estado en botones
  • Animaciones de click
  • Cursor changes
  • Highlights de selección

Feedback de Proceso (>100ms)

  • Loading spinners
  • Progress bars
  • Skeleton screens
  • Mensajes de estado

Feedback de Resultado

  • Confirmaciones de éxito
  • Mensajes de error
  • Toasts y notificaciones
  • Cambios en la UI

Feedback Pasivo

  • Contadores actualizados
  • Estados de conexión
  • Indicadores de sincronización
  • Badges de notificación

Aplicación en Diseño

Microinteracciones

  • Hover states
  • Press/active states
  • Animaciones de transición
  • Ripple effects

Estados de Carga

  • Spinners apropiados al tiempo
  • Skeleton loaders
  • Progress bars con %
  • Estimaciones de tiempo

Confirmaciones

  • Toast notifications
  • Modales de éxito
  • Cambios visuales en UI
  • Sonidos/haptics

Errores

  • Mensajes claros y accionables
  • Highlight de campos con error
  • Sugerencias de corrección
  • Opción de retry

Ejemplos

  • Gmail: "Sending..." → "Sent" → "Undo"
  • Slack: Checkmark al enviar mensaje
  • GitHub: Confetti en primer PR
  • Stripe: Validación de tarjeta en tiempo real
  • macOS: Bounce en dock al completar

Anti-patterns

  • ❌ Clicks sin respuesta visual
  • ❌ Formularios que envían sin confirmación
  • ❌ Errores silenciosos
  • ❌ Operaciones largas sin indicador
  • ❌ Estados que cambian sin notificar

Métricas

  • Feedback Latency: Tiempo hasta feedback
  • User Confidence Score: Certeza de que funcionó
  • Repeat Action Rate: Acciones repetidas por duda
  • Error Recovery Time: Tiempo para corregir errores

Principios Relacionados

  • [[nielsen-visibility]] - Visibilidad del estado
  • [[doherty-threshold]] - Tiempos de respuesta
  • [[affordances]] - Confirmar que la affordance funciona

Referencias