Mejores prácticas 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 vendrán de dispositivos móviles en lugar de computadoras de escritorio o computadoras portátiles.
No solo está cambiando el medio de acceso 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. cada vez más centrado y orientado a las tareas.
Los propietarios de teléfonos inteligentes de hoy en día usan sus teléfonos para realizar tareas específicas, como verificar ubicaciones de destinos, horarios de transporte público y saldos bancarios. Si bien la navegación por Internet en los dispositivos de mano ocurre (especialmente cuando te encuentras en largas filas o esperando un autobús), muchas personas prefieren navegar por la web desde la comodidad de su hogar u oficina.
El espacio de la pantalla está limitado en los dispositivos de mano, y los usuarios de dispositivos móviles están ocupados, a menudo realizando múltiples tareas mientras buscan información en línea con un dedo o con el pulgar.
Por estas razones, la navegación del 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 los 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?
Compuware Estudio de 2011 Lo que los usuarios quieren de Mobile descubrió que el 95% de los usuarios buscaba información local con sus teléfonos inteligentes o dispositivos portátiles. Por lo tanto, sería una buena práctica para las empresas de ladrillos y mortero mostrar la navegación a su ubicación, horas e información de contacto prominente en sitios móviles.
Póngase 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 los usuarios buscan y seleccione nombres de categoría que reflejen las búsquedas más comunes.
Si se trata de un sitio móvil para un negocio de ladrillos y mortero, muestre un botón de ubicación e información de contacto prominente.
Siempre puede agregar un enlace para "visitar nuestro sitio web" y los verdaderamente interesados pueden ver una versión más elaborada del sitio móvil en la comodidad de su oficina o en su casa con su computadora portátil.
7 Para que toda la humanidad conozca a sus usuarios.
Diseñando para un ambiente diferente
Además de los parámetros y las distracciones del entorno externo, los diseñadores web también deben evaluar los dispositivos al diseñar los elementos de navegación.
Un arquitecto no defiende exactamente el mismo diseño de construcción 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 útil 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 puede abordarse utilizando herramientas de diseño receptivas, como consultas de medios de CSS para abordar problemas de ubicación, tamaño y contenido adaptable. Ya sea que diseñe un nuevo sitio móvil con un diseño receptivo o adapte un sitio existente para dispositivos móviles, todavía existen ciertas prácticas recomendadas 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 de dispositivos móviles se comportan de forma 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 se puede lograr el diseño de navegación móvil.
Con solo cuatro botones de navegación y el número de reserva gratuita que se muestra en forma destacada, el sitio móvil de Loews Hotels es fácil de usar y fácil de usar.
Práctica recomendada 1: reducir el número de botones de menú
Esto puede ser complicado cuando se diseña una versión optimizada para dispositivos móviles de un sitio web existente, particularmente uno que tiene muchos enlaces en el diseño del escritorio. Limite los botones de navegación principales a cinco o menos, agregando menús anidados si es necesario.
Mejor práctica 2: reducir el número de toques
Mantenga el número de acciones que se realizarán en un dispositivo móvil al mínimo. Cuantos menos clics y clics encuentre lo que el usuario busca, mejor. Es muy fácil cometer un error. Siempre incluya un botón de retroceso fácil de encontrar: no desea frustrar aún más al usuario.
Mejor práctica 3: desplazamiento de navegación
Mantenga los elementos de navegación más cruciales en la parte superior. Los dispositivos móviles tienen diferentes tamaños de pantalla, así que piense detenidamente sobre la importancia de cada categoría, ya que los que están más abajo en la lista pueden necesitar desplazarse por los teléfonos inteligentes con menos espacio en la pantalla.
Mejor práctica 4: botones apilables
Los usuarios de dispositivos móviles ven su sitio en vertical en lugar de horizontal como lo hacen en un escritorio. Adapte su navegación para la web móvil presentándola verticalmente. Leer en lugar de cruzar Esto funciona mejor para sitios con no más de cinco categorías en el menú, y cuando es poco probable se agregarán más categorías.
Mejor práctica 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 pequeños botones
Las pantallas táctiles y los botones pequeños significan nuevas consideraciones para los diseñadores web. Los usuarios de dispositivos móviles no tienen el lujo de tener un mouse en el que se pueda hacer clic para identificar un pequeño botón o enlace de menú. Están a merced de sus dedos y pulgares, lo que significa que apuntan a áreas en la pantalla con mucha menos precisión que si estuvieran usando un mouse, y pueden frustrarse fácilmente si su golpeteo no está dando 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 de menú o reemplazando los enlaces por botones para las categorías de menú.
Hacerlo más grande hace que sea más fácil encontrar un área rápidamente y hacer clic con un pequeño botón del teléfono, o tocarlo con el dedo o el pulgar. Como el dedo promedio requiere un área seleccionable de al menos 44px x 44px, esto puede provocar que los botones y las áreas de navegación eclipsen el resto del contenido de la pantalla. Sin embargo, esto puede ser adecuado para el 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 que el usuario de la pantalla táctil haga que el botón de navegación sea más grande si es necesario.
Consejos para la optimización
- Establezca el menú en la parte superior o inferior de la pantalla, según el objetivo principal de los usuarios del sitio. Si están buscando contenido y es probable que se desplace, al poner el menú en la parte inferior les da otro lugar para ir a 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 corta y ancha es hermoso. La navegación corta y amplia 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 del encabezado o reemplácelas por completo con un logotipo más pequeño para aumentar el espacio para la navegación.
- Mantenga la coherencia y los problemas de diseño consistentes prestando atención a la tipografía, el color y el estilo de los botones de navegación, en lugar de usar un espacio valioso con gráficos e imágenes de gran tamaño.
- Reduce el texto, especialmente en los botones de menú y títulos de categoría. 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.
- Simplifica tanto como sea posible. Elimine todo lo posible de la página de inicio para centrarse en proporcionar solo los primeros artículos que la mayoría de los usuarios desean.
Navegación móvil no-nos
Los usuarios de dispositivos móviles están ocupados, distraídos y en movimiento. No quieren variedad en la elección de qué botones elegir y no desea que se frustren y abandonen el sitio debido a la parálisis del análisis.
No les dé mucha opción.
¡Evita el desplazamiento horizontal y no te acerques! Los menús deslizantes también pueden ser frustrantes para los usuarios de dispositivos móviles. En su búsqueda para simplificar y agilizar la navegación, no piense que debe ser aburrido. La navegación creativa no es mala, pero debe ser intuitiva. El usuario debería poder ver fácilmente dó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 evoluciona constantemente a medida que se prueban, se modifican o se descartan por completo 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 el usuario busca 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 para su dentista o estilista.
Si bien los elementos de navegación para un sitio web móvil pueden diferir 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 gran navegación lleva a los usuarios a las respuestas rápida y simplemente.
Satisfaga sus necesidades inmediatas y regresarán, aumentando el tráfico hacia el 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 la navegación móvil prefieres como diseñador? ¿Qué tal como un usuario? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de internet móvil a través de Shutterstock.