Potenciando el comercio electrónico con la Web Visual

Rate this content
Bookmark

Las experiencias en la web se han vuelto cada vez más visuales, desde mostrar imágenes de productos hasta NFT interactivos, pero no prestar atención a cómo se entrega el contenido multimedia puede afectar los Core Web Vitals y crear una mala experiencia de usuario con páginas de carga lenta, perjudicando la conversión de tu tienda y potencialmente perdiendo ventas.

¿Cómo podemos aprovechar eficazmente los medios para mostrar productos y crear experiencias atractivas para nuestra tienda? Hablaremos sobre el papel de los medios en el comercio electrónico y cómo podemos aprovecharlo al mismo tiempo que optimizamos la entrega.

12 min
16 Jun, 2022

Video Summary and Transcription

Las imágenes, los videos y los medios son cruciales en el comercio electrónico para ofrecer la mejor experiencia de usuario. La adquisición de Artifact Studios por parte de Nike y el lanzamiento de Nike Land en Roblox demuestran el futuro del comercio electrónico en el metaverso. Las imágenes claras y ampliables, los detalles basados en puntos y los videos son esenciales para mejorar la experiencia del usuario. La optimización de la entrega de medios a través de formatos de imagen modernos, compresión, redimensionamiento y tecnología puede mejorar significativamente las tasas de conversión en el comercio electrónico.

Available in English

1. E-commerce y el Poder de los Medios

Short description:

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? Comenzaremos 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. 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. Glasses USA permite a los posibles clientes ver cómo se verían los anteojos en el rostro de alguien. En cuanto a las páginas de productos, todavía necesitas tener la capacidad de mostrar tu producto. 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.

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

2. Mejorando el comercio electrónico con medios

Short description:

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.

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.

3. Mejorando la experiencia del usuario con medios

Short description:

Para mejorar la experiencia del usuario en los sitios web de comercio electrónico, es importante tener imágenes claras y ampliables, proporcionar detalles basados en puntos, incluir texto en la página en lugar de incrustarlo en imágenes y usar videos en lugar de GIF para obtener mejores resultados de tamaño de archivo. Sin embargo, es crucial considerar el impacto de los medios en la velocidad de carga de la página y la tasa de conversión.

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.

4. Optimización de la entrega de medios para el comercio electrónico

Short description:

eBay tiene un valor de más de diez mil millones de dólares, y incluso un pequeño porcentaje de eso puede sumar rápidamente. Para optimizar la entrega de medios, podemos utilizar formatos de imagen modernos como WebP y AVIFF, comprimir imágenes sin afectar la calidad visual, redimensionar imágenes a los tamaños necesarios y dejar que la tecnología se encargue de la optimización. Al prestar atención a los medios, podemos reducir significativamente el tamaño de los archivos sin sacrificar la calidad y mejorar las tasas de conversión. Echa un vistazo a mi curso, Gestión de productos y escaparate de comercio electrónico, en egghead.io para obtener más información sobre cómo construir tu propia tienda en línea.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
WorkshopFree
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.