feedback-principle

name: feedback-principle description: El sistema debe informar sobre resultados de acciones del usuario. Use cuando diseñe interacciones, estados de carga, confirmaciones, o manejo de errores. metadata: author: ux-ui-skills version: "1.0" category: design-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

• Norman, D. (2013). "The Design of Everyday Things"
• Shneiderman, B. (1987). "Designing the User Interface"
• https://www.nngroup.com/articles/response-times-3-important-limits/