Conoce cómo Azion puede ayudarte a optimizar la experiencia de usuario de tu e-commerce

Descubre cómo la Plataforma de Edge Computing de Azion optimiza UX y aumenta conversiones en e-commerce con herramientas como Pruebas A/B y Procesador de Imágenes.

Rafael Rigues - Technical Researcher
Conoce cómo Azion puede ayudarte a optimizar la experiencia de usuario de tu e-commerce

Según estimaciones1, las ventas globales de e-commerce minorista ascendieron a 5,71 billones de dólares en 2022, y se estima un crecimiento de más del 40 % en los próximos años, alcanzando los 8,14 billones en 2026.

Estos ya son números impresionantes, pero podrían ser significativamente mayores. Un white paper publicado por Career Foundry2 estima que hasta el 35 % de las posibles ventas de e-commerce se pierden debido a una mala experiencia de usuario (UX) y esto ocasiona un “problema de billones de dólares”.

Aquí, podemos hacer una analogía con el mundo real: si visitas una tienda física y eres atendido rápidamente por un vendedor amable que comprende tus necesidades y te presenta buenas recomendaciones de productos y ofertas especiales, probablemente realizarás una compra, volverás más adelante y recomendarás la tienda a tus amigos.

Por otro lado, si tienes que esperar para ser atendido por un vendedor grosero que no te escucha y solo quiere venderte productos que no deseas para hacer una venta rápida, probablemente te irás rápidamente y les hablarás a todos los que estén a tu alrededor sobre la mala experiencia que tuviste.

De la misma manera, en el comercio electrónico, los compradores satisfechos realizan compras, recomiendan la tienda y se convierten en clientes leales. Pero los insatisfechos, frustrados por una mala experiencia del usuario, abandonan sus carritos de compra y el sitio web para nunca volver, pero no sin antes dejar comentarios negativos en todas las plataformas a su alcance.

Hay varios factores que pueden llevar a una mala experiencia de usuario, entre ellos, una velocidad de carga lenta o alta latencia, un diseño poco atractivo, una navegación confusa o incompatibilidad con dispositivos móviles, entre otros.

Afortunadamente, existen innumeras herramientas disponibles para evitar o resolver estos problemas. Muchas de ellas están integradas en la Plataforma de Edge Computing de Azion, lo que permite a los desarrolladores crear fácilmente aplicaciones y experiencias modernas que se ejecutan en el edge y son accesibles desde cualquier dispositivo.

Tres herramientas que puedes usar para optimizar la experiencia de usuario en tu e-commerce

Pruebas A/B

Imagina el siguiente escenario: eres responsable de una plataforma de e-commerce y sabes que tus tasas de conversión son bajas. Incluso puedes saber que los usuarios abandonan sus carritos durante un momento específico del proceso de compra, pero no puedes identificar la razón.

Hay dos formas de resolver este rompecabezas: puedes utilizar una estrategia de “prueba y error” y hacer cambios al azar hasta encontrar una solución o utilizar el método científico. Más específicamente, las pruebas A/B.

Este tipo de prueba consiste en dividir aleatoriamente una parte de tu audiencia en dos grupos, ofreciendo a cada uno una versión ligeramente diferente del contenido (o la experiencia), y recopilando datos para averiguar cuál de ellas brinda los mejores resultados.

Además de mostrar claramente la opción preferida, este método evita el riesgo de exponer a toda tu base de clientes a cambios que puedan tener inadvertidamente una alta tasa de rechazo. Cualquier impacto negativo que pueda haber estará limitado por el tamaño de la muestra de la prueba.

Un ejemplo de Prueba A/B, mostrando dos piezas de contenido y su respectivo desempeño

Ejemplo de prueba A/B.
Imagen: Maxime Lorant, Wikimedia Commons (CC-BY-SA 4.0)

Un buen ejemplo de prueba A/B es un experimento llevado a cabo por Google que se conoció como “50 tonos de azul”3. Se hizo la siguiente pregunta: “¿Influye el tono de azul utilizado en los enlaces patrocinados dentro de GMail en el CTR (Click Through Rate, tasa de clics)?”.

Para encontrar la respuesta, la empresa involucró al 1 % de sus usuarios en una serie de experimentos, comparando decenas de tonos ligeramente diferentes de azul, hasta descubrir que uno “ligeramente morado” era el mejor aceptado. El resultado de este cambio fue, según un ejecutivo de Google, un aumento de 200 MUSD en beneficios publicitarios durante un año.

En Azion Marketplace, encontrarás una solución de pruebas A/B serverless implementada como una dge uction, con reglas de negocio y pruebas ejecutadas directamente en el edge que controlan y dirigen el tráfico a tu sitio web de acuerdo con la evolución de cada prueba.

Cuando llega una solicitud al edge, un algoritmo la distribuye de acuerdo con un puntaje de probabilidad definido por el usuario en los argumentos de la edge function. A continuación, se establece una cookie con una fecha de caducidad y los valores especificados para A o B. A partir de esto, todo el tráfico del cliente que originó la solicitud se redirigirá a la versión seleccionada del contenido.

Esto significa que la selección se realiza incluso antes de que los usuarios comiencen a cargar la página, evitando que el desempeño sea penalizado, lo que también hace que nuestra edge eunction sea significativamente más rápida que las soluciones que utilizan JavaScript para realizar pruebas A/B.

Content Targeting

Brindar contenido personalizado a un usuario de acuerdo a sus preferencias personales es otra manera de aumentar las tasas de conversión. Si su perfil indica que sus intereses son los autos y la carpintería, no tiene sentido enviarle una landing page sobre artículos de costura.

Al igual que con las pruebas A/B, Azion brinda la solución serverless Content Targeting (segmentación de contenido) implementada como una edge function. Esta permite la creación y manipulación de cookies, así como encabezados (headers) con lógicas de uso flexibles, ya sea para segmentar el contenido, para lidiar con contextos de aplicaciones específicas, con reglas de negocio, o para cualquier otro escenario que pueda necesitar ser evaluado.

Con ella puedes crear diferentes escenarios, definiendo variantes y porcentajes de distribución para cada uno, con mayor asertividad y sin sobrecargar recursos e interacciones en la fuente. Toda la lógica de selección se ejecuta en el edge, lo que le permite elegir qué versión del contenido se mostrará, incluso antes de que el usuario comience a cargar la página, y sin interferir en los tiempos de carga.

Image Processor

Las imágenes son una parte crucial de cualquier plataforma de e-commerce. A través de ellas los clientes conocen tus productos y son informados sobre novedades y ofertas. Deben tener la mejor calidad y el menor tamaño posibles para no afectar negativamente el tiempo de carga de las páginas.

Gestionar imágenes es más difícil de lo que parece. No es suficiente con tener una buena imagen para cada producto; necesitas múltiples versiones. Las computadoras personales, las tabletas y los smartphones tienen pantallas con diferentes tamaños y resoluciones, por lo que una imagen que puede verse bien en un dispositivo se verá horrible en otro. Idealmente, necesitarás una versión optimizada para cada tipo de dispositivo.

También, puede ser interesante tener versiones con diferentes ratios de compresión, teniendo en cuenta las diferencias de ancho de banda durante el acceso. De esta manera, puedes mostrar una versión de baja calidad (y con un tamaño de archivo más pequeño) a aquellos con conexiones más lentas. Desde el punto de vista de la UX, es más deseable que se muestre una imagen “de más baja calidad” que no mostrar imagen alguna, lo que puede hacer que el usuario crea que el sitio web está fallando.

Y no hemos tomado en cuenta aún diferentes formatos de imagen. JPEG es el más utilizado para las fotos, pero alternativas como WebP suministran la misma calidad visual con tamaños de archivo más pequeños. 

Ejemplo de la misma imagen comprimida en tres formatos, mostrando diferencias de calidad de imagen en detalles y tamaños de archivo finales

Ejemplo de compresión de imagen en tres formatos diferentes.
Una imagen PNG de 1,5 MB es reducida a 95,7 KB en WebP sin pérdida visible de calidad.
Imagen: Christophe Mehay, Wikimedia Commons (CC-BY-SA 3.0)

Sin embargo, no todos los dispositivos o navegadores web admiten WebP. Esto significa que si deseas usar este formato, deberás mantener versiones JPEG de cada imagen como respaldo e implementar alguna lógica de selección capaz de mostrar el formato más adecuado, teniendo en cuenta las capacidades del navegador web o el dispositivo.

Hagamos un cálculo rápido: imagina que tienes una imagen de un producto. Si deseas tener una versión optimizada para cada tipo de dispositivo (computadora, tableta y smartphone), necesitarás tres imágenes. Si quieres dos versiones de cada una para diferentes capacidades de ancho de banda, digamos una versión ” de baja calidad” y una versión “de alta calidad”, necesitarás seis. Si adicionas variantes en formatos como JPEG y WebP, tendrás 12 imágenes. Multiplica eso por el número de imágenes de productos en tu tienda, más todos los banners, encabezados e imágenes para fondos y landing page y te verás como con una bola de nieve rodando montaña abajo.

Image Processor de Azion te permite automatizar el procesamiento y la gestión de imágenes mediante el diseño de flujos de trabajo que optimizan las imágenes sin necesidad de intervención manual.

Es capaz de recortar y cambiar el tamaño de las imágenes, aplicar compresión sin pérdidas, convertir imágenes al formato más óptimo compatible con el navegador o aplicar marcas de agua y filtros automáticamente. Luego, al usar Real-Time Metrics, puedes realizar un seguimiento de cuánto ancho de banda estás ahorrando.

Dafiti, un sitio web de e-commerce con 7,7 millones de usuarios activos, utiliza nuestro Image Processor para optimizar la carga de imágenes en su sitio web. La herramienta procesa más de 17 millones de imágenes, lo que reduce el tamaño de los archivos un 75 % como promedio y ahorra decenas de terabytes de ancho de banda cada mes.

Conclusión

Al optimizar la UX de tu plataforma de comercio electrónico, es importante considerar también el uso de tecnologías como Edge Functions y Next.js para que el sitio web se cargue más rápido y sea más responsivo. Además de mejorar la UX, esto también puede ayudar con el SEO, aumentando tu visibilidad y, como consecuencia, tus ventas.

En resumen, una buena UX es positiva para las ventas, ya que aumenta la tasa de conversión, la retención de clientes y la publicidad boca a boca. Y los resultados son palpables: según Forbes4, un estudio de investigación de Forrester muestra que cada 1 USD invertido en UX genera un retorno de 100 USD, es decir, de un 9 900 %, en promedio. No encontrarás otra inversión con tales tasas de retorno.

Regístrate para obtener una cuenta gratuita y ver por ti mismo cómo Azion puede ayudarte a optimizar la experiencia del usuario de tu plataforma de e-commerce o habla con nuestros expertos para obtener más información.

Referencias

1 Retail e-commerce sales worldwide from 2014 to 2026
2 The Trillion Dollar UX Problem
3 Why Google has 200m reasons to put engineers over designers

mantente actualizado

Suscríbete a nuestro boletín informativo

Recibe las últimas actualizaciones de productos, destacados de eventos y conocimientos de la industria tecnológica directamente en tu bandeja de entrada.