Cómo diseñar para una excelente experiencia de usuario móvil

Publicado: 2018-08-06

Cómo diseñar para una excelente experiencia de usuario móvil debe estar a la vanguardia de todo lo que hace su empresa en la web. A menos que diseñe pensando principalmente en los dispositivos móviles, su negocio no tendrá el éxito que podría y debería tener. La razón es sencilla: los dispositivos móviles han superado durante mucho tiempo a las computadoras de escritorio como el método número uno para que las personas accedan a Internet. En otras palabras, no diseñe para dispositivos móviles... no logre obtener tantos visitantes del sitio, clientes potenciales y clientes como pueda.

Veamos las estadísticas.

Según Smart Insights, hemos pasado el punto en el que la cantidad de usuarios de dispositivos móviles ha superado la cantidad de usuarios de computadoras de escritorio. Este punto de inflexión ocurrió en 2014. Desde entonces, la cantidad de usuarios de dispositivos móviles en todo el mundo solo ha seguido aumentando agresivamente, mientras que la cantidad de usuarios de computadoras de escritorio ha aumentado con menor rapidez.

El resultado final: más clientes potenciales, visitantes y clientes llegarán a su sitio web en sus teléfonos móviles, no en sus computadoras de escritorio.

Si desea maximizar sus conversiones, primero debe optimizar su sitio para dispositivos móviles. Hoy en día, una gran UX móvil también es un marketing móvil exitoso.

Vamos a ver.

Cómo diseñar para una excelente experiencia de usuario móvil: lo que dicen las estadísticas

Cada vez que desee establecer un caso de uso sólido para justificar el gasto en su negocio, digamos, por ejemplo, para el diseño móvil primero, solo mire las estadísticas sobre cómo y dónde está comprando la gente en estos días. Ve a donde te lleve la evidencia.

La empresa de tecnología global Criteo, que se especializa en marketing comercial, publicó un comunicado de prensa que reveló que las ventas móviles solo en los EE. UU. ahora representan el 52% de todas las transacciones de comercio electrónico. Claramente, si desea vender de manera efectiva y exitosa, necesita una presencia móvil muy eficiente con una gran experiencia de usuario.

Aquí hay otra estadística muy interesante que en realidad revela más de lo que parece, a primera vista.

Según el Mobile Retail Report de Adobe, las conversiones son 2,8 veces más altas en computadoras de escritorio que en dispositivos móviles. Si cree que esto significa que no es importante optimizar para dispositivos móviles, piénselo de nuevo. En realidad, esta es una razón más para comprometerse con una estrategia móvil primero, especialmente porque los dispositivos móviles aún representan más tráfico que las computadoras de escritorio.

La razón por la que las conversiones son más altas en el escritorio probablemente se deba al hecho de que las experiencias móviles no están tan optimizadas como deberían, no porque las personas no prefieran comprar y convertir en dispositivos móviles, donde es más conveniente para ellos en primer lugar. !

Imagine un escenario en el que su sitio móvil está perfectamente optimizado, recibe más tráfico que su sitio de escritorio y ve más conversiones que el escritorio, todo porque implementó una excelente experiencia de usuario móvil.

Está a tu alcance. Esto es lo que debe hacer.

Diseño para pulgares... pero no principalmente para pulgares

La usabilidad móvil debe basarse en todas las diversas formas en que se sabe que las personas interactúan con sus teléfonos inteligentes. Cómo diseñar para una gran UX móvil es tanto de sentido común como basado en evidencia.

Es tentador suponer que, si estoy usando mi teléfono inteligente para navegar y comprar en un sitio móvil, es más conveniente para mí hacerlo simplemente sosteniendo el teléfono en una mano y usando el pulgar de la misma mano para lograr mi usuario. metas. Es igualmente tentador asumir que sería menos conveniente para mí usar ambas manos (teléfono en una mano y usando el dedo índice de la otra mano para lograr mis objetivos de usuario).

Sin embargo, esta sabiduría convencional en realidad es incorrecta porque presupone que las personas solo o principalmente usan una mano para operar sus teléfonos.

La investigación muestra que en realidad hay seis formas distintas en las que las personas sostienen e interactúan con sus teléfonos. Cualquier sitio móvil que no se diseñe para las seis formas fallará y experimentará tasas de conversión más bajas porque la UX se verá afectada.

Las seis formas son:

  • Acunado (una mano sosteniendo el teléfono mientras el pulgar de la otra mano toca)
  • Sostenga y toque (una mano sosteniendo el teléfono mientras el dedo índice de la otra mano toca)
  • Dos manos para la orientación horizontal (piensa en cómo sujetarías un dispositivo portátil de juegos como la Nintendo 2DS XL)
  • Una mano: primer orden (una mano sosteniendo el teléfono mientras el pulgar de la misma mano toca)
  • Una mano: segundo orden (una mano sostiene el teléfono mientras el pulgar de la misma mano toca, pero desde una posición inicial más alta)
  • Dos manos para la orientación vertical (piensa en cómo sujetarías un dispositivo portátil de juegos, esta vez, como la antigua Nintendo Gameboy)

Ahora, y aquí es donde las cosas se vuelven realmente relevantes, estos son los diferentes casos de uso para las diversas formas en que puede sostener un teléfono:

  • Tocar enlaces: la mayoría sostiene y toca o acuna
  • Casillas de verificación: la mayoría acuna o sostenga y toque
  • Escribir: la mayoría usa dos dedos o pulgares simultáneamente o mantiene presionado y toca
  • Desplazamiento corto: la mayoría sostiene y toca o acuna
  • Desplazamiento más prolongado: la mayoría se acuna o mantiene presionado y toca

En pocas palabras: Diseñe su sitio móvil para adaptarse a la gama de estas diferentes formas en que las personas sostienen sus teléfonos.

Los botones más grandes son mejores

Si está contemplando cómo diseñar para una excelente experiencia de usuario móvil, uno de los aspectos más vitales para concentrarse es el tamaño del botón. Al igual que con todas las cosas móviles, el tamaño de su pantalla es mucho más pequeño que el de una tableta o computadora de escritorio, lo que compromete la usabilidad de su sitio móvil si los botones son demasiado pequeños. Los botones de tamaño inadecuado conducen a errores de UX como:

  • Dificultad para tocar correctamente los botones
  • Problemas para ver los botones en primer lugar
  • Tener dificultades para comprender que un botón se puede tocar o interactuar de otra manera

Err en el lado de más grande es mejor.

Los botones más grandes aseguran una UX más fluida para sus compradores, clientes, visitantes, etc.

Esto plantea la pregunta, ¿qué tan grande, exactamente?

De acuerdo con las pautas de Material Design Touch Target Size de Google, los botones móviles deben alcanzar un tamaño de pantalla táctil de entre 7 y 10 milímetros. En otras palabras, los botones deben tener un tamaño físico de aproximadamente 1 centímetro, independientemente de la pantalla en la que aparezcan. Esto asegura un gran equilibrio entre:

  • Densidad de información
  • “Orientación” de los elementos de la interfaz de usuario

Cuando sus usuarios pueden ver más fácilmente los botones, comprender su relación espacial con otros elementos en pantalla y tocarlos para completar con éxito los objetivos de la página, entonces les brinda una experiencia de usuario increíble.

Prioriza el contenido más importante

La respuesta a la pregunta, ¿Cómo diseñar para una gran UX móvil? a veces radica en lo que restas en lugar de sumar. En el caso de contenido en pantalla, esta regla se aplica al 100%.

La bendición de los teléfonos inteligentes es su tamaño pequeño y portátil, a pesar de la tendencia reciente de aumentar el tamaño de la pantalla móvil. Esta comodidad tiene un inconveniente, y es que los usuarios están sujetos a un mayor coste de interacción. Este es el esfuerzo físico y mental que deben realizar para lograr sus objetivos de sitio móvil.

Por ejemplo, si navega por un sitio de noticias en su escritorio, es probable que pueda ver en la página de inicio los resultados deportivos y el pronóstico del tiempo en las barras laterales en la parte superior de la página, para que no tenga que molestarse en desplazarse hacia abajo. Sin embargo, en dispositivos móviles, este mismo contenido probablemente requerirá un desplazamiento serio para llegar porque el espacio es muy escaso en dispositivos móviles.

Por lo tanto, la única solución es priorizar el contenido más vital en la parte superior de la página móvil. En otras palabras, piense detenidamente qué contenido mostrar a sus usuarios y visitantes en la mitad superior de sus páginas móviles. Después de todo, por cada elemento de contenido que incluyas en la parte superior de la página, se debe empujar hacia abajo e incluso sacrificar otro elemento debajo de la página.

Un enfoque para ayudarlo a maximizar el contenido móvil en la parte superior de la página es minimizar el llamado cromo. No estamos hablando del navegador de Google en este caso. Chrome es la colección de elementos de diseño visual que ayudan a los usuarios a interactuar o brindan información adicional sobre el contenido de una interfaz, pero no es parte del contenido. Chrome proviene del sistema operativo del teléfono móvil.

Un ejemplo de Chrome serían todas las imágenes asociadas con las cuentas de las personas cuando está viendo correos electrónicos en la bandeja de entrada de su aplicación Gmail. En este ejemplo, estas imágenes lo ayudan a identificar adicionalmente a sus remitentes, pero no son absolutamente esenciales para identificarlos (la línea De en el correo electrónico en sí sería suficiente).

Al reducir estos elementos cromados, conserva mucho espacio en la pantalla del móvil y, por lo tanto, tiene más posibilidades de colocar la información más importante sobre el área pequeña del pliegue.

Centrarse en el usuario final

El secreto de cómo diseñar para una excelente experiencia de usuario móvil siempre se reduce al usuario final. Tenga esto en cuenta cuando diseñe sus sitios móviles y creará un sitio fácil de usar. Es así de directo.

Para llegar allí, asegúrese de diseñar en función de datos reales y no de suposiciones. Un buen lugar para comenzar es cómo los usuarios sostienen sus teléfonos en primer lugar. Si está diseñando para una forma en que muchas personas ni siquiera sostienen sus teléfonos, entonces todas las apuestas están canceladas.

También es clave recordar que, debido a las pantallas móviles pequeñas, el contenido debe verse fácil y rápidamente, por lo tanto, amplíe los elementos y asegúrese de que el contenido más importante se encuentre en la parte superior de la página.