En este momento, hay mucho enfoque en 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 comienzan a aparecer errores 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 que los diseñadores comprendan e implementen 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.

Para ayudarlo a concentrarse en algunas áreas clave mientras diseña sus proyectos (y no después de su lanzamiento), aquí hay cinco consejos de UX centrados en dispositivos móviles que todo diseñador debe seguir:


Centrarse en el espaciado de los elementos de diseño

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

Un error de usabilidad móvil común 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 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 un dispositivo móvil, la mayoría de los usuarios usan sus pulgares. Los pulgares suelen ser más grandes que el 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 los botones y los 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 sostener el teléfono o la tableta con la mano izquierda, otros con la derecha o algunos con ambas manos. Independientemente de eso, el diseño del sitio debe ser fácil de navegar.

Por último, los visitantes también están usando su pulgar para desplazarse por el dispositivo y pasar por la página web, por lo que deberá asegurarse de que no haya elementos grandes en los que se pueda hacer clic en los que puedan tocar inadvertidamente 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 o realizan múltiples tareas o están afuera mientras usan sus dispositivos más pequeños y pueden encontrarse 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 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ños en toda la página puede generar confusión sobre el significado de la página.

En sus diseños, también puede aumentar la altura de la 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 iluminación, 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 mejores prácticas

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 sin fin si no se codifica bien. Al seleccionar animaciones en el proceso de diseño, también debe planificar si esas interacciones ocurrirá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 flotadores son otro elemento de diseño común que puede verse diferente en dispositivos móviles. En el escritorio, pasar el cursor por encima 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 están usando un mouse, lo que significa que el visitante tendrá que tocar para ver el desplazamiento del mouse.

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

Al hablar de 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 ubicación de ventanas emergentes y elementos de terceros

Siempre ha habido mucho debate sobre si utilizar 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 resultar más difícil para un visitante cerrar el formulario o el mensaje. Desde enero de 2017, Google advirtió 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 los 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 basado en dispositivos móviles, 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 el 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 le ayudará a prever cualquier problema con elementos superpuestos.


Reconsiderar 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 la posibilidad de incluir un número de teléfono «llame con un clic» en el encabezado, para que los visitantes puedan llegar fácilmente a 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 claras y mensajes de error también es importante para el cumplimiento de la 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 mientras diseña sus proyectos le ahorrará tiempo y frustración a medida que se lancen. ¿Hay sugerencias adicionales de UX móviles que hayan ayudado a que el diseño fluya? ¡Deja un comentario a continuación!


¿Quieres recibir en tu buzón un correo con las últimas novedades?