By name: nielsen-visibility description: Garantiza que el sistema informe constantemente al usuario sobre su estado. Use cuando diseñe feedback visual, loaders, estados de progreso o cualquier interacción que requiera confirmación. metadata: author: ux-ui-skills version: "1.0" category: heuristics
Visibilidad del Estado del Sistema
Resumen
El sistema debe mantener a los usuarios informados sobre lo que está sucediendo mediante feedback apropiado y oportuno. Los usuarios nunca deben preguntarse si su acción fue registrada o qué está haciendo el sistema.
Origen
- Autor: Jakob Nielsen
- Año: 1994 (refinado 2020)
- Fuente: Nielsen Norman Group - "10 Usability Heuristics for User Interface Design"
Fundamento Psicológico
La incertidumbre genera ansiedad y frustración. Cuando los usuarios no reciben confirmación de sus acciones, experimentan disonancia cognitiva y pueden repetir acciones innecesariamente. El feedback inmediato activa el sistema de recompensa del cerebro, reforzando la sensación de control y competencia (Teoría de la Autodeterminación de Deci & Ryan).
Aplicación en Diseño
Feedback Inmediato
- Cambios de estado visual en botones al hacer hover/click
- Animaciones de confirmación (checkmarks, colores)
- Sonidos o vibraciones hapticas en móvil
- Tiempo de respuesta: <100ms para sensación instantánea
Indicadores de Progreso
- Progress bars para operaciones >1 segundo
- Skeleton screens durante carga de contenido
- Spinners solo para operaciones breves (<4 segundos)
- Porcentajes o tiempo estimado para operaciones largas
Estados del Sistema
- Indicadores de conexión online/offline
- Estado de sincronización (guardado, guardando, error)
- Badges de notificaciones pendientes
- Breadcrumbs para ubicación en navegación
Confirmaciones Explícitas
- Mensajes de éxito después de acciones (toast notifications)
- Confirmación visual de items agregados al carrito
- Recibos o confirmaciones de transacciones
Ejemplos
- Gmail: Muestra "Enviando...", luego "Mensaje enviado" con opción de deshacer
- Slack: Indicador de "escribiendo..." cuando otro usuario redacta mensaje
- Uber: Mapa en tiempo real con ubicación del conductor y ETA actualizado
- GitHub: Progress bar durante push/pull con detalles de archivos transferidos
- macOS: Animación de "genie" al minimizar ventanas confirma la acción
Anti-patterns
- ❌ Botones que no cambian de estado al hacer click
- ❌ Formularios que se envían sin confirmación visual
- ❌ Operaciones largas sin indicador de progreso
- ❌ Spinners infinitos sin timeout ni mensaje de error
- ❌ Cambios de estado silenciosos que el usuario no percibe
Métricas
- Time to First Feedback: <100ms después de interacción
- Perceived Wait Time: Reducido con skeleton screens vs spinners
- Error Discovery Time: Tiempo hasta que usuario nota un problema
- Repeat Action Rate: Acciones duplicadas por falta de feedback (debe ser ~0%)
Principios Relacionados
- [[doherty-threshold]] - Tiempos de respuesta óptimos
- [[feedback-principle]] - Principio general de retroalimentación
- [[nielsen-error-recovery]] - Comunicar errores claramente
Referencias
- Nielsen, J. (1994). "Usability Engineering". Morgan Kaufmann
- Nielsen Norman Group (2020). "10 Usability Heuristics for User Interface Design"
- https://www.nngroup.com/articles/visibility-system-status/