Hoy le toca el turno a la ficha de producto y para mí el absoluto, imprescindible, obligatorio, sí o sí, en cualquier e-commerce es — y lo desvelo ya — el sticky button o el botón pegajoso. Vamos a explicar qué es, en qué consiste, cómo funciona y por qué demonios es tan importante tenerlo implementado.
–> PUEDES ESCUCHAR ESTE POST AL COMPLETO PODCAST ADIGITALGO
Cómo se estructura una ficha de producto en una tienda online
En desktop el botón de comprar, el call to action principal de toda ficha de producto suele situarse el la parte superior derecha de la pantalla. Normalmente en la ficha de producto de un ecommerce en desktop suele estar dividida por la mitad, más o menos. En la parte izquierda tendríamos las fotografías de producto y en la parte derecha tenemos toda la información relativa al producto. Lo más habitual es encontrarnos primero con el nombre del producto, debajo el precio, después, algunas variaciones como por ejemplo otros colores, y luego ya el botón de añadir al carrito,
El objetivo es siempre que el botón de añadir al carrito esté visible lo antes posible y reducir así la probabilidad de que el usuario en algún momento se pueda preguntar: ¿cómo lo compro? Eso es lo que tendría que hacer toda página web en cuanto a buenas prácticas de user experience: hacer que la propia estructura de la página impida que el usuario se haga preguntas, sino que ya están resueltas en esa propia estructura.
Entonces, si el botón de añadir al carrito siempre está visible o está en la parte más visible posible, eso reduce muchísimo la fricción y mejora la experiencia del usuario. Porque no hay nada más frustrante y que limite más la conversión que un usuario preguntándose cómo realizar una acción — en este caso comprar — y que la web no le dé la respuesta de forma inmediata.
Después ya encontraríamos otros ítems que son incentivadores de la conversión: mostrar características más allá de la descripción (que al final nadie se la lee), mostrar información sobre los envíos porque reduce la fricción y los abandonos en el checkout, reseñas, contenido generado por el usuario o UGC…
Te doy más detalles sobre esto en este post
CRO: las tres claves para mejorar el ratio de conversión de tu tienda online
Hoy es el turno del CRO, un tema que no he trabajado mucho en el blog pero que da para largo. Hay documentación por un tubo. Y antes de meternos…
Pero hoy nos centramos en el botón de añadir al carrito, que es este call to action clave para el siguiente paso del funnel que ya sería la compra.
¿Qué pasa en móvil? Aquí está la clave
¿Cómo se estructura ese contenido horizontal de desktop en formato móvil? Que como sabéis es fundamental porque en torno al 80% de las sesiones, si no es más, estarán viniendo desde dispositivos móviles. Pues normalmente lo que ocurre es que lo primero que se muestra es la foto de producto — la parte izquierda en desktop pasa arriba — y toda la parte de la derecha, todos los datos, pasan abajo.
¿Qué provoca esta estructura vertical, y más aún con la tendencia de que las fotos tengan un formato más tipo storie? Que normalmente el botón de añadir al carrito no es visible en un primer scroll. Nada más llegar a una ficha de producto lo primero que vas a ver es la imagen y como mucho quedará espacio para el título y el precio. Pero ya no te da — normalmente la altura de los dispositivos móviles no da espacio para mostrar más información.
Entonces, ¿qué pasa? Que el botón de añadir al carrito no se ve en la primera pasada. En un proceso de compra impulsiva, por ejemplo en momentos en los que los usuarios quieren comprar muy rápido — por ejemplo, ofertas flash, Black Friday, que se sabe que los productos se agotan rápido — el usuario quiere hacer clic, llegar al producto, ver el botón, añadir al carrito. Todo esto menos de 1 minuto….Pero ¿Qué ocurre si no encuentro el botón? De nuevo, volvemos a ese momento en el que el usuario dice: ¿dónde compro? ¿dónde está? Y en esa milésima de segundo en el que el usuario está dudando, podemos perderle.
¿Cómo se resuelve esto en móvil? Con ese sticky button. Es un botón — traducido sería un botón pegajoso — que siempre está visible en la parte inferior de la pantalla. Lo podéis ver, por ejemplo, en Zara, que yo es de los primeros a los que se lo vi ya hace años. Pero esto ha costado ir implementándolo en e-commerce más jóvenes. Ahora ya lo veis por todas partes porque, como digo, es un absoluto obligatorio y está más que demostrado que reduce muchísimo la fricción en la compra o, dicho de otra manera, aumenta el ratio de conversión. Mejora muchísimo las métricas y, por lo tanto, es una práctica CRO 100%.
Ese sticky button, da igual en qué fase de la ficha de producto esté el usuario, que siempre va a estar visible. Esto es importante también para las compras más reflexivas, no solo las impulsivas. El usuario va a llegar al producto, va a ver la ficha, después va a ver las fotografías, después va a ver el precio, pasará por la descripción, ahí aparecerá el botón de añadir al carrito nuevamente. Luego el usuario seguirá bajando a ver las reseñas, cómo lo llevan algunos influencers, qué otras fotografías, cómo lo llevan los usuarios, comparativas, opiniones, preguntas frecuentes dentro de la ficha de producto que se suelen incluir mucho también.
Y en ese momento, en cualquiera de esas fases, puede acabar diciendo: ah, pues me ha convencido, lo voy a comprar. Y al haber hecho scroll, si no tenemos ese sticky button, el botón ha pasado a estar mucho más arriba en la pantalla. Entonces, de nuevo, el usuario va a decir: ¿dónde está el botón de añadir al carrito? Y se va.
El sticky button impide esto. Da igual si el usuario está en una compra impulsiva que quiere comprarlo inmediatamente, o si está en una fase más reflexiva donde ha hecho mucho scroll hacia abajo y el botón de añadir al carrito ha desaparecido. Ese sticky button siempre está ahí.
Cómo funciona técnicamente y qué suele incluir
Normalmente lo que hacen las páginas web es que si el botón de añadir al carrito por defecto — el base, el que estaríamos viendo en desktop — está mostrándose en pantalla, el sticky button desaparece. O directamente, en versión móvil, se elimina ese botón de añadir al carrito que estaría por defecto en desktop. Estarían esas dos versiones.
Si está bien implementado además, el sticky button ya nos mostrará opciones de tallas o incluso los precios. No solo es el botón de añadir al carrito: cuando le das, hay varias opciones. Aparecen las tallas, te dice seleccionar una talla, o cuando le das, te está mostrando el precio, si es alguna oferta. Hay algunos elementos que se añaden a ese sticky button, pero por lo general, la clave es que esté pegado a la base del teléfono, a la parte más baja del dispositivo. Siempre está ahí. Y normalmente está en un tono destacado — suele ser negro, la verdad.
Si no tienes esto, en móvil, que sepas que estás perdiendo conversiones y tienes mucho potencial para optimizar tu ratio de conversión. Es una práctica ya extendidísima, demostradísima que funciona. Así que impleméntala en tu tienda online sí o sí.
