nielsen-visibility
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.
When & Why to Use This Skill
This Claude skill provides expert guidance on implementing the 'Visibility of System Status' usability heuristic. It helps designers and developers ensure that users are constantly informed about the system's state through timely visual feedback, progress indicators, and clear confirmations, effectively reducing user anxiety and improving the overall user experience.
Use Cases
- Designing immediate visual feedback for interactive elements like buttons and forms to confirm user actions.
- Implementing progress bars and skeleton screens for long-running operations to manage user expectations and reduce perceived wait times.
- Creating real-time status indicators for background processes such as data synchronization, file uploads, or connectivity states.
- Conducting UX audits to identify and resolve 'anti-patterns' like silent failures, infinite loaders, or lack of success notifications.
| name | nielsen-visibility |
|---|---|
| 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/