¿Cómo hacer que tu web se convierta también en una experiencia móvil agradable? ¿Qué significa la experiencia de usuario, o "user experience", en dispositivos móviles? ¿Qué principios de diseño puedes aplicar? En este post encontrarás las respuestas a todas estas preguntas. Veamos con más detalle las mejores prácticas para el diseño de UX para móviles.

¿Por qué el diseño UX móvil?

Los movimientos de diseño, como el de " mobile first" , llevan algún tiempo intentando desviar nuestra atención hacia el móvil. A estas alturas, la mayoría de los sitios web profesionales funcionan bien en los dispositivos móviles. Por supuesto, los diseñadores concienciados contribuyen a ello. Pero incluso los que tienen un sitio web en WordPress suelen utilizar frameworks como Bootstrap o temas de WordPress ya hechos. En este caso, la pantalla responsiva suele estar ya integrada. Esto ahorra a los desarrolladores una cantidad increíble de tiempo. 

Sin embargo, el uso de Bootstrap, themes WordPress & Cía. conlleva el riesgo de que el diseño esté realmente solo pensado para el escritorio, y sea posteriormente adaptado para dispositivos móviles.

¿Por qué es un problema? Los visitantes que ven el sitio web tu WordPress a través de dispositivos móviles tienen otras necesidades que no necesariamente se satisfacen sólo con la personalización estética y técnica del sitio web WordPress.

El diseño de la experiencia del usuario se basa en la resolución de problemas. La pregunta de partida es siempre: ¿Qué problemas pueden tener los usuarios y cómo los resolvemos? En el contexto de los dispositivos móviles, debes considerar una cuestión central: ¿Qué problemas adicionales surgen cuando los usuarios visitan el sitio web tu WordPress desde un dispositivo móvil?

Muchos de nosotros utilizamos nuestros teléfonos inteligentes, especialmente cuando estamos en movimiento. La experiencia del usuario está fuertemente influenciada por factores externos: puede haber mucho ruido a nuestro alrededor. También podemos estar en movimiento: la interacción con el teléfono es menos precisa. Los niveles de luz pueden cambiar rápidamente entre la luz y la oscuridad. La recepción puede cambiar entre lo bueno y lo malo, o incluso detenerse por completo. Los visitantes del sitio web tus WordPress pueden utilizar tarifas de prepago y, por tanto, intentan evitar los sitios web que consumen mucho volumen de datos en poco tiempo.

La posición puede ser menos cómoda y tu usuarios menos relajados como resultado. En general, tenemos menos paciencia porque tenemos menos tiempo para las tareas individuales. Si algo no funciona en el menor tiempo posible -o tenemos que esperar demasiado para que se cargue el contenido-, tendemos a cancelar el proceso en el smartphone y dedicar nuestra breve atención a otro sitio web de WordPress.

La voluntad de leer o desplazarse por un montón de texto también es menor. Buscamos información claramente estructurada en pequeños párrafos. También es posible que solo tengamos una mano libre.

Las razones para navegar por internet con un smartphone son muy diferentes a las de hacerlo a través de nuestro ordenador de sobremesa. En el móvil, o bien queremos buscar información específica o bien intentamos matar el tiempo. 

Cuando navego por un sitio web comercial desde mi smartphone, probablemente lo que más me interesa es la información básica:

• ¿Cuál es la dirección?
• ¿Cómo llego allí?
• ¿Cuál es el horario de apertura?
• ¿Cómo puedo ponerme en contacto?
• ¿Qué productos se ofrecen?
• ¿Cuáles son los precios?

La única pregunta que queda es: ¿está optimizado para móviles el sitio web tu de WordPress? Para resumir mejor lo que esto significa en detalle, he resumido los principios de UX más importantes para el diseño móvil.

13 principios de diseño UX para móviles

1. Adaptar el contenido

Los visitantes del sitio web tus tienen diferentes objetivos, dependiendo de los dispositivos que utilicen para acceder al sitio web tu . Los textos largos en los dispositivos móviles suelen implicar mucho desplazamiento para encontrar lo que han venido a buscar. Como usuarios de móviles, buscamos principalmente información rápida y concisa. Es más probable que quienes visiten tu tienda en dispositivos móviles quieran saber qué productos ofreces que conocer tu trayectoria.

Por lo tanto, hay que adaptar el contenido. En el smartphone y la tableta hay una jerarquía diferente a la del ordenador de sobremesa. Aquí hay varias posibilidades:

• Omite el contenido por completo: Para algunos contenidos, puede ser una buena idea ocultarlos completamente. Este puede ser el caso si se trata de algo que no funciona en el teléfono de todos modos. O si el volumen de datos consumido supera el beneficio para el usuario.
• Acortar el contenido: Puedes utilizar la estructura del sitio web tu de WordPress, pero acortar el contenido largo en consecuencia y enlazarlo a una subpágina, por ejemplo. De este modo, los visitantes pueden decidir por sí mismos si esta información es relevante para ellos o no.
• Cambiar la disposición del contenido: puedes revisar la estructura de tu contenido y organizarlo de manera diferente para dispositivos móviles. De este modo, los productos podrían estar en primer lugar y los fondos de la tienda vendrían después y ahorrarás desplazamiento innecesario, pero seguirás mostrando todo el contenido.

En el siguiente ejemplo, he adaptado el contenido del sitio web de un restaurante (izquierda) para hacerlo más amigable. He acortado el texto y he enlazado a una subpágina con un CTA (derecha). También he ajustado la tipografía. Más información al respecto más adelante.

2. Layout

En su artículo Design for Fingers, Touch, and People, Steven Hoober informa de los resultados de su amplia investigación sobre el uso de smartphones. La técnica del pulgar se utiliza a menudo como guía. Aquí tiene una función principal el radio que el pulgar recorre a través de la pantalla. A menudo, se sugiere que las esquinas superiores son zonas absolutamente tabú a las que los/as usuarios/as no pueden llegar. Sin embargo, según los resultados de su investigación, esto no es del todo cierto.

Las 6 formas más comunes de sujetar smartphones:

El resultado es la siguiente división óptima de los elementos para smartphones:

El resultado: la información más importante debe situarse en el centro de la pantalla en los dispositivos móviles.

3. Minimalismo

Un enfoque minimalista del diseño nunca está de más. Pero, sobre todo en un dispositivo pequeño, nos sentimos agobiados/as y confundidos/as por el exceso de contenido y el escaso espacio en blanco. No está claro qué información se oculta y cómo se llega a ella.

La versión móvil de Streetartnews parece estructurada y clara. En las páginas de contenido solo son visibles los elementos más necesarios y un tipo de letra serif legible con un interlineado adecuado:

4. Coherencia

Es importante que tu sitio web sea coherente en todas las plataformas. Google ha resuelto esto de forma muy elegante. No importa desde qué dispositivo acceda a Google, Google se reconoce al instante.

Tu marca también debe reflejarse en los dispositivos móviles a pesar de su diseño minimalista. En caso de que tu sitio web tenga un área de usuario, los cambios realizados deben adoptarse en consecuencia en todos los dispositivos.

5. Galería

Las imágenes deben tener un tamaño adecuado y mostrarse en ese tamaño para que no haya que distorsionar ni escalar nada. Esto también ayuda a evitar tiempos de carga innecesariamente largos. La transición entre el formato horizontal y el vertical puede ser la más difícil: Dependiendo del contenido de la imagen, debes mostrar sólo una parte de la misma o almacenar específicamente las imágenes de tu para los dispositivos móviles. Para los sitios web con muchas imágenes, debes integrar Lazy Load o utilizar los plugins de WordPress adecuados. 

Lo mismo ocurre con los vídeos. En este caso, también se cambia de formato paisaje a retrato. Los vídeos también deben estar configurados para que se ejecuten en silencio y no se inicien solos. En general, los vídeos deben estar optimizados para la web, pero la optimización para dispositivos móviles es especialmente importante.

6. Tipografía

Más importante que la apariencia de tu sitio web es siempre su funcionalidad. Esto incluye un texto legible. El tamaño de texto por defecto en HTML es de 16px. Se suele utilizar este tamaño a menos que se especifique lo contrario. Sin embargo, dependiendo del tipo de letra, tu texto puede aparecer más grande o más pequeño. 

Sin embargo, para que la tipografía sea más legible, hay que tener en cuenta otras cosas:

• Contraste entre el color de la fuente y el fondo: Sobre todo porque los dispositivos móviles también se utilizan en el exterior, esto es especialmente importante. Esto también se aplica al resto del sitio web tus . Un buen contraste entre los elementos facilita la visualización del sitio web tus . ContrastChecker.com analiza la elección de colores de tu y te permite saber si los colores combinados tienen suficiente contraste entre sí.
• Espaciado: si tu texto no presenta mucho espacio, resultará más difícil de leer. El interlineado para dispositivos de escritorio y móviles puede ser diferente.
• Centrado: mi regla básica es no utilizar nunca la justificación en sitios web. La justificación puede parecer bonita a primera vista, pero hace que se interrumpa el flujo de la lectura. El tipo centrado tiene un efecto similar. Por lo tanto, las secciones de texto en dispositivos móviles solo deben centrarse en casos especiales.

He aquí de nuevo el ejemplo de EggShop: para hacer el texto (izquierda) más legible, aumenté el tamaño de la fuente a 16px y establecí la altura de la línea, también conocida como "line height" a 1,7 (a la derecha). También centré el texto a la izquierda y reduje algunos espacios hacia arriba, respectivamente quité el doble encabezado. En la versión de escritorio, el doble titular tiene sentido. En el móvil solo crea espacios en blanco y duplicados no deseados. 

Podrías ir un poco más allá y poner las palabras clave en negrita. Esto permitiría a los usuarios hojear el texto aún más rápido y seguir captando información relevante. Algunos tipos de letra no suelen ser adecuados para pantallas pequeñas porque pierden su legibilidad cuando se escalan. Los tipos de letra claros que parecen elegantes en un ordenador de sobremesa pueden ser menos legibles en un smartphone.

7. Navegación

La navegación de tu sitio web debe ser lo más intuitiva posible. Esto significa que, al crear la arquitectura de tu navegación, lo mejor es utilizar las estructuras existentes como guía. Esto facilitará a los/as usuarios/as la tarea de navegación por tu web. Intuitivo es, por ejemplo, desplazarse hacia abajo y hacia arriba para navegar por un sitio, pero no necesariamente hacia la izquierda o derecha.

El menú vertical ha prevalecido como menú principal en el móvil. Pero también en el escritorio vemos cada vez más un menú vertical en lugar de uno horizontal. Por encima o por debajo suele estar el menú secundario, en su caso algo menos destacado. También puede estar en la parte inferior. 

Los menús secundarios pueden ser, por ejemplo, ajustes de idioma o enlaces a redes sociales. Si es necesario un menú terciario, se colocará como un menú desplegable. Esto puede ser un inicio de sesión o un cierre de sesión, por ejemplo.

Si tu sitio web es más que un sitio de una sola página, es especialmente importante que los/as visitantes siempre puedan encontrar fácilmente dónde están.

CTA y enlaces

Los elementos interactivos deben mostrarse en un tamaño mayor. De este modo, los visitantes de tus saben lo que pueden hacer en tus . Y pueden hacer clic en lo que quieren. Y son capaces de hacer clic en lo que quieren. La disposición de los elementos también influye. Hay que dejar suficiente espacio para reducir el riesgo de tocar accidentalmente el enlace o el botón equivocado. Los botones como "Cerrar sesión", "Eliminar", "Enviar" también deben colocarse a una distancia de las otras llamadas a la acción para que no se activen accidentalmente.

Interacción oculta

Es bastante común permitir las interacciones a través de múltiples vías. Siempre que haya una forma de que los/as nuevos/as visitantes sigan utilizando tu sitio web. Esto te permite ofrecer accesos directos a los/as usuarios/as que regresan sin dificultar el inicio.

Enlaces

Si quieres añadir más funciones a tu web, tiene sentido utilizar los sistemas existentes en lugar de programar otros nuevos. Esto es así, por ejemplo, si se utiliza el cliente de correo electrónico del usuario en lugar de un formulario de contacto. O al integrar las direcciones a través de la aplicación favorita del usuario. Esto facilita el uso de tu sitio, ya que se pueden utilizar las aplicaciones ya aprendidas para realizar determinadas tareas.

8. Patrones de diseño UI

Al igual que con el escritorio, es una buena idea utilizar soluciones probadas, también llamadas patrones de diseño de interfaz de usuario, al crear sitios web tus o tiendas de comercio electrónico tu . Algunos de estos patrones son multidispositivo, otros son más específicos. Además, este libro electrónico de UXPin ha resultado ser un buen punto de referencia.

Las pantallas pequeñas, en particular, ofrecen poco espacio para la navegación. Los sitios web desestructurados y confusos son especialmente llamativos.

Al igual que en el caso de los patrones de diseño de la interfaz de usuario, es aconsejable orientarse en sitios web ya existentes y aplicaciones web de éxito y analizarlos:

• ¿Dónde suele estar el menú?
• ¿Cómo se ve?
• ¿Qué ocurre cuando lo pulso? 

Sin embargo, debes proceder de forma crítica para no copiar ningún error o elemento "malo" de UX. 

9. Formularios

Los formularios largos pueden ser agotadores y pueden volverse rápidamente confusos. En general, sólo debes utilizar formularios en los dispositivos móviles si es necesario. Al integrar los formularios, debes asegurarte de que sólo pides los datos realmente necesarios y proporcionas al usuario el teclado adecuado. Puedes hacerlo utilizando tipos de formularios HTML adecuados. Esto indica al navegador cuál es la entrada. Y se proporciona el teclado adecuado.

También puedes integrar el llenado automático o la sugerencia de contenidos. O utilizar el inicio de sesión en las redes sociales en lugar de un largo proceso de registro.

10. Feedback

Dado que utilizamos los dispositivos móviles con las manos, tendemos a esperar obtener una respuesta real: una respuesta basada en objetos reales. Puede tratarse, por ejemplo, de un botón que parece estar pulsado cuando lo presionamos.

Si este tipo de información no encaja en el concepto de tu , sigue siendo importante dar alguna información. ¿Quién no ha pulsado un enlace o un botón muchas veces seguidas y no ha estado seguro de si simplemente no funciona o se ha perdido la conexión a Internet? Eso es algo que hay que evitar. Hay trucos comunes para esto, como cargar animaciones. Es importante que los usuarios sepan que su interacción ha funcionado y que va a ocurrir algo.

11. Manejo de errores

Se cometen errores. Accidentalmente, has pulsado el enlace equivocado y has acabado en el sitio web equivocado. O bien presentas algo que aún no estaba listo. Es importante que los errores no tengan consecuencias negativas (o las menos posibles). Las funciones de deshacer y los botones de retroceso son buenos para esto. El botón de inicio también es increíblemente importante aquí: el ancla, cuando tus usuarios se pierden, para que siempre sepan cómo volver a la página de inicio.

12. Velocidad

El tiempo de carga de tu sitio web también puede ser un problema en dispositivos móviles. Especialmente si se quiere acceder desde redes inestables, el tiempo de espera no debe ser tan largo como para disuadir a los visitantes.

13. Accesibilidad

La accesibilidad es un tema multiplataforma que, por fin, está cobrando cada vez más importancia. La idea básica y la misión: la web debe ser accesible para todas las personas. Esto es especialmente relevante para personas con este tipo de discapacidades que pueden afectar a la forma de acceder y utilizar la web.

Si se ignora la cuestión de la accesibilidad, ya estás excluyendo al 20% de la población mundial que no podrán utilizar tu sitio web en la actualidad. En resumen, descuidar la accesibilidad no es bueno para tu negocio, pero lo más importante es que es terrible para crear un mundo más justo y equitativo.

Herramientas para pruebas de UX

Dependiendo de cómo esté construido tu sitio web, es posible que tengas una forma de editar la vista móvil directamente. Por lo general, es necesario realizar algunos ajustes manuales en el CSS. Hay varias posibilidades que se pueden probar:

• Herramientas de inspección en el navegador: Los navegadores más comunes te permiten inspeccionar el sitio web tu con las denominadas Herramientas para desarrolladores. Allí también puedes comprobar el sitio web tu en diferentes tamaños de dispositivos. Otras buenas herramientas para probar sitios web son Responsinator y BrowserStack Responsive.

• En el dispositivo: la forma más eficaz de ver tu sitio web es en el propio dispositivo. Por lo tanto, nunca deben faltar las pruebas en el propio teléfono móvil o tableta. Como sería muy caro tener todos los dispositivos en casa, existen los llamados emuladores.
• Emuladores: este software lo proporciona el propio fabricante del sistema operativo. Allí podrás desarrollar y ver tus resultados directamente en el navegador, adaptados al tamaño del dispositivo y al sistema operativo correspondiente, como Android o iOS.

Conclusión sobre el diseño de la UX móvil

Si pones en práctica estos consejos, mejorarás la experiencia móvil en tu web y atraerás a más clientes. Puede que estos ejemplos y mejores prácticas te ayuden a desarrollar nuevas ideas para tu sitio web. Desgraciadamente, el diseño móvil sigue siendo a menudo descuidado, lo que tiene un impacto negativo en la tasa de conversión de usuarios móviles.

Para obtener más información sobre el diseño de UX para móviles, recomiendo encarecidamente los fundamentos web de Google y este post para mejorar el diseño de UX para móviles.