Aprende / Guías / Diseño UX
Cómo aprovechar los insights sobre los usuarios para mejorar el diseño móvil de la UX
¿Y si tu coche pudiera girar correctamente a la derecha pero no a la izquierda? Conducir sería muy frustrante, ¿no crees? Pues justo así es como se sentirían tus clientes si la versión para ordenadores de tu sitio web fuera fantástica, pero su diseño móvil fuera deficiente.
Dado que el diseño UX para móvil forma parte de la experiencia de cliente, no puede quedar relegado a un segundo plano.
Los visitantes de sitios web móviles juzgan todo aquello con lo que interactúan, ya sea de forma consciente o inconsciente. Un sitio por el que sea difícil navegar y en el que se abran molestas ventanas emergentes ahuyentará a la gente, mientras que una página intuitiva y atractiva atraerá a los clientes y generará afinidad con la marca.
En esta guía encontrarás:
Resumen
Crear un sitio web que sea fácil y agradable de usar en un dispositivo móvil es una parte fundamental de la experiencia de cliente, y repercute en la interacción, la fidelidad y las conversiones.
Para mejorar el diseño móvil la UX de tu sitio, puedes:
Averiguar cómo y por qué llegan los visitantes a tu sitio web, desde las fuentes de referencia hasta los objetivos de los usuarios.
Solucionar todo aquello que esté obstaculizando la interacción y la conversión, como botones rotos o una navegación confusa.
Investigar qué ganchos cierran ventas en función de tus customer persona.
Comparar cómo utilizan tu sitio web los usuarios de móviles y los de ordenadores para adaptar la experiencia.
Priorizar el diseño accesible para que todos los visitantes puedan utilizar tu sitio web móvil sin problemas.
Medir la analítica de tu sitio web e iterar tus diseños de UX.
6 formas de mejorar el diseño móvil de la UX
El diseño móvil de la experiencia de usuario (UX) es el proceso de crear un sitio web que sea fácil y agradable de usar en un dispositivo móvil. Es una subárea importante del diseño UX porque el 57 % del tiempo que la gente pasa navegando por Internet lo hace desde un dispositivo móvil.
Aunque se aplican los mismos principios básicos del diseño UX tanto los sitios para móviles como para ordenadores, los visitantes pueden interactuar de manera diferente cuando utilizan un dispositivo u otro.
Por eso, es necesario hacer pruebas y ajustes por separado, pero merece la pena. Estas son las razones:
Ahora que ya sabes por qué importa el diseño UX para móvil, vamos a sumergirnos en las técnicas que puedes aplicar para optimizarlo.
1. Averiguar cómo y por qué llegan los visitantes a tu sitio web
El motivo que lleva a los visitantes a tu sitio web y la ruta que siguen hasta llegar a él puede variar en función del dispositivo que utilizan. Por lo tanto, debes diseñar tu sitio móvil poniendo la información más importante en un lugar de máxima visibilidad.
Para averiguar el motivo y la vía por la que llegan los visitantes a tu sitio web, puedes:
Identificar cuáles son tus páginas de destino más populares para dar prioridad a hacer mejoras de UX en ellas.
Ver grabaciones de sesiones (reproducciones de las interacciones de los visitantes en tiempo real) para saber cómo se mueven las usuarias y los usuarios por el sitio y qué contenidos o páginas consultan.
Hacer una prueba con una página de "empieza aquí" o con botones destacados para las categorías de páginas y revisar qué es lo más popular entre los visitantes de móviles.
💡 Consejo avanzado: Para conocer mejor a tus clientes, utiliza encuestas adaptadas a la UX móvil.
Surveys te permite preguntar directamente a los clientes para encontrar formas de mejorar tu diseño UX. Pero, si no tienes cuidado, hacer una encuesta móvil on-page podría tener el efecto contrario y sabotear esa experiencia que deseas mejorar.
Para hacer encuestas respetando los principios del diseño de UX para móvil, puedes:
Utilizar encuestas insertadas en la página móvil, en lugar de una ventana emergente que cubra toda la pantalla.
Enviar una encuesta a los clientes por correo electrónico para preguntarles por su experiencia con tu sitio web para móviles.
Si utilizas una encuesta pop-up, prueba el diseño en todos los dispositivos para asegurarte de que el botón "X" es visible y fácil de seleccionar.
2. Solucionar todo aquello que esté obstaculizando la interacción y la conversión
Es posible que en tu sitio web para móviles haya obstáculos que estén haciendo que los visitantes se vayan; por ejemplo, puede que un botón no funcione o que falte información. Estos factores pueden estar afectando negativamente a la sesión de los visitantes y hacer que los clientes potenciales no vuelvan.
Los bugs, los fallos de diseño y la frustración a veces son inevitables, así que lo mejor es centrarse en los obstáculos que necesitan atención. Por ejemplo, puedes:
Filtrar las grabaciones de sesiones por clics con rabia y retrocesos rápidos, ya que cuando las personas usuarias hacen clic repetidamente en un elemento durante un periodo de tiempo corto o retroceden rápidamente a una página anterior es señal de frustración o confusión.
Utilizar un widget de feedback on-page para encontrar páginas con las que los visitantes no están satisfechos.
Revisar mapas de calor en los que visualizar por dónde se desplazan, hacen clic y se mueven la mayoría de los visitantes para identificar elementos críticos que ignoran o diseños innecesarios que puedes eliminar.
🏃 ¿Tienes prisa? Prueba estas soluciones rápidas a problemas comunes de UX móvil.
Los consejos anteriores te ayudan a detectar obstáculos específicos con los que se encuentra tu audiencia o que están presentes en tu sitio móvil, pero hay otros problemas comunes de sitios web móviles que debes resolver para mejorar tu UX.
Utiliza la prueba de optimización para móviles de Google para encontrar elementos de diseño no adaptables.
Optimiza los archivos de imagen con Smoosh.
Crea objetivos táctiles de al menos 44 píxeles para botones y enlaces, y establece el relleno de los botones y enlaces en al menos 8 píxeles por cada lado.
Añade parámetros a las ventanas emergentes, como un número mínimo de páginas visitadas, para asegurarte de que solo se muestran a personas interesadas.
Sustituye el contenido de reproducción automática por una imagen estática para evitar agotar la batería de los dispositivos móviles y consumir demasiados datos.
3. Investigar qué ganchos cierran ventas
Los ganchos son los elementos que convencen a las usuarias y los usuarios para que completen una acción o una compra. Por lo tanto, debes saber qué interesa a las personas usuarias de móviles para mejorar el diseño y aumentar las conversiones.
Para encontrar estos ganchos, puedes:
Identificar a los clientes que compraron a través del móvil y enviarles por correo electrónico un enlace a una encuesta poscompra para saber qué les gustó de la experiencia y qué les echaba para atrás.
Hacer pruebas A/B para encontrar variantes de diseño de UX que aumenten las ventas y, a continuación, revisar las grabaciones de esas sesiones para comprender por qué el diseño funcionó.
Entrevistar a los clientes sobre sus objetivos, retos y preferencias y, a continuación, utilizar las mismas palabras que ellos en tus diseños.
💡 Consejo avanzado: Infórmate sobre tus clientes para averiguar qué diseño UX para móvil puede funcionar mejor.
Conocer aspectos psicográficos sobre tus clientes (información sobre quiénes son realmente tus clientes que va más allá de datos demográficos clásicos, como la edad) te ayudará a crear un diseño móvil de la UX con el que les encantará interactuar.
Por ejemplo, la marca y el diseño de un sitio web para móviles de una empresa de equipamiento para actividades al aire libre serían muy diferentes de los de un edificio de apartamentos de lujo en la ciudad, porque los objetivos y las prioridades de cada grupo de clientes varían.
A continuación, tienes algunos ejemplos de cómo ciertos datos sobre los clientes influyen en el diseño UX:
Personalidad: Las personas extrovertidas pueden preferir fotos de grupo, mientras que las introvertidas podrían querer imágenes de momentos a solas.
Intereses: Las personas interesadas en la cultura pop pueden conectar con una empresa de bienes de consumo que utilice referencias cinematográficas en su diseño.
Creencias: Mostrar logotipos de organizaciones a las que dona una empresa puede atraer a una audiencia con conciencia social.
Valores: Los compradores con poco presupuesto podrían inclinarse por imágenes de productos con etiquetas que indiquen el porcentaje de ahorro por pedidos al por mayor o suscripciones.
4. Compara las expectativas con la realidad
Por mucho que tomes decisiones de UX centradas en el cliente en cierto modo siguen siendo meras conjeturas. Necesitas observar cómo interactúan usuarias y usuarios reales con tu flujo y comparar tus expectativas con la realidad.
Utiliza herramientas de experiencia de usuario para obtener una visión en tiempo real de cómo interactúan las usuarias y los usuarios con los sitios web para móviles.
Filtra los embudos para ver las sesiones de móvil y tableta y visualizar dónde abandonan las personas usuarias. Después, compáralas con las sesiones de escritorio.
Revisa grabaciones de sesiones de móvil y tableta para averiguar cómo navegan los visitantes por tu sitio web desde cada tipo de dispositivo.
Utiliza mapas de calor para descubrir con qué elementos de navegación interactúan las usuarias y los usuarios de móviles y, en función de esta información, establece prioridades de diseño.
Cómo optimizó re:member su sitio web para móviles
Re:member, una de las principales empresas del mercado del crédito de Escandinavia, utilizó las herramientas de analítica del comportamiento y de UX de Hotjar para aumentar las conversiones en un 43 %.. Este es el proceso de cinco pasos que siguieron para detectar y solucionar un problema de la UX móvil que puedes replicar:
Observar grabaciones: re:member se dio cuenta de que las usuarias y los usuarios del sitio web para móviles pasaban el ratón por encima de la sección de beneficios de su página de solicitud y a menudo se desplazaban hacia arriba y hacia abajo por el formulario de registro, pero no lo rellenaban.
Revisar mapas de clics: Los visitantes intentaban hacer clic en la sección de beneficios y esperaban que las viñetas se pudiesen expandir.
Comparar el comportamiento de los usuarios entre las distintas fuentes de tráfico: El equipo de re:member fue un poco más allá con el análisis y comparó las interacciones de la UX móvil entre las distintas fuentes de tráfico.
Formular una hipótesis: Se dieron cuenta de que las usuarias y los usuarios (especialmente los procedentes de enlaces de afiliados) querían más información sobre los beneficios de la aplicación antes de tomar una decisión.
Probar una solución: El equipo movió la sección de beneficios a la parte superior de la página para móviles y creó una sección expandible en la versión para ordenadores.
re:member descubrió que los datos adicionales sobre la tarjeta animaban a los visitantes a solicitarla.
5. Priorizar el diseño accesible
Te interesa que todo el mundo disfrute de tu sitio web, por lo que debes tener en cuenta la accesibilidad del diseño UX. Las discapacidades visuales, mentales o físicas permanentes e incluso las lesiones temporales, como una mano rota, afectan a la forma en que los clientes utilizan su sitio web.
A continuación, tienes algunos consejos de accesibilidad que puedes aplicar a tu diseño:
Añade etiquetas en el código de los contenidos dinámicos para que funcionen con los lectores de pantalla.
Revisa los mapas de calor para ver qué encabezados de navegación utilizan con frecuencia los visitantes y cuáles puedes eliminar para simplificar el diseño.
Utiliza WAVE para comprobar la accesibilidad de las fuentes.
Comprueba el contraste de color de tu sitio web.
No dependas únicamente de los colores para transmitir un mensaje; por ejemplo, utilizar el verde para comunicar algo positivo y el rojo para algo negativo. Añade también símbolos o texto.
💡Consejo avanzado: Habla con los clientes sobre su experiencia móvil.
Habla con tus clientes, especialmente con aquellos que tengan alguna discapacidad que afecte a la forma en que utilizan tu sitio web, para obtener un nuevo punto de vista sobre la accesibilidad de tu UX.
Envía por correo electrónico a tus clientes una breve encuesta para reclutar participantes que quieran participar en pruebas de accesibilidad. Después, hazles una entrevista para conocer sus experiencias con el sitio móvil.
Personaliza las preguntas de tu encuesta de reclutamiento para encontrar participantes de un segmento concreto.
6. Mide y repite
Una vez que hayas aplicado las estrategias anteriores, debes medir su rendimiento. Analiza las métricas del sitio web móvil para identificar posibles problemas o páginas que funcionan bien. Con esta información podrás averiguar en qué páginas deberías hacer cambios o qué diseños funcionan bien y deberías repetir.
Esto es lo que debes medir para hacer un seguimiento del diseño de tu UX para móvil:
Porcentaje de abandono del carrito y porcentaje de abandono del proceso de pago: Descubre qué hace que los clientes abandonen una venta en la UX móvil.
Tasa de conversión: Compara tasas de conversión entre dispositivos y a lo largo del tiempo para detectar problemas de UX.
Net Promoter Score® (NPS): Averigua la probabilidad de que los clientes de móvil te recomienden a sus amigos.
Satisfacción del cliente (CSAT): Mide la satisfacción general del cliente para evaluar cómo se sienten con tu diseño UX.
💡 Consejo avanzado: Obtén una vista global de las métricas de UX con Hotjar Trends.
Revisar analíticas de usuario detalladas, como una grabación única de una visita móvil, te ayuda a limar detalles de tu diseño UX para móvil, pero también necesitas evaluar el rendimiento desde un punto de vista más general.
Hotjar Trends te permite visualizar los patrones de comportamiento de los usuarios para estar al tanto de la experiencia global del cliente. Por ejemplo, puedes comprobar si aumentan los retrocesos rápidos en tu sitio móvil para encontrar páginas con información obsoleta o elementos de diseño rotos.
5 increíbles ejemplos de diseño UX para móvil de los que aprender
El mejor diseño de UX para móvil es el que le funciona a tu empresa y a tu audiencia, lo que lleva algún tiempo perfeccionar. Aun así, ver ejemplos de buenos diseños UX para móvil puede ser un buen punto de partida y te puede servir para aprender sin un largo proceso de ensayo y error.
1. Duolingo aprovecha para investigar al usuario
El sitio móvil de Duolingo pregunta a los nuevos usuarios cómo conocieron el programa y por qué quieren aprender.
Por qué funciona:
La página de Duolingo averigua qué llevó a las usuarias y los usuarios a su sitio web móvil preguntándoles cómo conocieron la empresa.
Todas las opciones de respuesta aparecen en la página sin necesidad de desplazarse.
Se incluyen iconos reconocibles junto al texto de la respuesta.
Solo hay una pregunta por página para evitar abrumar a los visitantes.
2. Hotel Tonight facilita el acceso a la información desde cualquier lugar
Hotel Tonight incluye información útil sobre el hotel en la parte superior de la página móvil, como la puntuación de los huéspedes y la ubicación.
Por qué funciona:
El mapa del hotel está colocado en la parte superior de la página del sitio web móvil, en lugar de más abajo como en la versión para ordenadores, lo que es perfecto para que los clientes puedan consultar esta información desde cualquier lugar.
Los visitantes pueden formarse una opinión más rápido gracias al texto de "Why We Like It" (Por qué nos gusta) de la parte superior de la página.
El botón "Book now" (Reservar ahora) con el precio por noche está siempre visible para que los visitantes no tengan que desplazarse hacia arriba o hacia abajo para encontrarlo.
3. Hotjar pide feedback de forma no intrusiva
El widget de feedback de Hotjar no aparece automáticamente ni cubre toda la página del sitio web para móviles.
Por qué funciona:
El widget de feedback de Hotjar solo se abre cuando un visitante hace clic en él, sin pop-ups intrusivos.
El botón "X" de la primera ventana es visible y no bloquea la pantalla.
El cuadro de texto permite a los visitantes añadir más comentarios.
4. InVision facilita la lectura del contenido
El blog de InVision permite que el contenido ocupe el máximo espacio posible en el sitio móvil, eliminando cualquier barra lateral que pueda distraer.
Por qué funciona:
El sitio web de InVision se centra solo en el contenido. Para ello, elimina las distracciones y utiliza una fuente lo más grande posible.
Hay una sutil barra de progreso en la parte superior de la página para que los lectores sepan en qué punto del contenido se encuentran.
Hay espacio en blanco entre párrafos y entre líneas para facilitar la lectura.
5. Spotahome incluye encantadores detalles
Spotahome utiliza una sutil ilustración en el lateral del sitio móvil que abre un cuestionario para que los nuevos usuarios encuentren vivienda.
Por qué funciona:
El gato que aparece en el lateral del sitio móvil de Spotahome hace las delicias de los usuarios. Al principio, no te das cuenta, pero es demasiado mono como para no fijarse en él.
El breve cuestionario está pensado como una especie de aventura que se le va presentando al usuario con el objetivo de convertirlo en un lead de la empresa.
La barra de progreso permite a los visitantes saber en qué punto del proceso se encuentran.
Un buen diseño móvil de la UX empieza por la empatía
El comportamiento del usuario y las interacciones es lo que hace que tu sitio web pase de ser un montón de líneas de código a una experiencia. Por tanto, es fundamental que tengas en cuenta a los clientes en tus iniciativas de diseño de UX móvil. Aprender de los clientes te ayuda a tomar decisiones de diseño adecuadas y más certeras para que puedas crear un sitio móvil agradable para los visitantes.
Puede que no siempre sepas qué preguntar ni cuándo, pero mostrar siempre empatía e ir aprendiendo durante el proceso te llevará a tus objetivos.
Prueba tu diseño UX para móvil con Hotjar
Las herramientas de Hotjar te permiten ver exactamente cómo los visitantes móviles interactúan con tu sitio para que puedas probar e iterar tu diseño.
