Actualización del producto: Los estados flotantes han estado con nosotros desde la invención del ratón, y por una buena razón: indican a los usuarios dónde hacer clic. Por eso, cuando A.S. Watson nos pidió que mejoráramos los estados hover de sus hotspots, nos pusimos manos a la obra de inmediato.
Durante un periodo de dos meses, realizamos varias pruebas A/B en las que hicimos visibles sus zonas activas al pasar el ratón por encima. De este modo, conseguimos un aumento de 96% en su porcentaje de clics (es decir, la proporción de compradores que hacen clic desde los anuncios semanales online hasta la tienda online).
Estamos encantados de poner por fin esta actualización a disposición de todos. Sigue leyendo para saber más sobre la actualización y cómo puedes aprovechar estas ventajas.
Antes de entrar en materia, me gustaría dar una rápida visión general de este post. La primera sección explica el estado hover de las zonas activas y cómo activar esta función. También incluye algunos consejos sobre cómo utilizar el estado hover al máximo.
Las secciones segunda y tercera son para aquellos que estén interesados en leer más sobre las pruebas que realizamos y nuestra teoría de por qué los estados de suspensión mejorados dieron lugar a una mejora tan significativa.
1. Hotspots visibles al pasar el ratón por encima
La mayoría de ustedes probablemente estén familiarizados con el editor de zonas activas y con el uso de rectángulos para crear zonas en las que se puede hacer clic (o zonas activas) en su catálogo en línea.
Antes, cuando un comprador pasaba el ratón por encima de una zona activa, el cursor del ratón cambiaba y aparecía una información sobre la herramienta:
No hay ninguna indicación de la zona en la que se puede hacer clic, lo que provoca que el usuario no sepa con claridad en qué va a hacer clic. Para solucionarlo, hemos hecho posible mostrar la zona activa cuando los compradores pasan el ratón por encima:
Al activar esta función, está dando a los compradores información más precisa sobre lo que van a pulsar. Y en el caso de A.S. Watson, esto mejoró su CTR en 96%.
Aunque no podemos garantizar esta mejora para todo el mundo, te recomendamos encarecidamente que actives y pruebes esta función por ti mismo.
Cómo hacer visibles las zonas activas al pasar el ratón por encima
Las zonas activas visibles al pasar el ratón se activan automáticamente en los nuevos grupos que crees. Para los grupos existentes, tendrá que activarlo en Personalización del visor -> Puntos de acceso -> Zona activa visible al pasar el ratón por encima.
¿Qué hay que tener en cuenta al activar el estado hover del hotspot?
- Al activar esta función, hará visibles las zonas activas al pasar el ratón por todos los catálogos de su grupo. Esto incluye los catálogos que están actualmente en línea. Sería conveniente revisar esos catálogos para asegurarse de que las zonas activas están correctamente colocadas y se ven bien.
- Aunque el estado hover ayuda a revelar el área de clic de un hotspot, no es una excusa para desactivar los iconos de hotspot. Los iconos de zonas activas siguen cumpliendo una función única, ya que indican dónde se encuentran.
- Los estados Hover no funcionan en smartphones y tablets. Otra razón para mantener activados los iconos de zona activa.
Consejo extra:
- Para obtener el mejor resultado del estado hover del hotspot, sus hotspots deben estar colocados correctamente. Hemos escrito una guía sobre cómo etiquetar productos con zonas activas para ayudarte a mejorar la ubicación de tu punto de acceso.
2. Prueba A/B A.S. Watson
Cuando hacemos cambios en Publitas, queremos asegurarnos de que aportamos valor a ti y a tus clientes. Así que, para verificar el valor de tener zonas activas visibles al pasar el ratón por encima, realizamos dos pruebas. La primera fue una prueba A/B en un anuncio semanal que se publicó durante 7 días:
| Grupo de prueba | % aumentó el CTR |
|---|---|
| A - Grupo de control | – |
| B - Mejora del estado hover de las zonas activas | 99% |
Con la primera prueba conseguimos un aumento del CTR de 99%, mucho más de lo que esperábamos. Como estos resultados eran muy prometedores, decidimos hacer otra prueba. La segunda prueba duró 21 días:
| Grupo de prueba | % aumentó el CTR |
|---|---|
| A - Grupo de control | – |
| B - Mejora del estado hover de las zonas activas | 96% |
De nuevo, la prueba obtuvo resultados mucho mejores de lo que esperábamos, lo que confirma la validez de los resultados de la primera prueba. También probamos algunos modelos de interacción diferentes, como hacer parpadear brevemente las zonas activas justo después de que se cargara una página. En ninguno de los casos se produjo un aumento notable del CTR en comparación con las zonas activas visibles al pasar el ratón por encima.
3. ¿Cómo se ha conseguido una mejora tan significativa con los hover states?
Sin una buena dosis de lectura mental, es bastante difícil precisar los detalles. Sin embargo, un rápido vistazo a Don Norman's heurística de usabilidad nos da algunas pistas: un recordatorio amistoso para no olvidar nunca los fundamentos de la UX y la usabilidad.
Nuestro especialista en UX Oliver McGough ha extraído los 4 puntos que indican por qué los hover states son tan esenciales:
1. Visibilidad del estado del sistema
"El sistema debe mantener siempre informados a los usuarios de lo que ocurre, mediante una respuesta adecuada en un plazo razonable".
Antes de la introducción de los estados hover, dejábamos en manos del usuario la elección de las zonas clicables. La única indicación era un pequeño icono de zona activa y un tooltip al pasar el ratón por encima.
No queríamos cubrir los hermosos catálogos de nuestros clientes con hotspots clicables, temerosos de que invadir su diseño les molestara a ellos y a sus lectores.
Sin pruebas claras de lo que se puede hacer clic, ¿por qué lo harían los compradores?
2. Prevención de errores
"Incluso mejor que un buen mensaje de error es un diseño cuidadoso que evite que se produzca el problema. Elimine las condiciones propensas a errores o compruébelas y presente a los usuarios una opción de confirmación antes de que se comprometan a realizar la acción."
Los estados Hover son una forma asombrosa de confirmar una acción antes de que el usuario se comprometa a realizarla. Al pasar el ratón por encima de una zona activa, se informa al usuario de la zona de clic y de que ocurrirá algo cuando haga clic.
Ahora los usuarios pueden distinguir qué clics darán lugar a qué acciones y pueden decidir hacer clic o no. Antes, nuestros usuarios tenían que hacer clic a ciegas, con la posibilidad de hacer clic en algún sitio que no querían.
3. Reconocimiento más que recuerdo
"Minimice la carga de memoria del usuario haciendo visibles los objetos, acciones y opciones. El usuario no debe tener que recordar información de una parte del diálogo a otra. Las instrucciones de uso del sistema deben ser visibles o fácilmente recuperables siempre que sea apropiado."
Al igual que en la Prevención de Errores, los estados hover actúan como un indicador visible de lo que va a ocurrir. En el diseño de UX, queremos dejar lo menos posible abierto a la interpretación.
Queremos acciones eficientes y sutiles que no entorpezcan la experiencia general. La eficiencia mantiene la carga mental del usuario pensando "podría imaginarme comprando esto" en lugar de "¿qué hago ahora?".
La usabilidad consiste en eliminar la carga mental que supone orientarse en la experiencia. Libera más capacidad para disfrutar de la experiencia. Los estados Hover hacen que hacer clic y encontrar el camino sea mucho más instintivo.
4. Diseño estético y minimalista
"Los diálogos no deben contener información irrelevante o que rara vez se necesite. Cada unidad extra de información en un diálogo compite con las unidades relevantes de información y disminuye su visibilidad relativa."
Por último, los estados hover son un excelente ejemplo de diseño minimalista. Transmitimos toda la información que necesitamos con un pequeño ajuste de opacidad. Las imágenes dicen más que mil palabras, pero nuestro sutil estado hover dice al menos dos".PULSE AQUÍ".
