Krypton Solid

Un menú pegajoso es más rápido de navegar – Smashing Magazine

Un menú pegajoso es más rápido de navegar – Smashing Magazine

La mayoría de los diseñadores estarían de acuerdo en que la navegación es uno de los componentes más críticos de un sitio web. A pesar de esto, no siempre es fácil de usar o acceder. Tradicionalmente, los usuarios deben volver a la parte superior del sitio web para acceder al menú de navegación. Recientemente me pregunté si los menús adhesivos hacen que los sitios web sean más rápidos de navegar y realicé un estudio de usabilidad para encontrar la respuesta.

La mayoría de los diseñadores estarían de acuerdo en que la navegación es uno de los componentes más críticos de un sitio web. A pesar de esto, no siempre es fácil de usar o acceder. Tradicionalmente, los usuarios deben volver a la parte superior del sitio web para acceder al menú de navegación. Recientemente me pregunté si los menús adhesivos hacen que los sitios web sean más rápidos de navegar y realicé un estudio de usabilidad para encontrar la respuesta. Veamos los resultados del estudio, algunas técnicas de implementación y algunos desafíos relacionados.

La navegación fija o fija es básicamente un menú de un sitio web que está bloqueado en su lugar para que no desaparezca cuando el usuario se desplaza hacia abajo en la página.

En otras palabras, es accesible desde cualquier lugar del sitio web sin tener que desplazarse. Aunque la navegación fija se puede aplicar a cualquier menú, como el pie de página o los botones de redes sociales, nos centraremos en la navegación principal (o primaria) de un sitio web. La siguiente imagen muestra la diferencia entre la navegación estándar y fija en un dispositivo móvil.

Otras lecturas en SmashingMag:

Estudio de usabilidad

Condiciones de investigación

Para el estudio, creé dos sitios web de prueba que eran casi idénticos. La única diferencia era que uno de ellos tenía navegación estándar y el otro tenía navegación fija. Se midió el tiempo de cuarenta participantes para completar cinco tareas en el primer sitio web. Luego se les pidió que completaran cinco tareas diferentes en el segundo sitio web. El orden de las tareas se alteró entre usuarios para equilibrar el factor de familiaridad. Los sitios web se probaron en máquinas de escritorio y no se les dijo a los participantes las diferencias entre los sitios web hasta el final de su sesión. Los datos no se analizaron hasta que se completaron las pruebas. Los resultados del estudio arrojaron dos conclusiones interesantes.

Navegación estándar Vs Sticky

Los datos del estudio indicaron que los participantes pudieron encontrar lo que buscaban más rápido cuando no tuvieron que desplazarse hacia la parte superior de la página. Puede que el 22% no parezca un gran número, pero puede tener un gran impacto en los visitantes. Según estos datos, la navegación fija podría reducir 36 segundos de una visita de cinco minutos a un sitio web. Por supuesto, mantener a los visitantes en la página por más tiempo es solo un beneficio si está mejorando la experiencia del usuario junto con ella. Obligar a las personas a buscar en un sitio web para encontrar algo no califica como tal.

Al final de cada sesión, se preguntó a los usuarios si notaron la diferencia entre las dos interfaces de usuario. Nadie pudo identificarlo. Los cambios fueron sutiles y ninguno de los usuarios se dio cuenta porque estaban concentrados en completar sus tareas. Luego se preguntó a los participantes si uno de los sitios web se sentía más fácil de usar. Seis de los 40 participantes no tenían ninguna preferencia, pero de los 34 que sí tenían una preferencia, el 100% de ellos indicó que el sitio web con la navegación fija era más fácil o más rápido de usar. Se hicieron muchos comentarios en esta línea, como «No sé en qué se diferencian los sitios web, pero sentí que estaba pasando mucho menos tiempo haciendo clic con el primero». Tales comentarios indicaron un favor abrumador por la navegación pegajosa.

Imagínese escribir un documento en Microsoft Word y tener que desplazarse hasta la parte superior de la primera página cada vez que desee poner una palabra en negrita o ampliar los márgenes. Solo pensar en eso suena frustrante. La mayoría del software de escritorio proporciona acceso a todo el menú de navegación sin importar lo que esté haciendo en la aplicación. El navegador web no es diferente; nos resultaría ridículo tener que desplazarse hasta la parte superior de un sitio web para acceder a la barra de direcciones de un navegador.

Algunos buenos ejemplos

Facebook y Google+ adoptaron recientemente la navegación fija, pero se encuentran entre la minoría. De El 25 sitios web más visitados en EE. UU., solo el 16% tiene actualmente navegación pegajosa. A continuación se muestran algunos ejemplos de otros sitios web que hacen un excelente trabajo para lograrlo.

Software efervescente
Este es un ejemplo perfecto de navegación fija horizontal en la parte superior. Todo se siente cómodo mientras usa el sitio web.

Navegación por software efervescente

Appers web
La navegación aquí es vertical y a la izquierda, algo parecido a la navegación de Google +. El único inconveniente aquí es que si la altura de la pantalla es inferior a 560 píxeles, la parte inferior del menú podría volverse inaccesible, como sucedió cuando probé el sitio web en una netbook.

Navegación de Web Appers

MakeBetterApps
Aquí hay otro gran ejemplo. Hacer que la navegación sea un poco transparente, dando una pista del contenido debajo, es un buen toque.

Mejorar la navegación de aplicaciones

Rodolphe Celestin
Esta navegación pegajosa se extiende por toda la parte superior, pero cuando se desplaza hacia abajo en la página, el diseño del menú cambia ligeramente. Simplificar el diseño de esta manera puede ser una buena técnica, siempre y cuando no se sienta inconsistente. Además, el diseñador ha adoptado un enfoque cada vez más popular al hacer que todo el sitio web sea una sola página; los enlaces del menú son anclajes que lo empujan hacia abajo en la página. Algunas transiciones agradables y efectos de desplazamiento hacen que este sitio web sea agradable de usar.

Navegación Rodolphe Celestin

Ryan Scherf
La navegación en este sitio web es vertical y solo iconos. La creatividad aquí es impresionante.

Navegación Ryan Scherf

Muro del diseñador web
La navegación vertical pegajosa funciona bien en este sitio web porque el menú tiene solo cuatro elementos. Esto funciona lo suficientemente bien para los blogs que me pregunto por qué otros no adoptan este enfoque.

Navegación por la pared del diseñador web

Si bien los menús fijos no son la forma de navegación más popular, cada vez más más ejemplos están apareciendo todo el tiempo.

Empezando

Evite iFrames

Esto puede parecer una forma sencilla de implementar la navegación pegajosa, pero evite este método. Los iFrames causan más problemas de los que resuelven, particularmente con la compatibilidad entre navegadores, la seguridad y la optimización de motores de búsqueda. Los iFrames tienen su lugar, pero no deberían ser una parte importante de su diseño HTML.

CSS

CSS es una excelente manera de implementar la navegación fija. También parece ser el más sencillo, ligero y rápido de codificar. Las tres cosas a las que hay que prestar atención son position, margin-top y z-index. Configuración del menú position a fixed desactiva el elemento para que no se desplace con el resto de la página. Esto probablemente alterará sus márgenes si su navegación es horizontal, por lo que querrá ajustar eso. Finalmente, use z-index con un menú horizontal para asegurarse de que la navegación esté encima de todo; esto hará que el resto del contenido se deslice debajo de la navegación a medida que se desplaza. Aquí está la idea general:

#navigation {
   position: fixed;
   z-index: 10;
}

#header {
   margin-top: 50px;
}

Tendrá que jugar con el CSS para que esta técnica funcione correctamente en su sitio web. La información adicional puede se puede encontrar en el sitio web del W3C.

jQuery y JavaScript

Navegación inteligente con barra adhesiva
La barra de navegación simple e inteligente es una de las muchas buenas implementaciones de JavaScript.

Si prefiere una solución jQuery o JavaScript a una CSS, puede probar una de las siguientes opciones:

Existen muchas otras soluciones y scripts. Incluya sus favoritos en los comentarios a continuación.

¿Cuáles son las malas noticias?

Dame las malas noticias

Existen muchas opiniones sobre este tema, y ​​algunos argumentarían que la navegación fija no vale la pena. Aquí hay algunas cosas que debe tener en cuenta.

Limitaciones de diseño

La navegación fija podría descartar algunas opciones de diseño a las que su equipo podría no estar dispuesto a renunciar. Por ejemplo, el lugar más lógico para la navegación fija horizontal sería en la parte superior de la página, por encima de todo lo demás. Si bien es fácil de implementar, es posible que no sea lo que necesitan sus usuarios.

Distractor e intrusivo

Si no se hace con cuidado, la navegación pegajosa puede distraer. Algunos elementos adhesivos se retrasan cuando vuelven a su posición cuando el usuario se desplaza hacia abajo en la página. Otros son tan altos o anchos que dominan el diseño e impiden el acceso al contenido. La navegación debe ser de fácil acceso, pero no debe competir con el contenido para llamar la atención.

Compatibilidad móvil

El CSS de posición fija y ciertas implementaciones de JavaScript carecen de soporte en algunos navegadores móviles, lo que es motivo de preocupación entre algunos desarrolladores. El artículo «Organizar el móvil”De Luke Wroblewski tiene algunos principios importantes a tener en cuenta al crear la navegación para dispositivos móviles. Las técnicas de diseño receptivo también ofrecen algunas soluciones para ajustar la navegación en función del tamaño de la pantalla.

Tenga en cuenta el nivel de soporte que ofrece cada dispositivo. Conocer los problemas de compatibilidad de antemano le ahorrará tiempo al final. ¿Cuándo puedo usarlo? tiene información interesante sobre el soporte para position: fixed. Brad Frost también ha hecho algunos de los suyos. pruebas y análisis, proporcionando una idea interesante en su acompañamiento video.

¿Por qué los diseñadores y desarrolladores web continuamente obligamos a nuestros usuarios a desplazarse hacia arriba y hacia abajo en la página en busca de la navegación? Esto no es un problema en el software de escritorio, y ahora tenemos las estadísticas para mostrar los beneficios de los menús fijos. Navegación en el 84% de la los 25 sitios web estadounidenses más visitados podría hacerse más rápido mediante la implementación de la navegación fija.

Por supuesto, no es apropiado en todas las situaciones, especialmente cuando la propiedad inmobiliaria es escasa. Pero considere seriamente la navegación pegajosa, teniendo siempre en cuenta la usabilidad y la experiencia general del usuario.

Deja un comentario