Diseño de UX móvil: Esto es lo que debes considerar durante la optimización móvil de tu sitio web

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

¿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 de UX móvil?

Movimientos de diseño como Mobile First intentan ya desde hace tiempo desviar nuestra atención hacia el móvil. A estas alturas, la mayoría de sitios web profesionales funcionan bien en los dispositivos móviles. Por supuesto, diseñadores/as concienciados/as contribuyen a ello, pero también quienes dirigen un sitio web suelen utilizar frameworks como Bootstrap o prefabricados como themes WordPress. En este caso, la presentación responsiva suele estar ya integrada. Esto ahorra a desarrolladores/as 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é esto podría presentar un problema? Los/as visitantes que consultan tu sitio web a través de un dispositivo móvil tienen necesidades diferentes, que no necesariamente se satisfacen solo con la adaptación estética y técnica del sitio web.

El User Experience Design, diseño de la experiencia del usuario en español, se basa en la resolución de problemas. La pregunta inicial aquí es siempre: ¿qué problemas pueden tener los/as usuarios/as y cómo los resolvemos? Por eso, en el contexto de la adaptación a dispositivos móviles, hay que tener en cuenta una cuestión clave: ¿qué problemas adicionales surgen cuando los/as usuarios/as visitan tu web desde un dispositivo móvil?

Uso de smartphones en España

Según Statista.com, el 91,5% de internautas se conectaron a la red en 2020 a través de un smartphone. Un 55% realizaron compras online a través de sus dispositivos móviles. Para 2022, se prevé un aumento de 30 a 33 millones de usuarios/as que navegan a través de sus smartphones.

Muchos de nosotros utilizamos nuestros teléfonos inteligentes especialmente cuando estamos de camino. 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 muy brillante y muy oscuro. La recepción puede cambiar entre lo bueno y lo malo, o incluso detenerse por completo. Los/as visitantes de tu sitio web pueden tener planes de prepago y, por lo tanto, intentan evitar sitios web que consumen muchos datos en poco tiempo.

La posición puede ser menos cómoda y tus usuarios/as menos relajados/as como consecuencia. Por lo general, tenemos poca 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 el contenido se cargue, tendemos a cancelar el proceso en el smartphone y acabamos dedicando nuestra breve atención a otra página web.

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á tu web optimizada para dispositivos móviles? Para resumir mejor lo que esto significa en detalle, he resumido los principios de UX más importantes para el diseño móvil.

Diseño de UX para móviles: 13 principios que deberías aplicar de inmediato

1. Adaptar el contenido

Los/as visitantes de tu sitio web tienen diferentes objetivos en función de los dispositivos que utilizan para acceder a tu web. Los textos largos en dispositivos móviles suelen implicar mucho desplazamiento para encontrar lo que se busca. Como usuarios/as de smartphones, buscamos sobre todo información rápida y concisa. Es más probable que quienes visiten tu tienda a través del móvil quieran saber más sobre los productos que ofreces que sobre tu trayectoria profesional.

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 por completo. Es el caso de, por ejemplo, alguna característica que no funciona en la vista móvil o cuando los datos por consumirse superan las necesidades del usuario.
  • Acortar el contenido: puedes copiar la estructura de tu sitio web principal, pero acortar el contenido largo en consecuencia y enlazar una subpágina, por ejemplo. De este modo, los/as visitantes podrán decidir por sí mismos/as si esta información es relevante para ellos/as 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 también ser mostradas en este, por lo que nada debe ser distorsionado o escalado. También se puede evitar así una carga innecesaria. La transición entre el formato horizontal y el vertical puede ser la más difícil: dependiendo del contenido de la imagen, deberías mostrar solo una parte de la misma o depositar tus imágenes especialmente para dispositivos móviles. Para sitios web con muchas imágenes, deberías integrar lazy load o utilizar el plugin WordPress correspondiente. 

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

La optimización de gráficos e imágenes para tu sitio web WordPress es un paso fácil e importante para mejorar tu tiempo de carga. Te mostramos seis plugins populares WordPress que te liberarán completamente de la tarea de compresión de imágenes.

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 el cuerpo de texto y la introducción de texto en smartphones. Para más información sobre la tipografía en la web, consulta nuestro post Tipografía Web: ¿En búsqueda de la fuente ideal para tu sitio web? " y la entrada del blog"Type Sizes for Every Device" 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 por el hecho de que los dispositivos móviles también se utilizan en el exterior, esto resulta de gran relevancia. Esto también se aplica al resto de tu sitio web. Un buen contraste entre los elementos facilita la visualización de tu sitio web. ContrastChecker.com analiza tus opciones de color 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.
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 permite a los/as usuarios/as hojear el texto aún más rápido y seguir tomando información relevante para ellos. Algunos tipos de letra son, en general, muy poco adecuados para las pantallas pequeñas, ya que pierden su legibilidad cuando se escalan. Incluso las fuentes claras, que parecen elegantes en el escritorio, pueden ser menos legibles en el smartphone.

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 se ha convertido en el menú principal en la versión para móviles, pero también en el escritorio vemos cada vez más a menudo un menú vertical en lugar de uno horizontal. Por encima o debajo suele estar el menú secundario, en su caso algo menos destacado. También se puede situar 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

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

Los elementos interactivos deben mostrarse más grandes. De este modo, tus visitantes saben lo que pueden hacer en tu sitio web y son capaces de hacer clic en lo que quieren. La disposición de cada uno también juega un papel importante. Hay que dejar suficiente espacio para reducir el riesgo de tocar accidentalmente el enlace o el botón equivocado. Los botones como "Logout", "Delete", "Submit" también deben colocarse a una distancia del resto de Call-To-Actions 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.

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 en el caso de ordenadores de sobremesa, es conveniente utilizar soluciones probadas, también llamadas patrones de diseño de interfaz de usuario, a la hora de crear tu sitio web o tienda de e-commerce. Algunos de estos patrones son adaptables a los dispositivos, otros son más específicos. Además, este e-book 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 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 parecer rápidamente confusos. En general, solo deberías utilizarlos en dispositivos móviles si es muy necesario. Al integrar los formularios, hay que asegurarse de que solo se pidan los datos realmente esenciales y se proporcione al usuario el teclado adecuado. Para ello, se utilizan los tipos de formularios HTML correspondientes. 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 tu concepto, sigue siendo importante proporcionar 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. Lo importante es que el/la usuario/a sepa que su interacción ha funcionado y que algo va a pasar.

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 WordPress: Cómo crear un sitio web accesible

La accesibilidad en WordPress es un componente importante a la hora de crear sitios web. Pero, ¿hasta qué punto es accesible WordPress? ¿Por qué es tan importante la accesibilidad? ¿Y cómo puede ser tu web accesible para todos/as? Si te estás haciendo estas preguntas, nuestra Guía de Accesibilidad te resultará útil.

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 habituales ofrecen la posibilidad de inspeccionar tu sitio web con las denominadas herramientas para desarrolladores "developer tools". Allí también podrás probar tu sitio web en 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: Mejores prácticas para el diseño 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? No dudes en escribir tu comentario. ¿Te interesa el diseño y el desarrollo web? Entonces sigue a RAIDBOXES en Twitter y Facebook, LinkedIn o a través de nuestra newsletter.

Después de estudiar Diseño para Juegos y Escritura Creativa en Auckland, Sonja Hoffmann se ha especializado en el diseño y desarrollo web. Su labor profesional se enfoca en la gamificación y exploración de la motivación y la experiencia del usuario, junto con su pasión y curiosidad por las tendencias tecnológicas.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

La dirección de correo electrónicotu no se publicará. Los campos obligatorios están marcados con *.