Hover infinito + compra rápida en categorías: la combinación perfecta para mejorar tu ratio de conversión

Hoy venía a hablar fundamentalmente de dos mejoras que he implementado en un cliente hace poco en el listado de categorías. Dos mejoras de CRO orientadas a mejorar el ratio de conversión.

–> PUEDES ESCUCHAR ESTE POST AL COMPLETO PODCAST ADIGITALGO

El hover infinito en el listado: una tendencia que ha venido para quedarse

Ya os hablaba de una de ellas en un post anterior —que os dejo linkado más abajo—, que era fundamentalmente el hover infinito: pasando el dedo por la product card, dentro de un listado de categorías, puedes ver todas las fotos del producto.

Antes la tendencia era que cuando pasabas el ratón por encima, o en su defecto hacías hover, veías la segunda imagen. Ahora ya no. Ahora, deslizando el dedo gordo —o dándole a unas flechitas, o haciendo clic en desktop— pasan todas las fotos del producto. Eso proporciona muchísima información al usuario para tomar la decisión, además de que le permite comparar y ver mucha más información de los productos que está buscando, mucho más rápido.

Por lo tanto, estamos optimizando la toma de decisiones en el e-commerce, lo cual siempre va orientado a mejorar el ratio de conversión. Incluso diría que a potenciar el ticket medio, fijaos, porque a medida que ves más productos, quizás podemos estar aumentando el valor de la cesta y la probabilidad de que el usuario añada más productos al carrito.

Esta tendencia la menciono en el post anterior; os hablo de ella con más detalle en el enlace de más abajo. Pero ahora quiero hablaros de la otra mejora, porque las dos vienen de la mano, son como primos hermanos.

La compra rápida: no es nueva, pero el formato sí importa

Alguien dirá: oye, perdona, pero la compra rápida es algo que está mega sobado, no es una tendencia ni mucho menos. Y tiene razón. Pero os vengo a hablar del formato en el que estoy viendo la compra rápida últimamente en los e-commerce.

Qué es la compra rápida

Para quien no lo sepa, una pequeña definición. El flujo normal en un e-commerce para ejecutar cualquier compra sería: el usuario llega a tu página web a través de la home, después navega por un listado (por ejemplo, pantalones), después hace clic en el pantalón que le guste, va a la ficha de producto, ve un montón de características orientadas a favorecer la toma de decisiones, añade al carrito, y llega al checkout donde finaliza la compra. Son cuatro pasos.

Lo que pretende hacer la compra rápida es, evidentemente, cargarse uno de ellos.

Dónde se popularizó y por qué

Se popularizó mucho en su momento en productos o e-commerce donde la toma de decisiones es muy sencilla: lo que llamamos productos por impulso o productos con baja implicación de compra. Son aquellos en los que, por ejemplo, la marca no tiene tantísima relevancia en la decisión: el papel higiénico, la pasta de dientes, el arroz… productos de compra cotidiana donde el esfuerzo en la decisión y el desembolso son muy bajos.

También era muy habitual en e-commerce donde la mayoría de carritos tenían varios productos, porque esta funcionalidad mejoraba muchísimo la rapidez con la que un usuario podía añadir productos al carrito.

Los formatos que hemos visto hasta ahora

La compra rápida la veíamos normalmente en tres formatos:

• Un botón «+» debajo de la product card que abría una especie de pop-up o capa con un zoom del producto, la talla si había que seleccionarla, y el botón de añadir a la cesta. Esto era un poco cutre, porque al final no eliminabas el paso de la ficha de producto: esa capa era prácticamente un paso más, con su tiempo de carga y todo.
• Añadir al carrito directamente al dar al «+», sin ningún paso intermedio. Esto solo es factible si tienes productos de talla única, porque la única variante se añade al carrito automáticamente. Muy potente para ese tipo de e-commerce.
• Un iconito de carrito encima de la imagen, que al darle añadía el producto directamente, también pensado para talla única.

Sea como fuere, yo tengo la sensación —no tengo un estudio estadístico, pero tengo la sensación— de que la compra rápida se quedó un poco de moda y después pasó de moda. Dejé de verla, o mi sensación fue que dejó de ser una modalidad que se usase mucho. La veía sobre todo en los sitios que os he dicho: productos donde el usuario añade muchos productos al carrito muy rápido, y productos de talla única con baja implicación de compra. En esos e-commerce sí que solían contármelos, pero si no, era como que desapareció.

Y ahora la he vuelto a ver — y bien ejecutada

Por eso lo traigo al blog. La he vuelto a ver, y la he vuelto a ver combinada con ese hover infinito del que os hablaba antes.

El ejemplo que me viene a la cabeza más rápido —y espero traeros más ejemplos en formato imagen— es Gancitos. Como sabéis, le tengo en el punto de mira porque está haciendo cosas muy potentes y muy buenas en lo que respecta a hacer CRO en su e-commerce, así que es un sitio web que sigo mucho.

Han implementado esa mejora que combina el hover infinito en el listado con una compra rápida muy bien ejecutada. Y lo interesante es que Gancitos, a priori, no cumple los requisitos que os he dado de e-commerce que se van a beneficiar mucho de la compra rápida: el calzado por lo general no lo compras de dos en dos, no es un producto especialmente barato tampoco —su ticket medio supera los 100 euros por lo general—. Pero quizás en periodos de rebajas sí que agotan unidades muy rápido, y en esos casos le encuentro utilidad, aunque más puntual.

Cómo lo han ejecutado en Gancitos

Lo que me parece muy inteligente es cómo han combinado las dos funciones. Cuando el usuario va usando el hover infinito, automáticamente se abre una capa semitransparente encima de la product card. No es un layout, no es un pop-up; es una capa semitransparente que ocupa solo la parte de la product card, con las tallas encima. Las tallas agotadas aparecen tachadas, y las tallas disponibles aparecen resaltadas en negro.

La única pega de este layout, que queda especialmente estético, es que quizás en móvil resulta un poco pequeño para algunos usuarios. Pero yo lo he probado y es perfectamente clicable: pulsas la talla y en ese momento automáticamente el producto se añade al carrito.

Por qué tiene sentido incluso en calzado

Dándole vueltas a por qué han implementado esta mejora, creo que quizás el proceso de decisión en Gancitos es un proceso largo: estás mirando tu talla, comparas diferentes colores y formatos de producto, te lo piensas, vuelves a la web, miras alternativas de otros competidores… Quizás la compra rápida, cuando ya tienes la decisión tomada desde hace mucho tiempo en ese proceso de reflexión, ayuda mucho, aunque el usuario incluso se lleve varios productos.

Yo creo que este pack —hover infinito más capa transparente de compra rápida— funciona muy bien precisamente para mejorar la rapidez con la que el usuario toma las decisiones finales y para aumentar el número de unidades que añade al carrito.

Lo he implementado con Antigravity y con Gemini en Shopify

Yo lo he implementado en un cliente esta semana, por cierto con Antigravity y con Gemini. Flipante lo bien que ha funcionado Antigravity para este desarrollo. Lo hice con Shopify y creo que funciona muy, muy bien, y queda muy bien además. El layout de ese hover infinito y esa capa transparente realmente se integran muy bien en cualquier estética de e-commerce que os podáis imaginar.

Quizás esto lo grabo también en formato de crónica mensual, donde os hablo de lo que he hecho ese mes, muy orientado a la IA, porque al final cada vez lo uso más para estos desarrollos.

Así que nada, os animo a que le echéis un vistazo a Gancitos y a esta tendencia, porque creo que ha venido para quedarse. Nos escuchamos en el próximo post. Chau.