Cómo conducir UX con AJAX
Con el uso de Internet móvil que eclipsa la navegación web basada en computadoras de escritorio, es más importante que nunca que los sitios web se creen con énfasis en cargas rápidas de páginas y reacciones fluidas ante los comentarios de los usuarios.
Una tecnología importante que utilizamos para lograr esto es AJAX, abreviatura de "Asynchronous JavaScript & XML." AJAX le permite actualizar partes de una sola página web sin tirar continuamente el DOM (la arquitectura HTML de la página), eliminando la necesidad de la página carga y crea una respuesta más rápida a la entrada del usuario. La creación de sitios web en un marco 100% AJAX es una técnica que revela nuevas posibilidades en cuanto a lo que se puede lograr en el desarrollo web.
Comenzamos a construir sitios como 100% AJAX hace casi diez años y desde entonces hemos aprendido mucho sobre cómo emplearlo eficazmente para que mejore la experiencia del usuario. En este artículo, exploraremos algunas de las ventajas específicas y algunas limitaciones de esta técnica.
Respuesta rápida del usuario
Un elemento clave de un UX efectivo es una respuesta rápida a la entrada del usuario, pero con un sitio web estándar, los usuarios quedan esperando interacciones mientras las solicitudes se realizan a través de HTTP (o HTTPS) en el servidor, lo que da como resultado una carga de página completa. por cada cambio Este proceso ocurre con cada clic del mouse para solicitar una nueva página, una imagen más grande o más información; el DOM se descarta por completo y se vuelve a cargar en su navegador; a menudo es un proceso inútil al cargar páginas en el mismo sitio, ya que normalmente tienen un contenido similar.
La búsqueda de Kayak está impulsada por AJAX, brindando sugerencias tan pronto como comienzas a escribir.
Una gran ventaja de AJAX es su flujo constante de información, sin obstrucciones por la carga y descarga del DOM, lo que resulta en un mejor control de la experiencia y la atención del visitante. Con AJAX, las aplicaciones web pueden enviar datos hacia y desde el servidor de forma asincrónica sin interferir con la visualización de la página existente.
La diferencia clave entre una implementación estándar de AJAX y un sitio web 100% construido con AJAX es que en este último, el DOM básico se carga en la visita inicial al sitio, generalmente en la página de inicio; todo lo demás que ocurre es simplemente una manipulación de esa carga primaria.
Un ejemplo destacado de la fluidez ofrecida por AJAX es Google Maps. Al acercarse, alejarse, navegar a través de una ciudad a vista de pájaro o en la vista de la calle, la información se envía continuamente para su uso inmediato. Al hacer la transición entre páginas o actualizar el contenido de una aplicación web, AJAX permite que se responda la entrada del usuario de una manera contextualmente adecuada, como salida de formulario actualizada en tiempo real sin recargar la página, animaciones contextuales que cambian entre páginas o cuando se carga un detalle ver.
Al diseñar páginas con una gran cantidad de contenido, empleamos el infinito patrón de desplazamiento de AJAX, que no solo ahorra ancho de banda del navegador al mostrar solo la información inmediatamente relevante para el UX, sino que también reduce la fricción del usuario. En nuestra propia compañía página de noticias por ejemplo, se cargan más artículos a medida que se desplaza hacia abajo, eliminando el uso de páginas y, en su lugar, cargando más información en la pantalla según lo requiera el lector. Este proceso sin fricciones de cargar y descargar más contenido bajo demanda permite a nuestros visitantes obtener exactamente la cantidad de noticias que desean sin presentar barreras a su intención.
UX inconsútil
Obtener el control sobre cómo un sitio web carga contenido crea una oportunidad única para diseñar transiciones de página, cargar animaciones y pautas visuales que ayudan al usuario a comprender la jerarquía del sitio. Esta es también una oportunidad para la creatividad con la marca de la compañía.
Un sitio web con un marco 100% AJAX (porque no hay carga de página completa) no proporciona comentarios sobre su carga de progreso en la ventana del navegador, lo que puede generar confusión si un visitante queda esperando un período prolongado sin respuesta. Aquí es donde los indicadores de estado de carga personalizados entran en juego, proporcionando alguna indicación de que se está progresando durante el tiempo de espera.
Estes Park Medical Center en Colorado utiliza un cargador AJAX personalizado para mantener el color y la marca de su organización, así como impartir la funcionalidad de un símbolo de carga.
Sobre el Zillow sitio web, los detalles de las listas se actualizan constantemente sin el uso del botón de actualización del navegador, dando acceso a los inquilinos a la vivienda a información actualizada en todo momento.
Pequeñas adiciones como estas son conmovedoras para crear una experiencia memorable para sus visitantes y son posibles gracias al uso de AJAX.
Tomando el control de la ruta de la URL con el historial de HTML5
Sin cargas de página individuales, un sitio se define por tener una sola URL, lo que causa problemas en los sitios AJAX mal construidos a medida que los usuarios intentan marcar, o navegan usando los botones de avance y retroceso de su navegador. Además, debido a que históricamente el rastreador de motores de búsqueda de Google no leyó JavaScript, ha habido dudas sobre qué tan bien se podrían recuperar los sitios con AJAX en los resultados de búsqueda orgánica de Google.
Ambas condiciones se resuelven al obtener control sobre la ruta de la URL utilizando el API de historia HTML5 .
Cada página de un sitio 100% AJAX y sus vistas alternativas se consideran su propia solicitud; a medida que navega por un sitio AJAX, aunque técnicamente es una sola página cargada, la URL del navegador se actualiza para proporcionar una dirección única que representa el estado de visualización actual. Además, podemos escuchar los eventos de cambio de historia para apoyar el botón Atrás del navegador y devolver el estado de visualización anterior. Cada una de estas URL únicas está completamente indexada por Google, lo que significa que este enfoque es totalmente compatible y útil para SEO.
Amazon's A9 el servicio de búsqueda depende de AJAX para recuperar volúmenes sustanciales de datos sin perder el historial de búsqueda del usuario.
En conclusión
Como puede ver, AJAX es esencial para el avance del desarrollo web moderno y suplanta una serie de tecnologías inferiores que proporcionan una experiencia de usuario deficiente. Sin AJAX, todo el contenido de la página tenía que volver a cargarse por completo para casi todas las interacciones del usuario, incluso si solo parte de la información había cambiado. Esta velocidad obstaculizada, colocaba carga adicional en el servidor y utilizaba un ancho de banda excesivo.
Al construir en un marco 100% AJAX, podemos crear sitios que se personalizan según las necesidades de los clientes, proporcionar una navegación accesible que puede ser marcada por los visitantes del sitio, y esa función en un nivel mucho más alto.
Foto principal, imagen de flujo de datos a través de Shutterstock.