7 errores de diseño de UX de los que aprendimos en 2023 y cómo los solucionamos con Hotjar

7 errores de UX que cometimos en 2023 y cómo Hotjar nos ayudó a solucionarlos

Queremos compartir contigo los errores de UX que hemos cometido para que tú también puedas aprender de ellos. A continuación te explicamos detalladamente 7 de nuestras mayores meteduras de pata hasta la fecha.

1. Rediseñamos un botón, haciéndolo invisible para los usuarios

🤦‍¿Qué hicimos?

Hace poco, lanzamos una nueva función: Hotjar AI. Es un generador de preguntas para encuestas basado en IA. Cuando creas una encuesta, solo tienes que decirle a Hotjar AI cuáles son tus objetivos de investigación para que te escriba las preguntas correspondientes. Es una solución muy ingeniosa, ¿no crees?

Bueno, pues parece que al iterar la función nos pasamos un poco con el ingenio...

Con la intención de optimizar la interfaz de usuario en inglés, cambiamos el texto en singular "Add question" (Añadir pregunta) por la versión en plural "Add questions" (Añadir preguntas).. También sustituimos el signo "+" que aparecía junto al texto por el icono de estrellitas que utilizamos para representar la IA.

Obviamente, nosotros pensábamos que las usuarias y los usuarios verían el icono y comprenderían qué significaba. Pero nadie lo hizo. De hecho, casi nadie hizo clic en el botón después de que lo cambiáramos.

🕵️‍ ¿Cómo descubrimos este error de UX?

Herramientas y funciones que utilizamos:

• Encuestas

• Entrevistas

• Eventos en Hotjar

Cuando lanzamos el nuevo botón, queríamos obtener feedback de las personas usuarias, como siempre que hacemos algún cambio en Hotjar, por muy importante o insignificante que sea.

Para ello, utilizamos eventos en Hotjar para configurar una encuesta popover que se lanzaba cada vez que alguien hacía clic en el botón "Add questions" (Añadir preguntas).

Normalmente, recibimos cientos de respuestas a las encuestas en pocos días. Pero esta vez, después de casi dos semanas, recibimos un total de...

dos.

Inmediatamente nos dimos cuenta de que teníamos que hablar con los usuarios, así que programamos entrevistas con Hotjar Engage.

En total, entrevistamos a seis personas: tres que habían utilizado la herramienta y tres que no. Gracias a estas entrevistas, descubrimos que no eran capaces de encontrar el botón "Add questions" (Añadir preguntas), a menos que les ayudáramos.

¿Qué hicimos? Volver a diseñar el botón:

📝 ¿Qué aprendimos?

El mayor aprendizaje que nos hemos llevado es que no debemos dar por sentadas nuestras suposiciones. En este caso, asumimos que las usuarias y los usuarios comprenderían exactamente qué significa nuestro botón. Por lo tanto, te recomendamos que, siempre que sea posible, pruebes los prototipos antes de lanzarlos para validar las suposiciones y averiguar si tus diseños funcionan.

La segunda lección que aprendimos fue que debemos hacer un seguimiento de las métricas, porque nos avisan cuando algo no funciona. Nos dimos cuenta de este problema porque estábamos monitorizando el número de personas que hacían clic en el botón y, por tanto, activaban las encuestas. Al final, recopilar feedback proactivamente desde el principio nos permitió detectar y resolver el problema antes de que afectara seriamente a la interacción.

Además, también aprendimos una última lección:

2. Complicamos demasiado una interfaz

🤦‍¿Qué hicimos?

Cuando diseñamos la interfaz de Surveys, queríamos ayudar a los usuarios a evitar que cometieran errores, como publicar accidentalmente la encuesta en todas sus páginas. Para ello, añadimos algunos campos obligatorios que debían rellenar antes de lanzar una encuesta.

¿Qué pasó? Que los campos adicionales complicaban demasiado el proceso de configuración de la encuesta. Las usuarias y los usuarios se confundían, cambiaban de pantalla y guardaban las encuestas sin terminarlas.

🕵️‍¿Cómo descubrimos este error de UX?

Herramientas que utilizamos:

• Grabaciones

• Entrevistas

• Mixpanel

Por suerte, analizamos periódicamente nuestras páginas para detectar problemas como este. Al revisar grabaciones de sesiones con Hotjar Recordings y hacer test de usabilidad con Hotjar Engage, observamos que las personas usuarias cambiaban constantemente de una pantalla a otra de la interfaz.

También analizamos los datos de Mixpanel para averiguar cuántas personas generaban una conversión configurando la encuesta desde cero. Comparamos este dato con la tasa de conversión de nuestras plantillas de encuesta, en las que los datos de configuración aparecen automáticamente rellenados para que las usuarias y los usuarios tengan que completar menos campos.

Los datos revelaron que la tasa de conversión de las plantillas era mucho mejor. Esto fue una clara señal de que nuestro proceso para crear una encuesta era demasiado complejo y que debían aparecer rellenados automáticamente los campos de todas las encuestas.

📝 ¿Qué aprendimos?

Una de las reglas para diseñar una buena UX es que sea lo más sencilla posible. Por lo tanto, si vas a añadir más pasos a un proceso, asegúrate de que sea absolutamente necesario. Además, recuerda dar prioridad a la recopilación de insights.

3. Invitamos a los usuarios a escribir, pero no les dejamos espacio suficiente

🤦‍♀️¿Qué hicimos?

Si has probado Hotjar Surveys, probablemente te habrás dado cuenta de que nuestro generador de encuestas basado en IA incluye un campo para que las usuarias y los usuarios escriban. La idea era que describieran brevemente el objetivo de su investigación y que la herramienta les generara preguntas para la encuesta en función de su objetivo.

Funciona a las mil maravillas, pero enseguida nos dimos cuenta de que la gente quería escribir descripciones mucho más largas de lo que habíamos previsto. El campo del formulario era demasiado pequeño y, tras introducir unas pocas palabras, la gente ya no podían ver lo que habían escrito.

Este inconveniente hacía que la mayoría de las usuarias y los usuarios tuvieran dificultades para usar la herramienta, lo que no era precisamente lo ideal para una nueva función que acabábamos de lanzar.

🕵️‍¿Cómo descubrimos este error de UX?

Herramientas y funciones que utilizamos:

• Feedback

• Grabaciones

• Entrevistas

• Integración con Mixpanel

• Integración con Slack

Los datos de Mixpanel revelaron que las usuarias y los usuarios escribían objetivos más largos de lo que habíamos previsto.

Para investigar más a fondo, vimos las grabaciones de sesiones de Hotjar y observamos que el campo del formulario era demasiado pequeño, lo que les impedía ver su propio texto. A continuación, hicimos entrevistas con Engage para saber por qué querían escribir objetivos más largos y qué esperaban conseguir con ello.

Aunque este error fue un contratiempo bastante importante, acabamos obteniendo insights valiosos sobre las necesidades y los objetivos de las personas usuarias.

📝 ¿Qué aprendimos?

Al igual que con uno de los errores que explicamos anteriormente, en este caso nos quedó claro que:

Al mismo tiempo, también aprendimos el inmenso valor de profundizar un poco más. Gracias a las entrevistas, descubrimos qué querían realmente las usuarias y los usuarios de la herramienta, lo que nos ayudó a que pudiéramos ofrecérselo.

4. Ocultamos accidentalmente a los usuarios los resultados de las encuestas

🤦‍♀️ ¿Qué hicimos?

Hace poco hicimos un experimento para fusionar dos elementos de nuestra herramienta Surveys:las respuestas y los resultados.

Las respuestas son las contestaciones individuales que dan las usuarias y los usuarios a las preguntas, mientras que los resultados son puntuaciones de datos agregados, como las puntuaciones NPS® totales que generan los usuarios.

En el diseño original del dashboard de la encuesta, las usuarias y los usuarios podían encontrar fácilmente sus resultados y respuestas. Sin embargo, quisimos probar un nuevo diseño porque pensamos que mejoraría el recorrido del usuario. En esta variante, las personas usuarias tenían que utilizar un menú selector de preguntas para ver sus resultados.

Con el experimento averiguamos que directamente no veían el selector de preguntas y que, por lo tanto, les estábamos ocultando los resultados de la encuesta.

🕵️‍♂️ ¿Cómo descubrimos este error de UX?

Herramientas y funciones que utilizamos:

• Feedback

• Integración con Slack

• Grabaciones

Tras el lanzamiento de la nueva variante, la gente empezó a contactarnos a través de nuestro widget de feedback (un botoncito rojo que suele aparecer a la derecha de la pantalla). Algunas personas estaban molestas porque no podían encontrar los datos cuantitativos que habían estado tratando de recopilar con la herramienta.

Para analizar el problema, vimos grabaciones de usuarias y usuarios navegando por la herramienta Surveys. Estas sesiones demostraron la confusión y la frustración que les provocaba no encontrar los datos que antes podían consultar fácilmente.

Al final, corregimos nuestro error introduciendo un tooltip en Appcues que mostraba los cambios. Funcionó y dejamos de recibir feedback negativo.

📝 ¿Qué aprendimos?

Nos dimos cuenta de que es arriesgado hacer cambios en diseños o estructuras con los que están familiarizados los usuarios. La mayoría de los sitios web y aplicaciones están estructurados de una manera determinada porque las usuarias y los usuarios conocen bien ciertos "arquetipos" de diseño y los utilizan intuitivamente.

Cada vez que te plantees innovar los diseños estándar, asegúrate de tener una buena razón para hacerlo y de indicar los cambios que hagas.

5. Generamos tres veces más preguntas de las necesarias

🤦‍♀️ ¿Qué hicimos?

Con la emoción del lanzamiento de Hotjar AI, cuando diseñamos la interfaz decidimos añadir el botón "Add questions" (Añadir preguntas) para que, al hacer clic, se generasen tres preguntas de encuesta a la vez. Lo que pensamos fue: cuantas más, mejor.

Pero, al final, resultó que eran demasiadas, porque la mayoría de los usuarios preferían encuestas cortas y sencillas. También nos dimos cuenta de que la herramienta a veces repetía una pregunta, algo que precisamente nadie quería.

Por último, cuando las usuarias y los usuarios hacían clic en el botón "Add questions" (Añadir preguntas), no siempre les quedaba claro qué preguntas nuevas había generado la herramienta.

🕵️‍♂️ ¿Cómo descubrimos este error de UX?

Herramienta que utilizamos:

• Entrevistas

Al hacer pruebas de usabilidad con Hotjar Engage, observamos que a la gente le costaba identificar las preguntas nuevas que se añadían a sus encuestas.

Es más, nuestras métricas revelaron que la tasa de uso de este botón era inferior al 1 %. En otras palabras, lo odiaban.

Rápidamente priorizamos la actualización de la función para que solo añadiera una pregunta cada vez.

📝 ¿Qué aprendimos?

Nos quedó claro que debemos analizar los datos antes de lanzar nuevas funciones. Lo que hizo que este fallo fuera un poco más embarazoso es que ya sabíamos que nuestros usuarios prefieren encuestas cortas...

¿Cuál es la moraleja? No hay nada más importante que tomar decisiones orientadas al usuario. No te dejes nublar por la ilusión de lanzar una nueva herramienta o función y céntrate en todo momento en lo que tu audiencia realmente necesita y desea, no en lo que tú quieres darle. 😬

6. Lanzamos un popover encima de otro popover

🤦‍♀️ ¿Qué hicimos?

El proceso de onboarding es vital para cualquier empresa de software, porque si las usuarias y los usuarios no pueden aprender rápidamente a utilizar tus herramientas, no los retendrás. Con esto en mente, lanzamos una guía de inicio que aparece cuando los usuarios acceden a Hotjar por primera vez para presentarles las herramientas y funciones clave.

Inicialmente diseñamos la guía como un popover que aparecería en la parte superior de la interfaz de usuario de Hotjar para captar inmediatamente la atención de la gente. Sin embargo, no nos dimos cuenta de que también habíamos configurado una encuesta popover para que apareciera en el mismo momento y lugar.

El problema es que se mostraban dos popover al mismo tiempo, uno sobre el otro, lo que no causaba una buena primera impresión. Por supuesto, esto iba totalmente en contra de los principios de UX, que hacen hincapié en simplificar las tareas y decisiones de los usuarios, no en abrumarlos con distracciones.

🕵️‍♂️ ¿Cómo descubrimos este error de UX?

Herramientas que utilizamos:

• Feedback

• Grabaciones

Afortunadamente, los usuarios se pusieron en contacto con nosotros a través de Hotjar Feedback para advertirnos del problema. Algunos utilizaron la función de captura de pantalla para enviarnos imágenes de los popover dobles, de modo que pudiéramos ver claramente el problema.

Para investigar más a fondo, vimos grabaciones de recorridos de usuarios para ver sus reacciones. Estas sesiones nos mostraron que las usuarias y los usuarios cerraban una (o ambas) de las ventanas antes de continuar su recorrido.

Las métricas clave también revelaron que los popover dobles reducían tanto las respuestas a nuestra encuesta como el número de usuarios que interactuaban con la guía. Sabíamos que una menor interacción con la guía acabaría provocando que más personas tuvieran dificultades para empezar a utilizar Hotjar.

Como empresa que tiene como uno de sus valores principales "Poner a nuestros clientes en el centro de todo", eso era justo lo que no estábamos consiguiendo.

📝 ¿Qué aprendimos?

Es fundamental evitar los silos a toda costa y fomentar la colaboración entre los equipos. Incluso en Hotjar, donde la colaboración interfuncional forma parte de nuestra cultura, ocurren errores como este.

Es fácil pisarse unos a otros si los equipos (o subequipos) de UX y marketing no se comunican con los demás.

Cuando resolvimos este problema, aumentaron un 10 % los usuarios que se pasaban al plan de pago. También obtuvimos más feedback a través de la encuesta popover que habíamos modificado y descubrimos dónde necesitaban más ayuda. Por lo tanto, la segunda lección que aprendimos es que resolver problemas como este puede marcar una gran diferencia, tanto en la experiencia de usuario como en los resultados empresariales.

7. Perjudicamos la visibilidad de un elemento de configuración fundamental durante el proceso de onboarding

Configurar Hotjar no es difícil, pero hay que completar algunas tareas que la gente sin un perfil técnico no suele hacer. Por ejemplo, es necesario copiar el código de seguimiento de Hotjar y pegarlo en la página de la que se desea hacer un seguimiento, lo que puede parecer un poco complicado.

Optimizamos el flujo de configuración que va guiando a los usuarios por el proceso para que les resultara más fácil y llevadero. A lo largo de varios sprints de diseño, introdujimos mejoras a gran escala y micromejoras en el flujo de configuración, pero pasamos por alto un problema crucial.

Aunque presentamos el código de seguimiento en el flujo de registro junto con un botón para copiarlo, no diseñamos una forma sencilla para que las usuarias y los usuarios pudieran volver a la página del código más tarde. Eso hizo que los nuevos usuarios tardasen más en configurar Hotjar y necesitasen más ayuda de nuestro equipo de asistencia.

🕵️‍♂️ ¿Cómo descubrimos este error de UX?

Herramientas que utilizamos:

• Feedback

• Entrevistas

• Grabaciones

Nos enteramos de este error gracias a entrevistas con usuarios y respuestas de Feedback. Al ver las grabaciones, vimos que hacían clic en todos lados tratando de encontrar el código de instalación.

También vimos varias solicitudes de asistencia técnica de personas que intentaban encontrar el código de seguimiento.

Para solucionar el problema, añadimos nuevas formas muy visibles para que pudieran encontraran el código de seguimiento fácilmente en su dashboard. Las grabaciones nos mostraron que la gente buscaba con frecuencia el código en la página "Sitios y organizaciones", así que lo añadimos ahí y... ¡solucionado!

📝 ¿Qué aprendimos?

Este error nos recordó una lección fundamental de UX:

Esto es especialmente importante para una tarea como copiar el código de seguimiento, que es absolutamente vital para el recorrido del usuario con nuestro producto.

Además, recuerda que las usuarias y los usuarios no siempre navegarán por tu sitio o producto de la manera que esperas que lo hagan. Piensa y planifica todas las formas posible de completar tareas importantes desde cualquier punto de partida.

Convierte los fracasos de UX en triunfos con los datos adecuados

A pesar de que llevamos mucho tiempo en esto y que nuestro equipo está formado por excelentes profesionales del diseño, seguimos cometiendo errores. Esto demuestra que es complicado diseñar la UX y que no siempre se acierta a la primera.

La buena noticia es que este tipo de errores suelen servir para crear un mejor diseño del producto a largo plazo. A medida que vas aprendiendo más sobre tus usuarios, puedes aprovechar el pensamiento de diseño centrado en el ser humano para impulsar mejoras continuas.

Y, si utilizas un conjunto de aplicaciones como Hotjar, tendrás todas las herramientas que necesitas para averiguar las preferencias, las necesidades y el comportamiento de tus usuarias y usuarios, y así convertir esos fracasos en grandes triunfos.