# Conciencia de Estado (State Awareness) en UI > Aprenda a diseñar interfaces que mantengan al usuario siempre informado sobre el estado actual del sistema y de cada componente para reducir la incertidumbre y los errores. *Tags: ux, concepto, diseño-ui, product-design, desarrollo* --- > [!info] Definición Rápida > La **Conciencia de Estado** (State Awareness) es la capacidad de una interfaz para comunicar de forma clara y continua qué está ocurriendo en el sistema, en qué paso del proceso se encuentra el usuario y cuál es la condición actual de cada componente (ej. si un botón está pulsado, si un dato se está cargando o si hay un error). ## ¿Por qué el Usuario necesita Conciencia de Estado? Como seres humanos, odiamos la incertidumbre. En el mundo físico, si pulsas un interruptor y la luz no se enciende, sabes que hay un fallo porque el interruptor cambió de posición físicamente. En el mundo digital, si un usuario pulsa un botón y no pasa nada visualmente en los primeros milisegundos, el usuario pulsará el botón 5 veces más, generando errores en el servidor y frustración. Mantener la conciencia de estado cumple con la **Primera Heurística de Usabilidad de Jakob Nielsen**: *Visibilidad del estado del sistema.* ## Los 4 Niveles de Estado que debes Diseñar Un componente de UI no es un dibujo estático; es un objeto vivo que puede estar en múltiples "estados". Tú, como diseñador, debes definirlos todos: ### 1. Estados de Interacción (Hover / Focus / Active) Indican que el sistema es reactivo al usuario. - **Hover:** "Sé que tu ratón está encima de mí". - **Focus:** "Estoy seleccionado para que me uses con el teclado". - **Active (Pressed):** "Me has pulsado, estoy enviando tu orden". ### 2. Estados de Carga (Loading / Skeleton / Progressive) Indican que el sistema está trabajando por detrás. - **Loading:** Un spinner, una barra de carga o un [Skeleton Screen](/concepts/skeleton-vs-optimistic-ui/). - **Progressive:** Muestra cuántos archivos faltan por subir o qué porcentaje del proceso se ha completado. ### 3. Estados de Verificación (Success / Error / Warning) Indican el resultado de una acción. - **Success:** "Todo ha ido bien, tu cambio se ha guardado". - **Error:** "Ha habido un problema, por favor inténtalo de nuevo". - **Warning:** "Cuidado, esto puede ser peligroso o irreversible". ### 4. Estados de Datos (Empty / Ideal / Overload) Indican la cantidad de información disponible. - **Empty State:** Qué ve el usuario cuando no hay datos (ej. al abrir una app por primera vez). Es una oportunidad de oro para el onboarding y el deleite. - **Overload:** Qué ocurre si hay demasiados elementos (ej. una lista de 5.000 mensajes). ## La Importancia de los "Live Regions" (Accesibilidad) La conciencia de estado no solo es visual. Para un usuario de [Lector de Pantalla](/techniques/screen-reader-testing/), el sistema debe "anunciar" los cambios de estado de forma sonora. - Si aparece un mensaje de éxito, el lector debe decir: "Éxito: Perfil actualizado correctamente". - Si no diseñas esta conciencia sonora, el usuario ciego se quedará esperando eternamente sin saber si su acción funcionó o no. ## Beneficios para la Experiencia de Usuario - **Reducción de la Ansiedad:** El usuario siente que tiene el control y que el sistema le escucha. - **Prevención de Errores:** Evita clics duplicados y acciones a ciegas. - **Mejor Onboarding:** Un buen diseño de estados de vacío (Empty States) guía al nuevo usuario hacia el valor del producto. - **Sensación de Calidad:** Las microinteracciones que cambian el estado hacen que el producto se sienta robusto y bien terminado. ## Consejos de Mentor - **No asumas el Silencio:** El silencio en UI es el enemigo de la usabilidad. Ante cada acción del usuario, debe haber una reacción de estado. - **Documenta tus Estados en Figma:** No entregues solo el diseño final. Usa variantes y documenta qué estado de carga o error corresponde a cada pantalla. - **Consistencia Visual:** Usa los mismos colores (ej. verde para éxito, rojo para error, naranja para aviso) en toda tu aplicación para que el usuario aprenda rápidamente el lenguaje de estados del sistema. ## Recursos y Herramientas - **NNGroup:** [Visibility of System Status - The 1st Heuristic](https://www.nngroup.com/articles/visibility-system-status/) - **Material Design:** [Component States and Feedback](https://m2.material.io/design/interaction/states.html) - **UX Collective:** [Designing Better Component States](https://uxdesign.cc/designing-better-component-states-9a3e8e3e8e3) - **Books:** *Microinteractions* de Dan Saffer. --- [[skeleton-vs-optimistic-ui]] [[optimistic-updates-rollback]] [[loading-states]] [[cognitive-load-management]] --- Source: https://www.fernandoux.com/es/wiki/concepts/status-awareness/