Micaela 11 de noviembre de 2009 a las 11.32
   Imprimir artículo
elWebmaster.com

Ajax: Haz atractivos visualmente los tiempos de carga


ajaxLa 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.

imageaxd

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.

imagedaxd

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.

imadgeaxd

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.

imaddgeaxd

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.

idmageaxd

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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Fernando dice:

    Aca les dejo una pagina web q suelo utilizar seguido.

    http://www.ajaxload.info/

    Es muy interesante la pagina porque podemos configurar los colores para q no haya problemas con el fondo de la pagina y demas.

  2. Mostrar correctamente las cargas de ajax — Ind√≥mita dice:

    […] Puedes leer el art√≠culo en http://www.elwebmaster.com […]

  3. Ajax: Soluci√≥n a 5 problemas muy comunes en su uso « Historial de un navegante dice:

    […] Preloaders.net tiene un gran n√ļmero de elegantes y personalizables gr√°ficos animados para escoger. En esta nota te damos, adem√°s, consejos para hacer atractivos visualmente estos tiempos de carga ¬Ľ […]

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder