Navegación en dispositivos móviles

Explicamos algunos de los aspectos más relevantes a considerar para facilitiar la navegación de nuestro sitio en dispositivos móviles

La forma en que las persona están buscando y accediendo al contenido en Internet está evolucionado, en la actualidad más de la mitad de las visitas que realizan los usuarios a los sitios web se hacen a través de algún tipo de dispositivo móvil, llegando incluso a superar en gran escala al uso de los ordenadores de escritorio y portátiles en algunos sectores y mercados definidos por región.

Factores como el tamaño del equipo, el uso de recursos, la compatibilidad de los sistemas y sobre todo las dimensiones de la pantalla, marcan esa diferencia necesaria para que el diseñador web se preocupe más por buscar alternativas al manejo de datos, su estructuración y presentación en un sitio.

Además la tecnología avanza a pasos agigantados, y es importante conocer también el soporte físico desde donde accede el usuario, temas como las características de la pantalla, los botones físicos o los sensores táctiles, son importantes a la hora de diseñar la navegación.

Es por esta razón que el diseño web se ha centrado y orientado más a la realización de tareas, haciendo necesaria la idea de replantearse aspectos básicos del desarrollo de una página, siendo uno de estos la navegación a través de menús.

Adaptar el diseño al entorno

Al momento de estructurar los elementos que propiciarán la navegación en un sitio web, lo ideal sería que el diseñador evaluará cada uno de los dispositivos disponibles mediante los cuales su aplicación o portal será visualizado. De esta manera podría tener en consideración los distintos factores de ambiente que pueden influir positiva o negativamente en dicha visualización, y por lo tanto en la experiencia del usuario.

Así como un arquitecto no define exactamente el mismo diseño de edificio para cada construcción que realiza, por los distintos factores y elementos que pueden llegar a existir en el ambiente del lugar donde se llevará la obra, un diseñador web debería considerar todas las oportunidades y limitaciones que un entorno móvil le proporciona, para que de esa manera pueda crear una navegación más fácil y sencilla, la cual promocione una mejor usabilidad.

Es por ello que debemos buscar alternativas para solucionar esta situación, y una de estas es el diseño adaptable, utilizando CSS media queries, medidas con porcentajes y contenido flexible. Al aplicar el diseño adaptable a un sitio web, debemos considerar una serie de prácticas recomendadas para obtener un mejor código, en este artículo vamos a exponer algunas de ellas.

Navegación en pantallas pequeñas

Los diseñadores web saben que los usuarios que acceden a un sitio mediante algún equipo móvil, se van a comportar de manera distinta que cuando lo hacen mediante un ordenador.

El espacio juega un papel muy relevante en esta diferencia, cuando una persona visita un sitio en un ordenador no le molesta navegar a través de grandes menús desplegables con ramificaciones que se extienden a lo largo del ancho de la pantalla, pero cuando se ingresa por un móvil el uso excesivo de espacio por parte del diseño puede resultar en frustraciones.

Encontrar espacio para que la navegación se lleve correctamente en una pantalla pequeña puede resultar en un proceso complicado, pero con un poco de planeación y realizando un diseño meticuloso, se puede lograr adaptar correctamente los elementos y obtener una buena navegación móvil.

Reduce el número de botones

Cuando se esta trabajando con un sitio nuevo la depuración de acciones se puede realizar de manera más sencilla, pero si estamos rediseñando un sitio ya existente para que se adapte y funcione en dispositivos móviles, quizás nos cueste más y terminemos pasando horas pensando en la forma adecuada de hacerlo. En estas situación la reducción de botones puede tornarse difícil ya que el diseño original generalmente cuenta con más de cinco botones, vínculos o llamadas de acción.

Reduce el número de acciones

Mientras menos sean los eventos de toque o clics necesarios para que el usuario encuentre lo que busca, la experiencia de éste será mejor. Es muy fácil cometer un error al momento de utilizar los dedos para navegar, por ello debes tratar de no forzar mucho al usuario y llevarlo al extremo pidiendo demasiadas acciones.

Si el usario llega a algún lugar inesperado, no le compliques el proceso para que regrese al lugar que él desea. Trata siempre de incluir un botón de retroceso, esto permitirá al usuario regresar a la pantalla anterior inmediata, recuerda que al diseñar para móvil una de nuestras principales misiones es evitar frustrar al usuario.

Evita el constante desplazamiento

Debes pensar bien que categorías y acciones son las más importantes para el proceso de tu sitio, de esa manera podrás colocar una sección especial la cual enmarque cada una de éstas.

Recuerda que los dispositivos móviles tienen diferentes tamaños de pantalla y si no pensamos cuidadosamente acerca de la importancia de cada categoría que desplegamos, los usuarios de teléfonos con pantallas muy pequeñas terminarán bastante frustrados al tener que estarse desplazando constantemente para poder acceder a lo que buscan.

Utiliza botones de forma vertical

Los usuarios móviles ven tu sitio de manera vertical, por lo que debemos adaptar la navegación para que funcione con esta vista. Siempre que diseñes algo para móvil trata de que se pueda leer de arriba hacia abajo en vez de izquierda a derecha, esto funciona mejor para los sitios que tenen más de cinco categorías en sus menús.

Usa menús anidados

Como el objetivo es tener el menor número de botones posible, se puede optar por utilizar menús anidados para presentar las acciones o enlaces que tengan menos valor para el sitio, de esa manera dentro de nuestros cinco botones en la interfaz inmediata, presentaremos sólo las acciones que consideremos más importantes para que el usuario las realice.