La barra de menu y las nuevas tendencias

La barra de menu es una de las partes más importantes de el diseño web, sirva para muchas cosas y lo más importante nos ayuda a encontrar todo de forma rápida y ágil

A estas alturas sé que hay muchos blogs que no tienen barra de menu y cometen un error, porque si no cuentan con un buen widget buscador… es muy complicado que los lectores pasen horas navegando por la web.

Lo que queda claro que la barra de menú es un elemento que bien diseñado mejora la usabilidad web.

No tener barra de menú tiene efectos secundarios

Aumenta la tasa de rebote, ya que muchas veces es muy complicado acceder a otro post interesante.

• Disminuye el tiempo en página.
• Menos visitas ya que si no encontramos la categoría que nos gusta es complicado seguir navegando.
• Una barra de menú bien planteada es buena para el SEO

A estas alturas es un error de diseño no tener una barra de menú o al menos elementos que realicen su función

La barra de menú sirve para:

Mantener ordenadas las categorías de manera limpia

La barra de menú hace que cualquiera que llegue a tu blog en un vistazo sepa de qué trata, si puede ver las categorías desplegadas tendrá una idea clara de tu contenido.

Las barras de menú facilitan el poder navegar por las diferentes secciones o categorías de manera ligera.

Esto también se puede lograr con nubes de etiquetas aunque no son una práctica recomendable y el efecto es diferente

O con un mapa del sitio, imágenes de las categorías en la sidebar…

Llamar a la acción y destacar secciones importantes

A parte de mantener el orden se pueden usar los menús para destacar secciones y eventos dentro de él por ejemplo el contacto o la newsletter

Los menús a menudo contienen secciones de call to action que permiten que te registres, suscribas o que descargues material.

Hacer accesible la mayor parte del contenido del blog

A no ser de que tengas un gran buscador si alguien aterriza por primera vez en tu blog la barra de menu es la indicada de informar en un vistazo de qué se trata y lo que puede encontrar.

En la menubar puedes ubicar las páginas legales como la ley de Cookies, el quienes somos, contacto, avisos, media kit

Mantener la identidad del sitio

En la mayor parte de las barras de menú está el logo, por lo que es una pieza importante para el branding de tu blog, te parecerá una bobada… pero hay veces que tras visitar varios o veo el logo o me pierdo!

Veamos un poco la evolución de la barra de menú

En principio es un lugar dónde colocar los enlaces más relevantes de la web.

Hace tiempo eran espantosas como la que tiene Amazon para qué vamos a imaginar otra, más adelante los diseñadores web intentaron que se eliminase y empezaron a prescindir de ella.

Es cierto que a parte de que algunos diseñadores la odian ralentiza la carga de la página, como cualquier elemento que pongas, pero existió la moda de atiborrarlas a enlaces o tener 2 y hasta tres barras de menú una sobre la otra que ralentizaba.

Actualmente es un elemento que aparece en el diseño web sin problemas, ya sea tipo hamburguer, escamoteable o mega, se ha adaptado al diseño y ya no es un “añadido”.

Tendencias para la barra de Menú

Algunas tendencias sobre navegación llevan funcionando un tiempo pero les cuesta llegar al blogging porque el mercado de plantillas es enorme y por lo general nos centramos en las que conocemos mejor.

Menu Hamburguer

Este tipo de menú es el típico de los móviles pero ahora aparece en los websites con su versión escamoteable, esto hace que el header quede más limpio, que a nivel de usuario funcione bien en tu blog depende un poco de la madurez digital de tus lectores… no siempre lo entienden.

En esta web al tratarse de vídeo han decidido que fuese la mínima expresión

Mega Menú

Los Mega menú con fotos y con información extendida se imponen, aunque son un truño para la velocidad de carga resultan muy vistosos, cada vez albergan más elementos como mapas, localizadores, registros, vídeos…

Este mega menú pertenece a un tema de Themeforest que se llama Moose muy completo pero algo lento… creo que influye el megamenú con megafondo!

Colocar ofertas y call to action en la menu bar

Esto es normal si quieres facilitar que te contacten, además los que usan génesis tienen a huevo hacerlo porr el diseño del framework, ya sea el teléfono, una oferta o una promo, la barra de menú es el lugar más visible de una web y tiene mucha lógica si vemos un mapa de calor verás la cantidad de interacción que se centra en ella.

Este menú pertenece a un tema The Gem de themeforest

Segmentar desde el menú

Esto es habitual, seguro que lo has visto; cuándo se trata de ropa y por un lado está la de mujer y por otro la de hombre, esto va a ser tendencia no sólo por la segmentación por sexo sino por clientes – medios, Diseñadores – desarrolladores – colores, esto es para lograr una mejor experiencia y poder crear espacios web más envolventes acordes con la selección.

Esta web tan fina es de una bebida con alcohol y segmenta por edades

Menús minimalistas

Cada vez tendrán menos elementos, para algunos sitios el desplegar todo el árbol de categorías no es buena idea y te animan a buscar y a navegar por las páginas.

Esta web es tan minimalista que se aproxima más al brutalismo web de lo habitual

Fuera degradados y efectos… trasparente y fluido

Lejos quedan los años en los que tenían efectos y botones llamativos, la tendencia más común es el menú trasparente, ya que las Hero images y los sliders se ven mejor.

Los efectos de volumen quedan en los dosmiles

Tipografía legible

No hace falta que combine con la del blog, las tipografías que se están usando son sans serif, muy sencillas y en negrita o con un grosor que permita que se vean bien, atrás quedan las letras script y las clásicas Sherif que son preciosas impresas pero en la barra se apuesta más por el minimalismo, la legibilidad y usabilidad.

Si quieres ahondar en este post sobre cuales son las letras que mejor se leen

La tipografía de los blogs, letras para leer mejor.

Sólo logo

Esta es heredera de hamburguer pero el logo o un icono que despliegue las categorías importantes es una tendencia bastante clara.

Algunas de estas tendencias son complicadas de aplicar a los blogs porque dificultan la navegación pero otras son ideales, si aún no tienes barra de menú deberías ponerla.

Esta marca ha optado por la mínima expresión en barra de menú

Este tutorial para blogger explica como poner una barra de navegación fácil sin javascript 

Como hacer un menu desplegable en blogger sin usar javascript

Iconos

Si hay un icono en lugar de una palabra mejor, hace tiempo que no veo en un menú carro, cesta de la compra, ya aparece el carrito y todo el mundo sabemos que vamos al checkout.

Si puedes sustituir alguna categoría por iconos ganarás espacio y limpieza.

Tendencias obsoletas

Vamos a decir hasta nunqui a muchas cosas que seguro que te suenan, algunas seguirán en algún tipo de web pero para blogs de nueva creación no se van a usar demasiado.

Degradados, sombras, volumen…

Los efectos de bisel, volumen, sombras se van de la navegación, aparte de añadir css inútil quedaban feos y no se veían correctamente en algunos dispositivos, ahora la tendencia apuesta más por degradados y flat design dónde puede existir una pequeña sombra.

Un ejemplo de todo lo que no se lleva junto, ponte gafas de sol por tu seguridad! jajaja

Fondos bajo las letras

Si hubo una moda que era meter fondo o texturas a todo, podían ser líneas, puntos, mosaico hasta fotos! pero ya no se lleva porque no se lee bien y todo apunta hacía una línea más limpia.

Varias barras

Hay blogs que tienen hasta 3 barras de menú una encima de otra, eso va a desaparecer, si lo tienes estás ralentizando la carga y tus lectores si tienen problemas para encontrar lo que buscan aunque pongas 22 barras los seguirán teniendo, es mejor que envíes a un mapa del sitio o un directorio de entradas que tener ese elemento cargando.

Como puedes ver aunque sea de manera discreta la barra de menú se vuelve a llevar y es cada vez más importante.

Si no te atreves con las nuevas tendencias en el blog hay una barra de menu para blogger sin javascript desplegable que es uno de los post más leídos.

Tienes barra de menu? usas la barra de menú cuándo visitas una web? que te parecen estas tendencias? hay alguna que te guste más que otras?

A continuación tienes el podcast sobre este tema