Estados de interfaz

Plantilla de documentación

Una fila por estado y por componente. Pégala en tu documento de flujos.

# Plantilla de documentación de estados

Copia esta tabla a tu documento de flujos (UX_FLOWS.md) y complétala por cada pantalla o componente.

| Estado | Cuándo aparece | Qué ve el usuario | Qué puede hacer | Microcopy | Accesibilidad |
|---|---|---|---|---|---|
| Vacío | La primera vez que el usuario entra, o cuando aún no hay contenido. | Un mensaje que explica el vacío | Crear el primer elemento | Aún no tienes proyectos / Crea el primero para ver aquí tus métricas. / [Crear proyecto] | Buena práctica de producto. Sin criterio WCAG directo. |
| Cargando | Entre que el usuario pide los datos y llegan, típicamente de 1 a 10 s. | La estructura del contenido en esqueleto | Esperar; cancelar si tarda | Cargando proyectos… | WCAG 4.1.3 (AA): los mensajes de estado deben ser perceptibles sin recibir foco. |
| Error | Falla la red o el servidor y la acción no se completa. | Qué falló y qué se conservó | Reintentar o guardar un borrador | No pudimos guardar tus cambios / Se cortó la conexión. Lo que escribiste sigue aquí. / [Reintentar]  [Guardar borrador] | Heurística 9 de Nielsen: ayudar a reconocer, diagnosticar y recuperarse de errores. |
| Deshabilitado | Una acción aún no está disponible porque falta algo. | El control inactivo y qué falta | Completar el requisito | Escribe un nombre para continuar | WCAG 1.4.13 (AA) si usas tooltip. WCAG 1.4.3 exime del contraste a los componentes inactivos. |
| Foco | El usuario navega con teclado u otro dispositivo de entrada. | Un anillo visible en el elemento activo | Navegar con el teclado | (Sin texto: es un estado visual) | WCAG 2.4.7 (AA) foco visible. WCAG 2.2 suma 2.4.11 (AA): foco no oculto. |
| Desbordamiento | El contenido es más largo (o más corto) de lo previsto. | Texto recortado según la regla definida | Ver el texto completo (hover y foco) | (Define la regla por componente: 1 línea con puntos suspensivos, o hasta 2 líneas) | Relacionado: WCAG 1.4.10 (AA) reflujo, sin scroll en dos dimensiones a 320 px. |
| Sin resultados | Una búsqueda o un filtro no encuentra coincidencias. | El término buscado y una sugerencia | Limpiar filtros o cambiar la búsqueda | Sin resultados para «zapatillas rojas» / Prueba con otra palabra o quita algún filtro. / [Limpiar filtros] | WCAG 4.1.3 (AA): el cambio de resultados debe anunciarse a lectores de pantalla sin mover el foco. |
| Validación | El usuario escribe un dato que el sistema no puede aceptar. | El error junto al campo, en texto | Corregir el dato | Escribe un correo con @, por ejemplo ana@correo.com | WCAG 3.3.1 (A) y 3.3.3 (AA); 1.4.1 (A): no uses solo el color para comunicar el error. |
| Éxito | El usuario completa una acción y necesita saber que funcionó. | La confirmación de lo que se hizo | Seguir al siguiente paso | Cambios guardados / [Ver proyecto] | WCAG 4.1.3 (AA): los mensajes de estado deben anunciarse sin mover el foco. |
| Sin conexión | El dispositivo pierde la red o el servidor no responde. | El aviso de falta de red y lo último guardado | Reintentar o seguir con lo disponible | Sin conexión. Mostramos lo último que guardaste. / [Reintentar] | Buena práctica de producto. Sin criterio WCAG directo. |
| Sesión expirada | La sesión está por terminar o ya terminó. | Un aviso con el tiempo restante | Seguir conectado o cerrar sesión | Tu sesión está por terminar / Se cerrará en 2 minutos. Guardamos tus cambios como borrador. / [Seguir conectado]  [Cerrar sesión] | WCAG 2.2.1 (A): avisa y deja extender el tiempo, con las excepciones que define el criterio. |
| Seleccionado | El usuario elige una o varias opciones de una lista o un grupo. | Un indicador que no depende solo del color | Cambiar o quitar la selección | ✓ Seleccionado | WCAG 1.4.1 (A): no usar solo el color. WCAG 1.4.11 (AA): contraste de 3:1 en los componentes de interfaz. |

Completa una fila por estado y por componente. Si un estado no aplica, escribe «No aplica» y por qué.