5 consejos de Ux móvil que todo diseñador debe seguir

En este momento, se está prestando mucha atención a solucionar los problemas móviles, incluidos los problemas de rendimiento móvil, ya que los usuarios continúan pegados a sus dispositivos más pequeños.

Por lo general, estos problemas se abordan después del lanzamiento de un sitio, cuando los errores comienzan a aparecer en los informes de Google Search Console sobre la usabilidad móvil. Si bien los equipos de desarrollo a menudo pueden resolver tales errores, es mucho más eficiente para los diseñadores comprender e implementar las mejores prácticas de UX móvil desde el principio.

La velocidad móvil también es un factor importante para la optimización de motores de búsqueda, por lo que los diseñadores y desarrolladores deben considerar cómo todo, desde la animación hasta las imágenes, afectará esas métricas.

Centrarse en el espaciado de los elementos de diseño.

Espaciar los elementos de diseño no se trata solo de crear un buen flujo visual; se trata de hacer que su sitio sea fácil de usar para todos los visitantes, incluidos aquellos en dispositivos móviles.

Un error común de usabilidad móvil en Google Search Console es que "los elementos en los que se puede hacer clic están demasiado juntos".

Esto crea una experiencia frustrante para los visitantes en dispositivos más pequeños donde, sin darse cuenta, hacen clic en los elementos mientras intentan navegar por el sitio.

Desde el punto de vista del diseño de UX móvil, los botones y los elementos interactivos o en los que se puede hacer clic deben ser lo suficientemente grandes y estar lo suficientemente separados en el diseño.

En una computadora de escritorio, los visitantes navegan con un mouse, que es una herramienta muy precisa, mientras que en dispositivos móviles, la mayoría de los usuarios usan sus pulgares. Los pulgares suelen ser más grandes que el pequeño cursor del mouse y pueden ser un poco más torpes, especialmente si está tratando de navegar por un sitio mientras camina o realiza múltiples tareas.

Por lo tanto, debe diseñar suficiente espacio entre botones y elementos para que el visitante no tenga una experiencia móvil frustrante.

También debe considerar la accesibilidad y cómo los visitantes pueden sostener el dispositivo más pequeño. Algunos pueden estar sosteniendo el teléfono o la tableta con la mano izquierda, otros con la mano derecha o algunos con ambas manos. El diseño del sitio debe ser fácil de navegar independientemente de eso.

Por último, los visitantes también usan su pulgar para desplazarse en el dispositivo y navegar por la página web, por lo que deberá asegurarse de que no haya elementos grandes en los que se pueda hacer clic y que puedan tocar sin darse cuenta mientras se desplazan.

Garantizar la legibilidad del texto y la fuente.

Además del espaciado, otro error común de usabilidad móvil en los informes de Google Search Console es "el texto es demasiado pequeño para leer". Si bien un desarrollador puede ajustar algunos aspectos del tamaño de la fuente, existen varias mejores prácticas de UX que los equipos de diseño pueden implementar desde el principio en términos de legibilidad.

Seleccionar un tipo de letra que sea fácilmente legible es el primer lugar para comenzar. Recuerde que los usuarios a menudo caminan, realizan múltiples tareas o están afuera mientras usan sus dispositivos más pequeños y pueden estar en escenarios no ideales mientras intentan navegar por su sitio.

Crear una jerarquía visual en términos de tamaño de fuente es otra forma de ayudar a los usuarios de dispositivos móviles a escanear y comprender rápidamente el contenido de la página. También ayuda en dispositivos móviles o tabletas donde los textos de los titulares pueden pasar a la siguiente línea. El uso de la misma fuente y tamaño en toda la página puede causar confusión sobre el significado de la página.

En sus diseños, también puede aumentar la altura de línea entre líneas de texto para mejorar la legibilidad de una página.

Una vez que haya decidido la fuente y el tamaño, también debe considerar las proporciones de contraste de color.

Dado que los visitantes pueden estar en interiores o exteriores o con poca luz, es importante seguir los estándares para el contraste entre los colores de fondo y de primer plano.

Esto también juega un papel en la accesibilidad y la creación de un sitio web compatible con ADA. De acuerdo con los estándares WCAG 2.1, se recomienda una relación de contraste de al menos 4,5:1 para texto normal y 3:1 para texto grande.

Asegúrese de que los desplazamientos y la animación sigan las prácticas recomendadas

La mayoría de los diseños web actuales incorporan algunas microanimaciones y componentes interactivos; es una solicitud común de los clientes en un proceso de rediseño.

Agregar movimiento a un sitio es a menudo una colaboración entre diseñadores y desarrolladores, ya que la animación puede afectar el tiempo de carga de la página y causar un control de calidad interminable si no se codifica bien. Al seleccionar animaciones en el proceso de diseño, también debe planificar si esas interacciones se producirán en dispositivos móviles.

Debido a problemas de rendimiento, es común desactivar animaciones complejas y fondos de video en dispositivos móviles porque pueden ralentizar el tiempo de carga del sitio, especialmente para los visitantes en una red móvil. Este tipo de alteración ha sido cada vez más común desde 2018, cuando la velocidad de la página móvil se convirtió en uno de los factores de clasificación de Google.

En general, la animación y la interacción deben usarse de manera sutil para respaldar la experiencia del usuario y no deben distraer al visitante. Tampoco debería ser un ingrediente esencial para ayudar a un visitante a completar una acción.

Los cursores son otro elemento de diseño común que puede verse diferente en dispositivos móviles. En el escritorio, pasar el mouse sobre se refiere a un objeto o una imagen que cambia o revela texto cuando el visitante pasa el mouse sobre él. Si bien esto funciona bien en dispositivos grandes, tenga en cuenta que en dispositivos móviles, los visitantes no usan un mouse, lo que significa que el visitante tendrá que tocar para ver el cursor.

Por lo tanto, si tiene un cuadro o una imagen que muestra texto al pasar el cursor por encima, debe asegurarse de que el mensaje no sea crítico para los pasos de los visitantes.

Cuando hable sobre animación, usted y su equipo de desarrollo también pueden revisar las mejores prácticas de Google para las pautas de animación web a fin de evitar errores relacionados con flash o tecnología obsoleta.

Planifique la colocación de ventanas emergentes y elementos de terceros

Siempre ha habido mucho debate sobre si usar formularios emergentes en sitios web y si implementarlos en dispositivos móviles.

Un argumento para evitar los formularios emergentes en dispositivos móviles es que puede ser más difícil para un visitante cerrar el formulario o el mensaje. Desde enero de 2017, Google ha advertido contra el uso de intersticiales intrusivos que impiden que todo el contenido de una página sea visible para un visitante, ya que son especialmente problemáticos en dispositivos móviles.

Puede sopesar todos estos elementos en conversaciones con clientes sobre formularios emergentes y decidir cuál es la mejor experiencia de usuario para el diseño del formulario.

Al adoptar un enfoque de diseño móvil, es útil considerar cómo se colocarán los elementos en dispositivos más pequeños. Por ejemplo, un botón adhesivo en el lado derecho de la pantalla que permanece mientras un visitante se desplaza puede funcionar bien en el escritorio, pero este tipo de elementos adhesivos pueden hacer que el espacio de visualización sea aún más pequeño en un dispositivo móvil.

Si bien algunos elementos, como el chat en vivo y los widgets de accesibilidad, pueden agregarse en el último momento, planificarlos antes en el proceso de diseño web puede ayudar a evitar una interfaz caótica para los visitantes.

El chat en vivo se ha convertido en una herramienta extremadamente popular y los widgets de chat a menudo se encuentran en la esquina inferior derecha o izquierda del diseño. Ofrecer recomendaciones sobre la ubicación de estos elementos incluyéndolos en maquetas de diseño lo ayudará a prever cualquier problema con elementos superpuestos.

Reconsidere el diseño y la ubicación del formulario

Completar y enviar un formulario desde un dispositivo móvil o una tableta más pequeña puede ser una tarea molesta para los visitantes. Por eso es fundamental considerar opciones alternativas a los formularios en el diseño del sitio.

Al crear la navegación del menú móvil, considere incluir un número de teléfono de "clic para llamar" en el encabezado, para que los visitantes puedan comunicarse fácilmente con la empresa.

Al diseñar todos los formularios en el sitio, es una buena práctica tanto para computadoras de escritorio como para dispositivos móviles reducir la cantidad de campos de formulario tanto como sea posible e indicar claramente qué es un campo obligatorio.

Un consejo para la experiencia móvil de un formulario es diseñar etiquetas de formulario y no solo utilizar texto de marcador de posición para los campos del formulario. Un visitante en un dispositivo móvil puede ser interrumpido fácilmente por otras notificaciones e interacciones, por lo que puede ser interrumpido en el proceso de completar el formulario y olvidar lo que aparece en el texto del marcador de posición. Proporcionar etiquetas de formulario y mensajes de error claros también es importante para el cumplimiento de ADA.

Por último, la ubicación del formulario en la página y cómo se puede ajustar con el diseño receptivo es fundamental, ya que la ubicación del formulario puede afectar las conversiones.

Conclusión

Dado el mayor enfoque en el rendimiento móvil, poner en práctica algunas de las ideas anteriores a medida que diseña sus proyectos le ahorrará tiempo y frustración a medida que se lanzan esos proyectos. ¿Hay consejos adicionales de UX móvil que hayan ayudado a que su diseño fluya? ¡Deja un comentario a continuación!

Siguiente: ¡Desarrolle su conjunto de habilidades de diseño web con útiles cursos en línea!

El diseño de UX móvil es solo una de las muchas cosas de las que debe estar al tanto como diseñador web profesional. Si bien no siempre hay mucho tiempo disponible para mejorar sus habilidades, tomar un curso en línea es una excelente manera de asegurarse de continuar con su educación.

¡Este artículo ofrece una lista completa de algunos de los mejores cursos en línea para diseñadores web (+ cuánto cuestan) para que no tenga que perder más tiempo buscando entre todas las opciones disponibles!