Mejores prácticas de diseño UX para móviles

Diseño de UX para móviles: consejos para la optimización para móviles tuswebsite

¿Cómo hacer que tu web se convierta también en una experiencia móvil agradable? ¿Qué significa la experiencia del 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 móvil.

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

Movimientos de diseño como el de " mobile first" llevan tiempo tratando de 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 tuWordPress 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.

Eldiseñ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, hay que tener en cuenta una cuestión central: ¿Qué problemas adicionales surgen cuando los usuarios visitan el sitio web tuWordPress desde un dispositivo móvil?

Uso de smartphones en España

Según Statista.com El 97,5% de los hogares alemanes tenía uno o más teléfonos móviles en 2020. Esto supone una cuota del 80% de los usuarios de Internet móvil. De ellos, el 24,1% utilizó un contrato de prepago. Para 2023, se prevé un aumento de 66,5 millones de usuarios de smartphones a 68,6 millones.

Muchos de nosotros utilizamos nuestros teléfonos inteligentes especialmente cuando estamos en movimiento. La experiencia del usuario está muy 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 tusWordPress pueden utilizar tarifas de prepago y, por lo tanto, intentan evitar los sitios web que consumen mucho volumen de datos en poco tiempo.

La posición puede ser menos cómoda y tuusuarios 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 puedo llegar hasta 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 de WordPress tu? Para resumir mejor lo que esto significa en detalle, he resumido los principios de UX más importantes para el diseño móvil.

Consentimiento*
Este campo es de validación y no debe ser modificado.

13 principios de diseño UX para móviles

1. Adaptar el contenido

Los visitantes del sitio web tustienen diferentes objetivos, dependiendo de los dispositivos que utilizan para acceder al sitio web tu. Los textos largos en los dispositivos móviles suelen implicar mucho desplazamiento para encontrar lo que se busca. Como usuarios de móviles, buscamos principalmente información rápida y concisa. Es más probable que quienes visiten su tienda en dispositivos móviles quieran saber qué productos ofrece que conocer su 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:

  • Omitir completamente el contenido: Para algunos contenidos, puede ser una buena idea ocultarlos completamente. Este puede ser el caso si es algo que no funciona en el teléfono de todos modos. O si el volumen de datos consumido superara el beneficio para el usuario.
  • Acortar el contenido: Puede utilizar la estructura del sitio web tude 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.

Mejores prácticas de diseño UX para móviles
Versión móvil original de un sitio web (ejemplo)
Mejores prácticas de diseño UX para móviles
Versión móvil optimizada de un sitio web (ejemplo)

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:

Mejores prácticas de diseño UX para móviles
Cómo prefiere la gente sujetar sus smartphones

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

Mejores prácticas de diseño UX para móviles
La mejor disposición o layout de los contenidos primarios, secundarios y terciarios

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:

Mejores prácticas de diseño UX para móviles
La jerarquía visual es aún más importante en la vista móvil
Mejores prácticas de diseño UX para móviles
Un mayor espacio entre líneas es más fácil de leer en los dispositivos móviles

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.

Mejores prácticas de diseño UX para móviles
La versión de escritorio de Google
Mejores prácticas de diseño UX para móviles
Y este es el aspecto de Google en la tableta
Mejores prácticas de diseño UX para móviles
La versión móvil de Google

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 este tamaño para que nada tenga que ser distorsionado o escalado. 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, debe mostrar sólo una parte de la misma o almacenar específicamente las imágenes de tupara los dispositivos móviles. Para los sitios web con muchas imágenes, debería integrar Lazy Load o utilizar los plugins de WordPress adecuados. 

Optimizar imágenes WordPress: 6 plugins para la compresión de imágenes

La optimización de gráficos e imágenes para el sitio web tuWordPress es un paso fácil e importante para mejorar el tiempo de carga de tus. Te mostramos seis populares plugins de WordPress que se encargarán de la Compresión tusImágenes por completo.

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. 

Todo sobre tipografía web y fuentes

Como regla general, un tamaño de fuente de 16px es ideal para los textos del cuerpo y la introducción de texto en los smartphones. Puede encontrar más información sobre la tipografía en la web en nuestro artículo "Cómo encontrar la fuente perfecta para su sitio web tu" y en la entrada del blog "Tamaños de letra para cada dispositivo" de UX Matters.

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 tuy le 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.
Mejores prácticas de diseño UX para móviles
Justificación en una página de muestra
Mejores prácticas de diseño UX para móviles
Texto centrado a la izquierda en una página de muestra

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ía 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 sacando información relevante. Algunos tipos de letra no suelen ser adecuados para pantallas pequeñas porque pierden su legibilidad cuando se escalan. Las fuentes ligeras que parecen elegantes en un ordenador de sobremesa pueden ser menos legibles en un smartphone.

Consentimiento*
Este campo es de validación y no debe ser modificado.

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.

Mejores prácticas de diseño UX para móviles
La regla general (Fuente: UX Matters)

Los elementos interactivos deben mostrarse en un tamaño mayor. De este modo, los visitantes de tussaben 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 "Salir", "Borrar", "Enviar" también deben colocarse a distancia de las otras llamadas a la acción para que no se activen accidentalmente.

Mejores prácticas de diseño UX para móviles
Air Inuit muestra las interacciones de una manera muy clara y fácil de usar

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.

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 en el caso de los ordenadores de sobremesa, es conveniente utilizar soluciones probadas, también llamadas patrones de diseño de interfaz de usuario, al crear sitios web tuso tiendas de comercio electrónico tu. Algunos de estos patrones son transversales a los dispositivos, otros son más específicos. Además, este libro electrónico de UXPin ha demostrado 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 ser crítico/a al hacerlo para no copiar ningún error o elemento "malo" de UX. 

Mejores prácticas de diseño UX para móviles
Crustac.fr ha elegido el patrón de interfaz de usuario Burger Menu para que la navegación sea intuitiva para todos/as.

9. Formularios

Los formularios largos pueden ser agotadores y convertirse rápidamente en confusos. En general, sólo debe utilizar formularios en dispositivos móviles si es necesario. Al integrar los formularios, hay que asegurarse de que sólo se pidan los datos realmente necesarios y se proporcione al usuario el teclado adecuado. Puede 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.

Mejores prácticas de diseño UX para móviles
Inicio de sesión social (también llamado inicio de sesión único) en Pinterest.

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 comentarios no encajan en el concepto de tu, sigue siendo importante dar algunos comentarios. ¿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 ido la conexión a Internet? Eso es algo que hay que evitar. Hay trucos comunes para esto, como la carga de animaciones. Es importante que los usuarios sepan que su interacción ha funcionado y que va a pasar 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

Accesibilidad de WordPress: Cómo crear un sitio web accesible

La accesibilidad en WordPress es un componente importante en la construcción de sitios web. Pero, ¿hasta qué punto es accesible WordPress? ¿Por qué es tan importante la accesibilidad? ¿Y cómo puede tuser accesible para todos? Si usted también se hace estas preguntas, nuestro Guía de accesibilidad es exactamente lo que necesitas.

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 permiten inspeccionar el sitio web tucon las denominadas herramientas para desarrolladores. Allí también puede comprobar el sitio web tuen diferentes tamaños de dispositivos. Otras buenas herramientas para probar sitios web son Responsinator y BrowserStack Responsive.
Mejores prácticas de diseño UX para móviles
Developer tools en Google Chrome
  • 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.

Tus preguntas sobre diseño de UX para móviles

¿Qué preguntas tienes para Sonja sobre el diseño UX para móviles? Esperamos su comentario. ¿Está interesado en el diseño y el desarrollo web? A continuación, siga Raidboxes en Twitter y Facebook, LinkedIn o a través de nuestro Newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

Tu dirección de correo electrónico no se publicará.