Un visitante pulsa un botón y parece que no ocurre nada. Quizá la solicitud esté viajando hacia un servidor; quizá el proceso ya haya terminado; quizá haya fallado la conexión. Un adorno que gira no resuelve esa incertidumbre. La espera forma parte de la interfaz y merece el mismo cuidado editorial que el resultado final.
Nombra el trabajo, no solo la demora
Empieza por la acción que ha elegido la persona. «Preparando la comparativa» informa más que un indicador de carga aislado, porque vincula la pausa con la tarea. Mantén la explicación cerca del contenido afectado. El resto de la página no debería convertirse en una pantalla en blanco sin explicación cuando solo se está actualizando una pequeña sección.
No inventes precisión. Un porcentaje solo resulta útil cuando el sistema puede medir un progreso significativo. Una cuenta atrás que vuelve a empezar o un indicador que se queda en el noventa y nueve por ciento crea una promesa que la interfaz no puede cumplir. Si no se conoce el tiempo restante, explica qué está ocurriendo sin inventar un plazo.
Distingue la recepción de la finalización
Pulsar un botón, recibir una solicitud y terminar el trabajo solicitado no son el mismo evento. Define qué significa cada mensaje antes de elegir su color o su animación. Por ejemplo, aceptar un archivo para procesarlo no significa que ya se haya revisado; guardar una consulta no significa que alguien la haya respondido.
Muestra que la operación se ha completado correctamente solo cuando dispongas de la confirmación correspondiente. Si el resultado es incierto, conserva esa distinción en lugar de mostrar una tranquilizadora marca de verificación verde. Los estados claros también facilitan una conversación posterior con soporte: el visitante puede describir lo que la página indicó realmente, en lugar de tener que adivinarlo.
Haz que la actualización sea accesible más allá de la vista
Un pequeño cambio en el borde de la pantalla puede pasar desapercibido. La explicación del W3C sobre los mensajes de estado abarca las actualizaciones sobre resultados, esperas o progreso que no desplazan el foco del usuario. Los roles o propiedades adecuados permiten a las tecnologías de asistencia presentar esos mensajes sin obligar a la persona a cambiar de contexto.
Para una región que recibe varias actualizaciones relacionadas, MDN describe aria-busy como una forma de indicar que los cambios aún no han terminado. Devuelve su valor a false cuando finalice la actualización. Por sí mismo, no es un indicador visual de carga, y añadir el atributo no sustituye las pruebas del anuncio real y del texto visible.
Ofrece un siguiente paso seguro
La espera no debería convertirse en un callejón sin salida. Conserva los datos introducidos por el visitante cuando sea posible, explica los fallos con palabras corrientes y ofrece una siguiente acción adecuada para la operación. «Volver a intentarlo» no siempre es seguro: si la primera solicitud puede haber tenido éxito, un segundo envío puede crear un duplicado. Comprueba el resultado antes de animar a repetir la operación.
Si se admite la cancelación, deja claro qué efecto tiene. Detener la animación visible no es lo mismo que cancelar el trabajo del servidor. Una vía para volver a la página puede ser útil, pero no debería descartar sin avisar el esfuerzo de la persona. Los principios de los mensajes de error útiles en formularios también se aplican aquí: describe la situación y el siguiente paso útil.
Prueba los estados intermedios difíciles, no solo el final feliz
Revisa una respuesta rápida, una lenta, un fallo y un resultado incierto. Observa si el mensaje llega en el momento adecuado, si los clics repetidos se gestionan de forma deliberada y si el foco del teclado permanece en un lugar lógico. Comprueba también la presentación con movimiento reducido: el significado debe mantenerse sin efectos de giro ni de pulsación.
Durante el mantenimiento continuo de la web, vuelve a revisar estos estados cuando cambie el servicio subyacente. El objetivo no es hacer entretenida cada espera. Es dar al visitante una respuesta honesta a tres preguntas: ¿qué está pasando, qué se sabe y qué puedo hacer a continuación?