CategoríaDiseño de producto
Estados de carga y vacío: donde la interfaz miente
El estado de carga y el estado vacío son lo que la persona ve mientras el dato no llega o no existe. No son adorno. Ahí es donde la interfaz más engaña, porque el marcador puede prometer una forma que nunca llega y el indicador giratorio puede sugerir un avance que nadie midió.
Por qué la espera necesita una señal, y cuándo la señal estorba
El Carbon Design System (en inglés) de IBM afirma que las estrategias de carga avisan a la persona de que su petición está en curso. Según Carbon, los esqueletos y otros indicadores pueden crear la ilusión de menos tiempo. El mismo patrón de carga (en inglés) limita el esqueleto a unos pocos segundos en pantalla.
La señal se justifica cuando la espera es lo bastante larga para notarse. Los límites de tiempo de respuesta del Nielsen Norman Group (en inglés) sitúan ese punto en una décima de segundo, por debajo de la cual no se necesita retroalimentación especial. Por debajo de eso, el indicador aparece y desaparece en unos pocos cuadros, y el movimiento se lee como parpadeo y no como información. El Nielsen Norman Group registra en Skeleton Screens 101 (en inglés) que el esqueleto animado puede distraer o molestar, y crear problemas de accesibilidad para parte de las personas.
El patrón de carga de Carbon (en inglés) separa los casos por lo que se puede saber. El indicador de carga señala que algo está cargando y, a diferencia de la barra de progreso, no informa cuánto falta. La barra es el control correcto cuando el sistema puede medir el trabajo restante.
Así, la espera corta no recibe señal, la espera desconocida recibe indicador y la espera medible recibe barra. Una espera de minutos también pide una estimación de cuándo termina, según la guía del Nielsen Norman Group sobre indicadores de progreso (en inglés).
Esqueleto contra indicador: qué promete cada uno
El esqueleto es una versión simplificada del componente que lo va a reemplazar. El Nielsen Norman Group (en inglés) lo describe como un wireframe que imita el layout de la página y ayuda a la persona a armar un modelo mental de lo que viene. El mismo texto limita el esqueleto a la carga de página completa, mientras que el patrón de Carbon (en inglés) lo limita al componente.
El indicador promete solo que algo ocurre. El esqueleto promete forma, jerarquía y orden. Cuando el contenido real llega con otra forma, el cambio mueve elementos que la persona ya había ubicado, y ese movimiento se lee como defecto.
El patrón de carga de Carbon (en inglés) restringe el lugar del esqueleto. Cabe en componentes de contenedor, como el bloque y la lista estructurada, y en componentes de dato, como la tabla y la tarjeta. Los componentes de acción, como botón, campo, casilla y conmutador, no necesitan esqueleto. Toast, menú de desbordamiento, ítem de lista desplegable, modal y loader no deben representarse con esqueleto.
Qué hace el esqueleto con el desplazamiento de diseño
Google define Cumulative Layout Shift como la ráfaga más grande de puntuaciones de desplazamiento durante la vida de la página, medida en el percentil 75 y separada entre móvil y escritorio. Una puntuación buena es 0,1 o menos, y una mala supera 0,25.
La ráfaga, llamada ventana de sesión, agrupa desplazamientos separados por menos de un segundo, con una ventana máxima de cinco segundos. Google lista como causas habituales la imagen o el video sin dimensiones declaradas, la fuente que renderiza en tamaño distinto al fallback y el widget de terceros que se redimensiona solo.
El esqueleto agrega un desplazamiento cuando su caja no coincide con la caja del elemento que lo reemplaza. La corrección es de cuentas, no de estética. Marcador y elemento final comparten ancho, alto y posición, así que el cambio reemplaza píxeles en vez de moverlos.
El mismo artículo de Google sobre desplazamiento advierte que el problema se esconde en desarrollo. Ahí la imagen de prueba ya está en la caché del navegador, y la llamada local responde más rápido que la de producción. Un desplazamiento que nunca aparece en la máquina de quien desarrolla es normal en el móvil.
La consecuencia es concreta. El artículo de Google registra que un desplazamiento súbito puede hacer que la persona pulse el enlace o el botón equivocado. Incluso puede llevar a alguien a confirmar un pedido que quería cancelar.
Los cuatro estados, y los dos que quedan afuera
Cargando, vacío, error y éxito son cuatro estados con cuatro funciones. La mayoría de los equipos diseña el éxito y el indicador giratorio de carga, y deja vacío y error con lo que el framework renderiza por defecto. El Nielsen Norman Group (en inglés) registra que lo habitual en un espacio vacío es simplemente seguir vacío.
Vacío no es error, y esa es la confusión más común. Vacío significa que la petición salió bien y volvió sin nada. Error significa que la petición no salió bien. El tratamiento cambia en el texto y en la acción ofrecida.
El patrón de estado vacío de Carbon (en inglés) nombra tres familias de estado vacío. Sin dato cubre el primer uso. Acción de la persona cubre la búsqueda sin resultado y la confirmación de un proceso terminado. Gestión de error cubre permiso, falla de sistema y configuración faltante.
El éxito también es un estado. Cuando la acción termina, la interfaz confirma, o la persona repite la acción para comprobar si funcionó.
Qué anuncia el lector de pantalla en cada estado
La especificación WAI-ARIA 1.2 (en inglés) del W3C define aria-busy como la señal de que un elemento está siendo modificado. Las tecnologías de asistencia pueden esperar a que termine el cambio antes de exponer el contenido. Ese es el mecanismo para el contenedor que el dato va a reemplazar.
Para el texto que aparece sin recargar la página, la especificación define aria-live como la indicación de que un elemento será actualizado. El valor describe qué actualizaciones pueden esperar los agentes de usuario y las tecnologías de asistencia.
Con el valor polite, la especificación (en inglés) dice que las tecnologías de asistencia deben anunciar en la próxima oportunidad tranquila, como el final de la frase actual o una pausa al escribir. Con el valor assertive, deben avisar de inmediato.
La especificación agrega que la interrupción puede desorientar a la persona, así que assertive pertenece al error que traba la tarea y no a la actualización de rutina.
El rol alert lleva valor live assertive implícito y valor atomic implícito igual a true, según la especificación. El atomic decide si se lee la región completa o solo el nodo que cambió. El W3C publica las WAI-ARIA Authoring Practices (en inglés) como los patrones construidos sobre esa especificación.
El patrón de carga de Carbon (en inglés) resume el requisito de accesibilidad en una línea. El lector de pantalla debe avisar a la persona cuando la aplicación está cargando, ocupada, trabada o falló.
Anunciar de más es la otra falla. Una región polite que se re-renderiza diez veces encola diez mensajes que la persona no puede detener. Una ráfaga assertive pierde los mensajes anteriores, porque la especificación (en inglés) permite al agente limpiar la cola cuando llega un cambio assertive.
El estado vacío es texto estático y se anuncia cuando el lector llega a él. Si aparece después de una búsqueda, necesita región viva o movimiento de foco, o la persona no oye nada y espera un resultado que no llega.
Cómo construir el estado vacío con acción
La anatomía de Carbon (en inglés) para el estado vacío lista imagen opcional no interactiva, título corto, cuerpo que explica la próxima acción, acción primaria y enlace secundario opcional.
El mismo patrón de estado vacío (en inglés) recomienda escribir el título como afirmación positiva. Su ejemplo es que “Empieza agregando activos de datos” suena mejor que “No tienes ningún activo de datos”. El patrón también advierte que el estado vacío suele tratarse como detalle final y que el contenido extra tiene costo cognitivo.
En el primer uso, la acción crea el primer registro. En la búsqueda sin resultado, la acción afloja el filtro, y el texto nombra qué filtro cambiar. En el error, la acción primaria reintenta y la secundaria reporta.
Un mensaje sin acción es un callejón sin salida. El estado está listo cuando la persona sabe qué pasó y tiene un control que cambia la situación.
Cómo verificar antes de publicar
- Limita la conexión y observa aparecer el estado de carga. Si dura menos de un cuadro, quítalo.
- Abre una cuenta nueva para el estado vacío, y corre una búsqueda que no devuelve nada para el estado sin resultado.
- Bloquea la petición o devuelve un 500 para forzar el error, y confirma que el reintento funciona.
- Compara la caja del esqueleto con la caja del elemento final. Una dimensión distinta significa un desplazamiento asegurado.
- Mide el CLS en campo, en el percentil 75, porque Google documenta que el dato de laboratorio y el de campo divergen.
- Corre un lector de pantalla en cada estado y cuenta los mensajes. Más de un mensaje por acción significa una región demasiado habladora.
- Alcanza cada acción solo con el teclado, y confirma que el foco queda en un lugar útil después del cambio de estado.
- Confirma que el error aparece después de un tiempo límite que la persona tolera, y no de uno que parece un cuelgue.
Un estado que solo avisa que no hay datos deja a la persona atascada, sin saber qué hacer. Nombra los cuatro estados, dale a cada uno un mensaje y una acción, y verifica los dos con la red limitada y el lector encendido.
