Guía de diseño web para dispositivos móviles

0
16

guia de diseño web para dispositivos moviles

Con casi la mitad del tráfico de búsquedas de Google provenientes de dispositivos móviles, se puede afirmar con seguridad que la mayoría de los visitantes incrementarán su acceso a páginas web desde sus smartphones, tablets. etc.

¿Tu presencia online está preparada para adaptarse a estos nuevos hábitos?

De igual manera tendrás que hacerlo porque la experiencia móvil y de ordenador son campos de juego completamente diferentes. Para páginas que requieren de constante interacción de usuario con alto contenido, es crucial un primer diseño web para móviles. Sin embargo, hacer un diseño teniendo en mente simplemente la idea de móvil no es suficiente para proporcionar una excelente experiencia de usuario.

Reducir el contenido web y organizarlo para que encaje en una pantalla móvil es un enfoque desactualizado del diseño, es como tratar de meter un pie grande a un pequeño zapato. El contenido y la experiencia de usuario deberán depositarse en los primeros modelos móviles, optimizar la experiencia móvil antes de escalar a ordenadores. Esto asegura que los diseños den prioridad a la más frecuente experiencia de usuario móvil antes de considerar la interacción en ordenadores. En muchos casos, las limitaciones en las pantallas de un dispositivo móvil darán lugar a decisiones que también proporcionan una experiencia más adecuada a los usuarios que utilizan ordenadores.

guía de diseño web para dispositivos móviles

Comprender los elementos de un diseño cohesivo

No es posible crear un diseño web móvil libre de fallas sin primero adaptarlo al modo de pensar del usuario. Es por eso que primero debes definir a tu audiencia y garantizar que esto sea en realidad el sistema más adecuado para un primer diseño móvil

 

Toma en consideración los casos típicos de usuarios para tu audiencia y página web. Por ejemplo, si la audiencia principal no está acostumbrada a estar frente a un ordenador (ej. los clientes de las empresas inmobiliarias suelen utilizar su dispositivo móvil cuando buscan información o detalles adicionales sobre departamentos), esto debería liderar el enfoque de tu investigación hacia lo móvil.

 

Sin embargo, con motores de búsqueda que favorecen en sus resultados de búsqueda a páginas web amigables con dispositivos móviles para aquellos usuarios que usan estos dispositivos, no es suficiente mirar simplemente el análisis de tráfico de visitantes de una página web. Puede que veas menor tráfico de búsqueda orgánica en móviles porque tu página fue reducida a menores rankings. Lo recomendable es mirar la disparidad entre el tráfico móvil y el tráfico de ordenador para  visitantes directos y visitantes de otras fuentes. En base a esos análisis podrás inferir conclusiones.

Cuando revises una página web que ya se adapta a móviles, enfócate en la forma cómo los usuarios interactúan con ella. Utiliza métricas como el promedio de tiempo en el sitio, número de páginas por visita y embudos de orientación específica para estimar los beneficios que podría ofrecer a los visitantes un primer rediseño móvil.

guia de diseño web para dispositivos móviles

 

En un ordenador, es fácil olvidar que las huellas son mucho menos precisas que los cursores y por lo tanto es necesario contar con grandes objetivos táctiles. La mayoría de los diseñadores consideran pasado de moda el diseño de pliegues, de modo que preocúpate por que los objetivos táctiles sean lo suficientemente grandes como para golpear y navegar sin problema, en lugar de mantener el contenido “en primer pantallazo” en el caso de móviles.

 

Por otro lado, los usuarios tampoco esperarán mucho a que cargue una página. De hecho, el 45 por ciento cree que este proceso debe demorar entre dos a tres segundos. Si tu página web no carga como la velocidad de un rayo, entonces lo más probable es que los visitantes salgan de ella mucho más rápido. Toma esto  en cuenta cuando consideres utilizar imágenes de gran tamaño, así como cualquier activo multimedia en general.

 

Optimizar cada aspecto de tu página web garantizará la mejor experiencia de usuario posible. No le hagas el trabajo más difícil al usuario. Para ayudarles a sacar el máximo provecho a tu presencia móvil, sigue estas cinco directrices:

 

  1. Planifica teniendo en cuenta una pantalla pequeña: Asegúrate que las tipografías que elijas sean legibles en las pantallas de los dispositivos móviles en los tamaños que pretendes utilizar. Planifica diseños de contenidos entorno a lo móvil, y considera tanto la orientación vertical y horizontal para la página web y aplicaciones. Lo más importante, no abrumes a los usuarios con textos en pequeñas interfaces.
  2. Diseña en resoluciones que las personas puedan usar: Diseña visuales con relaciones de aspecto y dimensiones de pixel que estén alineadas a la plataforma que se planea utilizar. Si el lienzo del diseño coincide con la visualización final, y de forma regular verificas tu trabajo en tamaños realistas, es más probable que termines con un diseño móvil óptimo. Asegúrate de tener en cuenta los elementos estándares de la interfaz de usuario del navegador móvil (barras con información del dispositivo, barras de título de la ventana de navegación del explorador, barras de desplazamiento y superposiciones de teclado).

guía de diseño web para dispositivos móviles

 

  1. Prototipo y prueba en dispositivos reales: Utiliza un código actual en dispositivos y emuladores de pruebas para comprobar los navegadores principales de tu público objetivo. Prueba los elementos esenciales de la interfaz de usuario como el desplazamiento, arrastrado, y cualquier otra interfaz avanzada para asegurarte de que funcionen como se desea. También puedes mostrar diseños interactivos a tu equipo de trabajo o clientes para que ayuden a identificar los problemas comunes en pantallas pequeñas. Las pruebas automatizadas son una herramienta útil para muchas aplicaciones de mayor tamaño, pero muchas soluciones automatizadas no podrán responder definitivamente si la experiencia de usuario es o no aceptable en un dispositivo móvil. Ahí es donde la prueba y análisis del manual de usabilidad entran juego. Las herramientas de diseño como Adove Preview CC, Sketch y Sakala Preview permiten previsualizar proyectos de diseño para dispositivos móviles durante el proceso de diseño.
  1. Prestar atención a los análisis: Monitorea el viaje del usuario durante todo el proceso de desarrollo (y después de que esté completa). Los clientes quieren maneras cuantitativas de ver el éxito de un proyecto, por lo que es recomendable construir una analítica antes de que llegue el momento de poner en marcha la página web. Existen herramientas como Google’s in-Page Analytics, así como visualizaciones de mapa de actividad que muestran cuánto tiempo pasan los visitantes en métricas para mejorar aún más la experiencia de usuario.
  2. Diseño interactivo: Siendo más específicos, diseña, desarrolla y prueba una página web a  través de ciclos iterativos y espera a que las características cambien.

 

A medida que lo dispositivos móviles comienzan a ganar impulso, los diseñadores necesitan estar al tanto de los desafíos únicos que enfrentan los usuarios y crear páginas que sean intuitivas, no interruptoras. La experiencia de usuario debe ser el corazón de toda una página web y la aplicación de diseño, sea móvil o no.

guia de diseño web para dispositivos moviles4

Las agencias de diseño web y marketing digital que realmente valoran la experiencia de usuario utilizan esto para reforzar la ventaja competitiva de ellos mismos como los que ofrecen el servicio así como la de sus clientes. Cuando los usuarios puedan experimentar de forma efectiva un sitio web en cualquier dispositivo, sin diseños de escritorio distorsionados y una navegación de sitio frustrante, accederán a la oferta de forma rápida.

 

Deja un comentario