Potenciando el comercio electrónico con la Web Visual

♪♪♪ Las imágenes, el video, y los medios forman parte de nuestra experiencia web diaria. ¿Cómo podemos aprovecharlo desde una perspectiva de comercio electrónico y asegurarnos de brindar la mejor experiencia posible? Así que, ¿quién soy yo? Soy Kolby Fayak. Soy el que está abrazando a BB-8 y Kylo Ren allí. Trabajo con la comunidad de desarrolladores como Ingeniero de Experiencia de Desarrollador en Cloudinary. Puedes encontrarme prácticamente en cualquier lugar de la web simplemente buscando mi nombre, ya que soy el único en el mundo.

Entonces, vamos a comenzar en la cima con el rey del comercio electrónico, Amazon, donde lo primero que vemos al cargar esta página es que está cubierta de medios. Es una buena manera de mostrar los productos disponibles, por lo que tiene mucho sentido. Esta es la página de inicio de su tienda de moda, que probablemente se ve similar a muchas de las páginas de inicio de nivel superior que has visto, donde tenemos imágenes grandes que están destinadas a mostrar los productos disponibles. Y si nos desplazamos hacia abajo, tenemos la capacidad de comprar por categoría, donde tenemos imágenes que representan cada categoría. Una vez que nos sumergimos aquí, podemos comenzar a ver una cuadrícula de imágenes, donde, como aquí en la página de listado de productos, la forma más fácil de navegar por una gran cantidad de productos es ponerlos en una lista. Así que los colocamos en una cuadrícula por la que podemos desplazarnos. Una vez en nuestra página de detalles del producto, queremos ver más de cerca y elegir nuestras opciones. Idealmente, esto significa tener varias fotos que muestren diferentes ángulos. Ahora, no quiero criticar a Amazon aquí, pero realmente no hay nada innovador sucediendo. Estoy seguro de que prueban A-B cada detalle de esta página para asegurarse de que no afecte la conversión, de lo cual hablaremos más adelante, pero todo es muy práctico y funcional. Entonces, ¿cómo podemos llevar nuestros medios en el comercio electrónico a un nivel superior?

Aquí tenemos Starkadet, donde soy un gran fanático de su mercancía de Final Space. Aprovechan los GIF para mostrar imágenes de categorías y productos similares a videos. Es un enfoque más creativo, tomando un medio estático muy típico y haciéndolo emocionante. Glasses USA permite a los posibles clientes ver cómo se verían los anteojos en el rostro de alguien. Comprar anteojos es difícil y quieres un par en el que te sientas seguro. Tradicionalmente, tendríamos que esperar lo mejor con una buena política de devolución, pero esto nos acerca un paso más a sentirnos como si estuviéramos realmente en una tienda. En cuanto a las páginas de productos, todavía necesitas tener la capacidad de mostrar tu producto. Las personas necesitan comprar algo y debe ser muy claro. Entonces no quieres ser demasiado creativo, pero aquí, como Nike, podemos ver que han incorporado video como parte de esa experiencia para dar a las personas una mejor idea del ajuste. Por creativo que sea eso, todavía se ajusta a un medio tradicional. La web está cambiando. Entonces, ¿cómo será el futuro del comercio electrónico? Nike adquirió recientemente Artifact Studios, un equipo que crea zapatos y coleccionables listos para el metaverso. Es similar al juego de coleccionables del que Nike siempre ha sido parte, pero ahora como una inversión en el mundo digital. Y esa no fue la única incursión de Nike en ese mundo. Nike también lanzó Nike land en Roblox.

En el mundo del comercio electrónico, es importante mostrar imágenes y videos grandes y claros para exhibir tus productos. Apple destaca las características con diagramas, mientras que Wyze utiliza fotos de estilo de vida para ayudar a los clientes a imaginar el producto en sus propias vidas. El video puede proporcionar más contexto en menos tiempo, y Under Armour utiliza eficazmente el video en su página de inicio para involucrar a su audiencia de atletas. Como desarrolladores, debemos asegurarnos de mostrar imágenes claramente y evitar la sobrecompresión o el uso de miniaturas pequeñas.

Permíteme hablarte sobre algunas formas más prácticas en las que podemos ver nuestros medios hoy en día. Aunque es probable que el metaverso llegue pronto, todavía necesitamos mantener una web 2.0 efectiva. Aunque para algunos de ustedes esto puede parecer fácil, es muy importante asegurarse de mostrar imágenes grandes y claras y videos para exhibir tu producto. Es especialmente útil cuando tienes más que una sola imagen amplia del producto. A las personas les importa mucho los productos que compran, por lo que poder ver de cerca cómo se ven les ayuda a asegurar la calidad que están obteniendo.

No podemos hablar de imágenes de referencia de comercio electrónico sin mencionar a Apple, porque hacen un excelente trabajo al mostrar imágenes detalladas de sus productos. Pero eso no siempre es suficiente para asegurarse de que las características sean claras. Ellos hacen un esfuerzo adicional para resaltar las características, diagramando diferentes puntos de los productos, como su uso potencialmente confuso de tres lentes separados para un solo iPhone, donde señalan las diferencias entre los tres. Y aunque es importante tener esas imágenes grandes y claras, algo en lo que Wyze hace un buen trabajo, las fotos de estilo de vida son una forma de situar tu producto en la vida cotidiana de las personas, ya sea que el cliente potencial lo sepa o no, esto les ayuda a imaginar cómo ese producto encajaría en su propia vida.

Entonces, ¿cómo podrían estos auriculares de Wyze ayudarte? ¿Quizás disfrutando de música en la cama? Son tan cómodos que podrías olvidar que los llevas puestos. Como puedes ver en el titular allí. Ahora ThinkGeek, una empresa para la que trabajé, que solía vender cosas geniales de todos tus fandoms favoritos, llevó esto un paso más allá. No solo mostraron los productos en un escenario de la vida real, sino que lo mostraron con un toque divertido. Así que puedes imaginarte completamente como Darth Vader, horneando con tus tazas medidoras de R2D2. Pero marca la diferencia dar este paso adicional, ayudando a construir una conexión más fuerte con tu audiencia.

Ahora, al actualizar los medios de imágenes estáticas, tenemos videos, que pueden ayudar a proporcionar más contexto entre las imágenes en un período de tiempo más corto, junto con el audio para proporcionar descripciones verbales adicionales, pero podemos hacer algo mejor que simplemente incrustar un video en una ventana emergente. Como mencioné anteriormente, podemos utilizar videos de formas que mejoren la experiencia sin restar valor a la existente. Under Armour establece instantáneamente el tono con videos en su página de inicio. Su audiencia está llena de atletas, por lo que esta es una excelente manera de llevar a alguien directamente al gimnasio y emocionarlo. Así que, en lugar de solo mostrar una serie de imágenes, ¿cómo podemos realmente tomar esto y hacerlo realidad desde una perspectiva de desarrollador? En realidad, algunas de estas respuestas pueden no incluir soluciones técnicas, como por ejemplo, para mostrar imágenes grandes y claras, lo primero que necesitas son imágenes grandes y claras. Pero asegúrate de mostrar esas imágenes grandes y claras en la página y evita la sobrecompresión o mostrar miniaturas muy pequeñas.

Las personas necesitan poder ver claramente qué es el producto. Así que aprovecha esas grandes y hermosas imágenes. Pero puedes llevarlo un paso más allá. Puedes permitir que las personas hagan zoom en esas imágenes directamente en tu página, evitando pasos innecesarios para sacarlas de esa página. Hay muchas bibliotecas excelentes basadas en zoom que pueden ayudarnos con esto, como React to Interim Zoom que nos brinda una experiencia más sencilla para Uniqlo. O también hay muchas otras bibliotecas modales de zoom tradicionales donde realmente no proporcionan la experiencia de zoom que esperarías en una página de producto.

Pero también puedes intentar replicar esto por tu cuenta. Así que solo como ejemplo, una vez que se habilita el zoom, podemos capturar dinámicamente la posición del cursor y actualizar la posición de la imagen en relación con su contenedor. Y aunque este es solo un ejemplo simple de cómo podría funcionar, muestra los conceptos básicos de cómo podemos comenzar a lograr esa experiencia de usuario. Ahora, proporcionar detalles basados en puntos es un poco más fácil y un poco más complicado. Agregar texto superpuesto en una imagen no es tan difícil. Pero cada una de esas líneas apunta precisamente a ese lente. Si bien podemos hacer eso bastante fácilmente para un solo tamaño de ventana gráfica, en realidad la mayoría de nosotros intentamos crear experiencias responsivas. Nuevamente, esta es una representación muy simple e incompleta, pero podemos comenzar a ver cómo podemos lograr esto utilizando el escucha de redimensionamiento y estableciendo coordenadas basadas en el ancho y alto originales, donde es basado en porcentaje, por lo que podemos actualizar dinámicamente esa posición a medida que se redimensiona.

Ahora, las imágenes de estilo de vida son una de esas cosas donde, nuevamente, a menos que también seas el fotógrafo, vamos a necesitar apoyo creativo en las imágenes. Pero aún podemos ver cómo podemos proporcionar bonitos banners como este sin tener que incrustar el texto dentro de la imagen. Al incluir el texto en la página, estamos ayudando tanto a los motores de búsqueda a leer ese texto como a la accessibility. Además, es probablemente más fácil hacer que las respuestas sean legibles en todas partes. Y en cuanto a los videos, sí, imagino que podrías estar pensando, puedo simplemente poner un GIF ahí. Y sí, puedes hacerlo, pero los GIF pueden ser enormes, especialmente si los quieres grandes y de alta calidad. En cambio, podemos aprovechar el video real en la página, que, dependiendo del caso de uso, puede proporcionar resultados de tamaño de archivo mucho mejores. Usando el elemento HTML video, podemos ocultar todos los controles en la interfaz del reproductor y configurarlo para que se reproduzca automáticamente en bucle, solo para asegurarnos de que tu aplicación realmente pueda ver esa solución con los resultados y ver cómo se compara con otros.

Ahora, tenemos muchas herramientas increíbles a nuestra disposición. Pero no siempre es tan fácil como simplemente colocar un montón de imágenes y videos en una página. Debemos tener en cuenta consideraciones importantes sobre cómo implementamos realmente estas experiencias. Sin considerar el impacto, podríamos estar sobrecargando innecesariamente los dispositivos y el ancho de banda de las personas, ralentizando considerablemente la carga de sus páginas y perjudicando su experiencia. O peor aún, afectando negativamente la tasa de conversión de nuestra tienda. Ahora, si no estás familiarizado, la tasa de conversión es el porcentaje de tu tráfico que realmente compra algo. Hay muchos estudios que demuestran cómo la velocidad del sitio web se correlaciona directamente con la tasa de conversión. Por ejemplo, eBay descubrió que un aumento del medio por ciento en su tasa de conversión con una mejora de 100 milisegundos en el tiempo de carga.

Ahora eso puede no parecer mucho, pero eBay tiene un valor de más de diez mil millones de dólares. Así que solo como ejemplo, el 0.5% de mil millones son cinco millones. Así que comienza a sumar muy rápidamente. Eso significa que mientras todos nuestros video e imágenes pueden ayudar a construir una buena experiencia de usuario, esos medios van a ocupar la gran mayoría del tamaño de la página. Así que si no prestamos atención a cómo los entregamos, vamos a inflar nuestras páginas y destruir nuestras tasas de conversión.

Entonces, ¿qué podemos hacer para ayudar a optimizar esa entrega? Bueno, veamos algunos ejemplos de imágenes. Comencemos, aunque JPEG es una gran opción, hay formatos más modernos que pueden ayudarnos a entregar imágenes de alta calidad con tamaños reducidos. WebP y AVIFF son dos opciones excelentes. Y dependiendo de la imagen, pueden lograr reducciones drásticas en el tamaño. También podemos comprimir nuestras imágenes hasta el punto en que no afectemos la calidad visual. Tal vez no importe para esta pequeña miniatura, pero hemos aprendido que queremos mostrarlas grandes y bonitas, ¿verdad? Así que queremos que todas se muestren en todo su esplendor. Podemos permitir que la tecnología decida automáticamente cuánto queremos optimizar sin perjudicar la calidad visual. No estamos sobreoptimizando y no estamos desperdiciando kilobytes preciosos en descargas. Si estás trabajando con imágenes de alta calidad, tus archivos fuente pueden ser enormes. Si los sirves tal cual, el navegador tendrá que redimensionarlos de todos modos. Así que solo estás desperdiciando ancho de banda. Redimensiona las imágenes a los tamaños que necesitas. Y no intentes simplemente comprimir la imagen para hacerla más pequeña. Terminarás con imágenes súper borrosas o pixeladas. La entrega de imágenes moderna puede darte los tamaños exactos que necesitas sobre la marcha. Así que aprovecha eso. Al juntar todo esto, obtenemos resultados realmente sorprendentes. Utilizando formatos modernos, dejando que la tecnología maneje automáticamente la optimización de nuestras imágenes, y sirviendo las imágenes en tamaños que tengan sentido para nuestra aplicación web, logramos reducir este ejemplo en particular de 652 a 76.6 kilobytes. Todo sin sacrificar la calidad. Si prestamos más atención a nuestros medios, no solo podremos construir experiencias excelentes de manera responsable para la web, sino que también estaremos ayudándonos a nosotros mismos a brindar la mejor oportunidad de conversión.

Hablando de comercio electrónico, si quieres aprender cómo construir tu propia tienda en línea, echa un vistazo a mi curso, Gestión de productos y escaparate de comercio electrónico, donde te guiaré en la construcción de una aplicación de pila completa con Next.js, Snipcart y GraphCMS. Puedes encontrarlo en egghead.io, donde lo incluiré en las notas de mi charla. Y eso es todo. Si quieres obtener más información o hablar sobre la charla, puedes encontrarme en todas partes como ColbyFayok. Y también tuitea un enlace con algunas de las cosas que has visto aquí hoy. Gracias.