Ajax: Haz atractivos visualmente los tiempos de carga

La implementación de Ajax en aplicaciones y sitios web está creciendo de forma descomunal. Pero si no se manejan de forma adecuada las funcionalidades Ajax pueden quebrar las expectativas del usuario.

Por eso es necesario ayudar al usuario a entender qué está pasando y prevenir que cometan errores durante las operaciones Ajax.

Mantén al usuario informado

Los indicadores Ajax son herramientas muy importantes que ayudan a los usuarios a entender qué está sucediendo en el sistema y cuáles son las respuesta de éste. Los indicadores deberían mostrarse ni bien comienza el requerimiento y ocultarse cuando termina.

Indicadores simples

Los indicadores Ajax simples brindan una gran pista visual sobre que una petición está siendo llevada a cabo. Se pueden mostrar como texto simple, o como una imagen, usualmente animada:

• Si es en forma de texto, asegúrate de proveer un mensaje significativo, como “Enviando e-mail”. Mensajes como “Cargando, espera…” confunden.
• Si se trata de una imagen animada por lo general se representan por animaciones rotativas. Este es uno de los raros y buenos usos de los GIF hoy en día.

Loadinfo, es una gran página en lo que a indicadores respecta, ofrece una gran cantidad de gifs animados, de todo tipo.

Indicadores de progreso

Si una operación necesita más tiempo para ejecutarse deberías utilizar indicadores de progreso. Este tipo de indicadores proveen una información real acerca del estado de progreso, usualmente mostrando cuánto tiempo ha pasado y cuánto queda para que termine la petición. Los indicadores de progreso también pueden mostrar un mensaje de estado explicando qué está pasando en el momento preciso.

Dropbox provee indicadores gráficos de estado como así también mensajes textuales de estado. Esta es una forma eficiente de comunicar el estado de operaciones largas.

Posición

Cualquiera sea la opción que selecciones, debes asegurarte que el indicador sea claramente visible. Dependiendo del propósito, los indicadores pueden ser colocados dentro del mismo contexto que el elemento que comenzó la petición o pueden mostrarse en una única posición para todas las peticiones. El ejemplo anterior muestra el caso dónde el indicador de progreso se muestra en el área de carga.

Google Mail ha centralizado los indicadores Ajax en la parte superior de la ventana que se revela ante cualquier petición Ajax.

¿Cuál seleccionar?

Lo mejor aquí es citar al artículo de Jakob Nielsen: Response Times: The Three Important Limits (Tiempos de Respuesta: Los Tres Límites Importantes):

• 0.1 segundo: está cerca del límite de hacer sentir al usuario que el sistema está reaccionando de forma instantánea, lo que quiere decir que no se necesita ningún feedback especial, más allá de mostrar el resultado.
• 1.0 segundo: es casi el límite para que el flujo de pensamiento del usuario se mantenga ininterrumpido, a pesar de que el usuario notará el retraso. Normalmente, no se necesita ningún feedback especial durante retrasos de entre más de 0.1 pero menos de 1.0 segundo, pero el usuario pierde la sensación de operar directamente sobre los datos.
• 10 segundos: es casi el límite de mantener la atención del usuario enfocada en el diálogo. Para retrasos más largos, los usuarios desearán realizar otras tareas mientras esperan para que la computadora termine, por lo que deberían recibir feedback indicando cuándo la computadora piensa terminar. El feedback del retraso es especialmente importante si el tiempo de respuesta es probable que varíe, porque los usuarios sino no sabrán qué esperar.

Inhabilita elementos de IU durante la petición Ajax

Mientras una petición Ajax esté en progreso el usuario no debe poder empezar otra, porque podría dañar la información. Esto puede prevenirse fácilmente deshabilitando los elementos de interfaz de usuario durante las peticiones Ajax. Dependiendo del caso, puedes deshabilitar un elemento en particular o la interfaz completa. Los elementos de la IU deben habilitarse nuevamente cuándo la petición finaliza.

BuySellAds muestra el indicador Ajax  en el área central de la pantalla mientras el resto de la interfaz de usuario se deshabilita. Este comportamiento es consistente en toda la aplicación.

Resalta las áreas actualizadas

Cuando se actualiza parcialmente una página es necesario enfatizar la nueva petición Ajax que se ha agregado. La meta es atraer la atención del usuario al sector actualizando y permitir que fácilmente confirmen la actualización. Esto se puede lograr resaltando la parte actualizada por un segundo y luego realizar un desvanecimiento. El color usado en el área resaltada suele ser un amarillo pálido.

Basecamp resalta las áreas actualizadas con amarillo.

Conclusión

Para hacer la funcionalidad Ajax fácil de entender, debes proveer la información sobre el estado del sistema durante la petición y luego de que ésta ha terminado. Básicamente, al trabajar con Ajax deberás:

• Utilizar indicadores Ajax textuales o animados
• Si las peticiones son largas, utilizar indicadores de progreso
• Inhabilitar elementos de la IU durante las peticiones para evitar errores potenciales
• Resaltar las zonas actualizadas por Ajax
• Y por supuesto, siempre deberías mostrar mensajes de estado indicando si una operación ha fallado o resultado exitosa.

¿Cuál es tu experiencia al visualizar peticiones Ajax? ¿Existe algún método particular que prefieras?

Fuente: Janko at Warp Speed