En nuestro artículo anterior, Hover Effects Part I: More than Meets the Eye, hablamos de las ventajas funcionales y estéticas que los efectos hover pueden aportar a un proyecto de diseño web. Aunque es un gran punto de partida para la conversación, ¿cómo mejoran los efectos hover un sitio de eCommerce? Además, ¿cómo cambiará force touch el diseño y la usabilidad en móvil?
EFECTOS HOVER PARA ECOMMERCE
Las ventajas de los efectos hover para el eCommerce de escritorio se pueden clasificar en funcionalidad, estética y branding. Las formas en que los efectos hover mejoran la experiencia del usuario y la tasa de conversión son casi tan diversas como la cantidad de efectos hover disponibles.
FUNCIONALIDAD
- reduce la cantidad de clics
- muestra el precio y la disponibilidad
- muestra calificaciones y reseñas
- puede usarse para desplegar íconos que enlazan a cualquier parte
- ayuda al cliente a revisar productos más rápido sin salir de una página
- los menús desplegables incluyen muchas categorías de productos y artículos para una navegación rápida
- permite recorrer las vistas del producto
- muestra distintos ángulos de un producto, por ejemplo: frente y espalda
- zoom para ver detalles de la imagen
- muestra el contenido de tu carrito de compras
ESTÉTICA
- oculta la información del producto, las reseñas, etc., para mantener un diseño limpio
- aspecto elegante y sofisticado
- el aspecto y el cambio de los efectos hover pueden aportar una experiencia de marca única
- puede provocar una respuesta emocional en los clientes
Aunque las aplicaciones de los efectos hover para eCommerce son infinitas, hay que señalar que algunas de estas funciones se pierden al pasar del escritorio a los dispositivos móviles. Veamos la experiencia actual de eCommerce en móvil y cómo podría cambiar en un futuro cercano.
LA EXPERIENCIA MÓVIL
Por definición, los efectos hover no funcionan en móviles ni tabletas porque no es posible pasar el cursor por encima. Tu única opción es tocar (una o dos veces) o presionar para provocar un cambio.
Así que, aunque los efectos hover no aplican en móvil, en los sitios más nuevos todavía es posible generar cambios en pantalla tocando o manteniendo presionado. Mira cómo se ven en móvil los efectos hover del sitio de escritorio de EMODA:
1. En la versión móvil del eCommerce de EMODA debes tocar una vez con el dedo (en lugar de pasar el cursor) para que aparezca un rectángulo negro resaltado alrededor del producto. Si tocas dos veces o seleccionas la "lupa", te llevará a otra pantalla con la información del artículo.
2. De nuevo, para provocar un cambio, debes tocar una vez para ver el rectángulo negro (en lugar de pasar el cursor). Un doble toque mostrará una lista de opciones:
El toque prolongado del ejemplo 2 está muy relacionado con la tecnología más reciente, llamada force touch. Force touch funciona con sensores, o pequeños electrodos, que miden qué tan fuerte presiona el usuario la pantalla, ya sea en una laptop, un móvil o un reloj.
Force touch tiene dos modos: suave y fuerte. Mientras que en el ejemplo 2 mantener presionado muestra una lista de opciones, force touch funciona interpretando el toque suave como un toque normal y el "toque fuerte" como un disparador hacia un destino específico.
Una aplicación práctica sería presionar con fuerza una palabra para abrir su definición enciclopédica (mira el ejemplo de abajo) o presionar con fuerza una dirección para que se abra directamente en Google Maps. Para el eCommerce móvil, predigo que con el toque fuerte un cliente podrá agregar un producto a su carrito o incluso ir directo a la página de pago.
Force touch ahorrará segundos de navegación y podría simplificar la experiencia de eCommerce en móvil. En última instancia, como el eCommerce y el uso de la web se están trasladando al móvil, podría eliminar por completo el uso de los efectos hover. ¿Qué usos se te ocurren en los que force touch pueda mejorar la experiencia de eCommerce en móvil?
En qué terminó esta predicción, y la lección de UX que sigue vigente
Nota editorial: este artículo especulaba que el Force Touch / 3D Touch de Apple transformaría la interacción en el eCommerce móvil. En la práctica, Apple eliminó el 3D Touch de los iPhone (lo reemplazó con Haptic Touch, una pulsación prolongada más ligera basada en software, y quitó por completo la sensibilidad a la presión a partir de 2019), y la industria nunca estandarizó gestos de compra basados en la presión. La apuesta concreta no se cumplió, pero el principio de UX de fondo del que realmente trata el artículo sí, y eso es lo que vale la pena conservar.
El verdadero tema aquí no es Force Touch; es cómo ofrecer la información que el hover revela en escritorio cuando el dispositivo no tiene estado hover. Ese problema es permanente, porque el móvil ya representa la mayor parte del tráfico de eCommerce. Los patrones que ganaron no son los gestos de presión, sino estos:
- Muestra, no ocultes. El mayor error al pasar de escritorio a móvil es esconder el precio, las calificaciones o el botón "agregar al carrito" detrás de una interacción. En móvil, muéstralos por defecto en la tarjeta del producto. Que se puedan descubrir es más importante que la elegancia.
- Áreas táctiles y vista rápida. Un solo toque debe abrir una vista rápida ligera o llevar al producto, con áreas táctiles de tamaño cómodo (un dedo es mucho menos preciso que un cursor). Evita exigir un doble toque preciso para revelar información esencial.
- Las galerías reemplazan al hover para girar el producto. El "pasa el cursor para ver la parte trasera del producto" del escritorio se convierte en una galería de imágenes deslizable con puntos visibles: la información es la misma, pero la interacción es nativa del tacto.
- La pulsación prolongada es un atajo, nunca el único camino. Los menús hápticos o de pulsación prolongada son un buen acelerador para usuarios avanzados, pero cada acción que ofrecen también debe estar disponible con un toque evidente. Esconder una acción principal detrás de un gesto que la mayoría de los usuarios nunca descubre hace perder ventas.
Una lista de verificación práctica para tarjetas de producto en móvil
- Precio, imagen principal, calificación y un control claro para agregar o seleccionar, visibles sin ninguna interacción.
- Galería de imágenes deslizable para otros ángulos en lugar de revelarlos con hover.
- Áreas táctiles lo bastante grandes para tocarlas con seguridad en un teléfono, con un espaciado adecuado.
- Cualquier atajo con gestos (pulsación prolongada, acción de deslizar) duplicado con un control visible que se pueda tocar.
- Probado en un teléfono real de gama media, porque la precisión de entrada y el rendimiento son distintos a los de un emulador de escritorio.
Lo que el hover todavía hace bien en escritorio: úsalo, no lo abandones
Nada de esto significa que el hover haya muerto en los dispositivos con cursor. En escritorio sigue siendo una herramienta realmente útil cuando mejora el camino esencial en lugar de ocultarlo:
- Imagen secundaria con hover (de frente a espalda, o el producto en uso): acelera la revisión sin un clic, siempre que la imagen principal y el precio ya estén visibles.
- Opción de agregar rápido o vista rápida que aparece con hover: acorta el camino al carrito para los compradores decididos, siempre que la misma acción esté disponible en la página del producto para todos los demás.
- Despliegue de categorías en un mega menú: sigue siendo un patrón de navegación eficiente en dispositivos con cursor, y su equivalente en móvil es un menú que se expande con un toque explícito.
El principio que une escritorio y móvil: el hover puede acelerar un camino, pero nunca debe ser la única forma de llegar a información o acciones esenciales. Toda tienda debería estar construida para que un visitante que nunca pasa el cursor ni mantiene presionado pueda ver el precio, las calificaciones y el botón de agregar al carrito, y completar una compra.
Preguntas frecuentes
¿Debo seguir usando efectos hover en mi tienda? Sí, en escritorio, como mejora, nunca para ocultar el precio, las calificaciones o la acción de compra. En dispositivos táctiles, reemplaza el hover con información visible por defecto y galerías deslizables en lugar de intentar imitarlo.
¿Los gestos táctiles como la pulsación prolongada ayudan a la conversión? Pueden servir como atajos para usuarios avanzados, pero como la mayoría de los visitantes nunca los descubren, cualquier acción que ofrezcan también debe estar disponible con un toque evidente. Trata los gestos como aceleradores, nunca como la interfaz principal.
La lección sobrevivió a la tecnología: diseña para la ausencia del hover revelando, no ocultando. Construimos tiendas mobile-first exactamente con este principio; conoce nuestro trabajo de diseño web para eCommerce o contáctanos.