Prácticas recomendadas para la navegación en la Web móvil

La forma en que las personas acceden a la información en línea está evolucionando. Google informa que para el próximo año (2013) más de la mitad de las visitas al sitio web provendrán de dispositivos móviles en lugar de computadoras de escritorio o portátiles.

No solo está cambiando el medio para acceder a la web, también están cambiando las necesidades de la mayoría de los usuarios móviles que se conectan en línea con su teléfono inteligente o dispositivo de mano; volviéndose más centrado y orientado a las tareas.

Los propietarios de teléfonos inteligentes de hoy usan sus teléfonos para realizar tareas específicas, como verificar la ubicación de los destinos, los horarios de transporte público y los saldos bancarios. Si bien la navegación por Internet en dispositivos portátiles ocurre (especialmente cuando se hacen filas muy largas o esperan un autobús), muchas personas prefieren navegar por Internet desde la comodidad de su hogar u oficina.

El espacio de la pantalla es limitado en los dispositivos portátiles y los usuarios móviles están ocupados, a menudo realizando múltiples tareas mientras buscan información en línea con un pulgar o un dedo.

Por estas razones, la navegación en un sitio móvil es incluso más crucial que la navegación en un sitio web tradicional. Comprender las preguntas y necesidades del visitante típico del sitio, las limitaciones de su dispositivo y lo que lo frustrará es crucial para un diseño de navegación efectivo en un sitio móvil.

¿Qué preguntan los usuarios de dispositivos móviles cuando se conectan a Internet?

Compuwareestudio de 2011 Lo que los usuarios quieren de los dispositivos móviles descubrió que el 95% de los usuarios buscaban información local con sus teléfonos inteligentes o dispositivos portátiles. Por lo tanto, sería una buena práctica para las empresas físicas presentar la navegación a su ubicación, horario e información de contacto de manera prominente en sitios móviles.

Ponte en la piel del usuario típico del sitio. Eche un vistazo a los análisis del tráfico móvil. Elija las tres o cuatro categorías principales que buscan los usuarios y seleccione nombres de categorías que reflejen las búsquedas más comunes.

Si se trata de un sitio móvil para una empresa física, muestre un botón para la ubicación y la información de contacto en un lugar destacado.

Siempre puede agregar un enlace para «visitar nuestro sitio web» y los realmente interesados ​​pueden ver una versión más elaborada del sitio móvil en la comodidad de su oficina o en casa con su computadora portátil.

7 Porque toda la humanidad conoce a sus usuarios.

Diseñar para un entorno diferente

Además de los parámetros y distracciones del entorno externo, los diseñadores web también deben evaluar los propios dispositivos al diseñar elementos de navegación.

Un arquitecto no abogaría exactamente por el mismo diseño de edificio para el medio de la ciudad, el desierto o el bosque, un buen diseñador web considera las oportunidades y limitaciones del entorno móvil para crear la navegación más utilizable para la movilidad.

El problema, por supuesto, es que el diseñador no sabe qué dispositivo tiene el usuario final cuando visita el sitio, una situación que se puede abordar utilizando herramientas de diseño receptivo como consultas de medios CSS para abordar problemas de ubicación, tamaño y contenido adaptable. Ya sea que esté diseñando un nuevo sitio móvil con un diseño receptivo o adaptando un sitio existente para dispositivos móviles, todavía existen ciertas mejores prácticas que son válidas para la navegación.

Menús de navegación para la pantalla pequeña

Los diseñadores web saben que los usuarios móviles se comportan de manera diferente cuando acceden a la web en sus teléfonos inteligentes y dispositivos portátiles que en sus computadoras de escritorio o portátiles. Encontrar espacio para la navegación en una pantalla pequeña puede ser complicado, pero con un poco de planificación cuidadosa, el diseño de la navegación móvil es posible.

Con solo cuatro botones de navegación y el número de reserva gratuito que se muestra en un lugar destacado, el sitio móvil de Loews Hotels es fácil de usar y de navegar.

Práctica recomendada 1: reduzca la cantidad de botones de menú

Esto puede ser complicado cuando se diseña una versión compatible con dispositivos móviles de un sitio web existente, en particular uno que tiene muchos enlaces en el diseño del escritorio. Limite sus botones de navegación principales a cinco o menos, agregando menús anidados si es necesario.

Práctica recomendada 2: reducir el número de toques

Mantenga al mínimo el número de acciones a realizar en un dispositivo móvil. Cuantos menos toques y clics para encontrar lo que el usuario busca, mejor. Es demasiado fácil equivocarse. Incluya siempre un botón de retroceso fácil de encontrar: no quiere frustrar más al usuario.

Práctica recomendada 3: navegación con desplazamiento

Mantenga los elementos de navegación más importantes en la parte superior. Los dispositivos móviles tienen diferentes tamaños de pantalla, así que piense detenidamente en la importancia de cada categoría, ya que las que están más abajo en la lista pueden requerir desplazarse en teléfonos inteligentes con menos espacio de pantalla.

Práctica recomendada 4: botones apilables

Los usuarios de dispositivos móviles ven su sitio en formato vertical en lugar de horizontal como lo hacen en un escritorio. Adapte su navegación para la web móvil presentándola verticalmente. Lea hacia abajo en lugar de a través. Esto funciona mejor para sitios con no más de cinco categorías en el menú y cuando es poco probable que se agreguen más categorías.

Práctica recomendada 5: menú anidado

A veces conocida como navegación plegable, esta es una buena opción para los sitios que requieren contenido en la pantalla, así como un menú, y aquellos que esperan agregar categorías y elementos de menú.

Optimización de la navegación de movilidad para pantallas táctiles y botones diminutos

Las pantallas táctiles y los botones diminutos implican nuevas consideraciones para los diseñadores web. Los usuarios de dispositivos móviles no pueden darse el lujo de un mouse en el que se pueda hacer clic para señalar un pequeño botón de menú o enlace. Están a merced de sus dedos y pulgares, lo que significa que están apuntando a áreas en la pantalla con mucha menos precisión que si estuvieran usando un mouse, y pueden frustrarse fácilmente si sus toques no producen resultados inmediatos.

Los diseñadores web pueden facilitar la navegación a los usuarios de dispositivos móviles agregando más espacio alrededor de los enlaces del menú o reemplazando los enlaces con botones para las categorías del menú.

Al hacerlo más grande, es más fácil encontrar un área rápidamente y hacer clic en él con un pequeño botón del teléfono, o tocarlo con el dedo o el pulgar. Como el dedo medio requiere un área en la que se puede hacer clic de al menos 44 px x 44 px, esto puede resultar en que los botones y las áreas de navegación eclipsen el resto del contenido en la pantalla. Sin embargo, esto puede adaptarse al propósito del sitio web y del usuario, especialmente si el contenido de la página de inicio es secundario a los elementos principales del menú.

Idealmente, el diseño debería permitir al usuario de la pantalla táctil agrandar el botón de navegación si es necesario.

Consejos para la optimización

• Configure el menú en la parte superior o inferior de la pantalla, según el propósito principal de los usuarios del sitio. Si están buscando contenido y es probable que se desplacen, poner el menú en la parte inferior les da otro lugar al que ir en su sitio en lugar de dejar el sitio para un motor de búsqueda o un sitio de la competencia.
• Oculte parcialmente el menú para acomodar otro contenido en la pantalla, revelando el menú completo cuando los usuarios lo toquen. Esto mantiene el menú al frente y al centro sin borrar el contenido útil.
• Coloque un enlace de menú en la parte superior de la pantalla y agregue un botón de navegación en la parte inferior.
• Alto y delgado puede ser ideal para supermodelos, pero en la navegación web móvil, lo corto y ancho es hermoso. La navegación amplia y corta también ayuda cuando tiene títulos de categoría más largos: el texto se ajusta mejor.
• Reduzca la altura de las imágenes de encabezado o reemplácelas por un logotipo más pequeño para aumentar el espacio de navegación.
• Mantenga los problemas de marca y diseño consistentes prestando atención a la tipografía, el color y el estilo de los botones de navegación en lugar de utilizar un espacio valioso con gráficos e imágenes de gran tamaño.
• Acorte el texto, especialmente en botones de menú y títulos de categorías. En algunos casos, esto es extremadamente difícil y un menú apilable con espacio para más texto en cada línea es una alternativa preferible.
• Simplifique lo más posible. Elimine todo lo posible de la página de inicio para centrarse en proporcionar solo los pocos elementos principales que la mayoría de los usuarios desean.

No-nos de navegación móvil

Los usuarios móviles están ocupados, distraídos y en movimiento. No quieren variedad en la elección de qué botones elegir y no quiere que se frustren y abandonen el sitio debido a la parálisis del análisis.

No les dé muchas opciones.

¡Evite el desplazamiento horizontal y no flotar! Los menús deslizantes también pueden resultar frustrantes para los usuarios de dispositivos móviles. En su búsqueda por simplificar y agilizar la navegación, no crea que tiene que ser aburrido. La navegación creativa no es mala, pero debe ser intuitiva. El usuario debe poder ver fácilmente adónde ir para encontrar la información que desea rápidamente.

Conclusión

La relativa novedad de los dispositivos móviles como método de acceso a la web significa que la navegación móvil está en constante evolución a medida que se prueban, modifican o descartan diferentes diseños.

Lo que funciona para un conjunto de usuarios en un sitio puede ser un desastre con un sitio diferente, ya que la información que busca el usuario es completamente diferente. Además, el mismo usuario se acerca a diferentes sitios con diferentes propósitos: un usuario móvil que mira un sitio web de noticias en su teléfono probablemente quiere titulares, no información de contacto; que es precisamente lo que quiere cuando visita el sitio móvil de su dentista o peluquero.

Si bien los elementos de navegación de un sitio web móvil pueden diferir de los de un sitio web tradicional, el propósito es el mismo: los visitantes de la web tienen una pregunta cuando se conectan. ¿Donde esta la tienda? ¿Qué está pasando en el mundo? ¿Cuál es el saldo de mi cuenta bancaria? La excelente navegación lleva a los usuarios a las respuestas de forma rápida y sencilla.

Satisfaga sus necesidades inmediatas y volverán, aumentando el tráfico al sitio web, haciendo felices a sus clientes y generando referencias y más negocios de diseño web móvil para usted.

¿Qué enfoques de navegación móvil prefiere como diseñador? ¿Qué tal como usuario? Háznoslo saber en los comentarios.

Imagen destacada / miniatura, imagen de internet móvil a través de Shutterstock.