La barra de menu y las nuevas tendencias

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!

errores de diseño


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

tendencias-en-usabilidad-web


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!
las-mejores-barras-de-emnu-de-2017


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.
nuevas-barras-de-menu-o-menu-bar


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.

barra-de-menu-y-tendencias


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.

tendencias-en-menu-bar-y-usabilidad


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.

barras de menu que no se llevan


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

.

Fuente: este post proviene de yo-blogueo, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Cómo crear los mejores títulos para post Los títulos para post representan uno de los elementos más importantes para conseguir visitas, seguidores e incluso conversiones en nuestro blog. Para crear lo ...

Aprende a ahorrar gestionando tu dinero ¿Dificultades para llegar a fin de mes? Seguro que  no paran de decirte «aprende a ahorrar». Lo primero de todo ¡ten paciencia!. Entre tú y yo, ahorra ...

Recomendamos

Relacionado

general

La creación de un menú fijo para la parte superior del Blog es una popción a tener en cuenta dependiendo del tipo de presentación y la plantilla que se está utilizando. Cuando tratamos Blogs que enumeran gran cantidad de entradas y estas hacen qe haya que desplazarse verticalmente por los contenidos, el usuario puede quedar desprovisto de elementos de navegación hasta que llega a la parte inferior ...

Android Aplicaciones Personalización

Ayer recibí mi nuevo smartphone para este 2018, el Oukitel Mix 2. Un terminal con una pantalla chulísima, que, sin embargo, tiene un pequeño detalle que me incomoda. La barra de navegación tiene el orden de los iconos cambiados de sitio. En mis anteriores smartphones el botón de ir hacia atrás siempre ha estado a la derecha, y el de mostrar todas las apps abiertas, el típico icono del cuadrado, a ...

Facebook Redes Sociales Tecnología

A medida que la aplicación de Facebook se sigue actualizando, todas las funciones nuevas pueden volverse abrumadoras. Si estás leyendo esto, es probable que te interese administrar un poco mejor tus accesos directos en tu pantalla de inicio. Explicación de los accesos directos de la aplicación de Facebook Los accesos directos en la aplicación de Facebook brindan puntos de acceso a diferentes pági ...

seo y plugins

Estructura y diseño de un sitio web: Guía 2019 Un sitio web no sólo debe tener una estructura definida, sino ser también una colección aleatoria de páginas web y publicaciones de un blog. Los usuarios esperan que tu sitio web tenga una estructura bien organizada para quedarse navegando y hacer clic de una página a otra. Google también utiliza la estructura y el diseño de tu sitio para determinar q ...

cache contraseña cookies ...

Las cookies son unas herramientas que, en conjunto con el historial de navegación, se encargan de acelerar las sesiones de los usuarios en los navegadores web. Sin embargo, también, pueden llegar a representar una amenaza. Ya que los hackers podrían hacer uso de ellas para acceder a todas tus cuentas y robar tu información personal. Es por ello que, con regularidad, deberías borrar las cookies, el ...

Autocad Tutorial

Trabajar lo más cómodo posible con el programa Autocad es uno de nuestros objetivos principales, es por eso que si te desaparece la barra superior de menús te generará un problema que vamos a solucionar en esta entrada del blog. Llevamos un tiempo que cada vez que abrimos un archivo concreto .dwg de Autocad la barra superior de menú acaba despareciendo y eso hace que todas las opciones de esta ba ...

mejorar el blog

Algunas de las cosas que podemos realizar nosotras mismas para mejorar nuestro blog, es la de agregar la Barra de Menú Por que hacerlo? quizá porque deseas que tus lectores se pongan en contacto contigo, porque deseas dar a conocer la historia de tu actividad, enlazar el blog a tu tienda, estos son aspectos importantes para el florecimiento de tu blog a negocio Por tal motivo hoy mostrare el pas ...

general

La creación de menús en páginas web es fundamental para la estructuración de la información a la que los usuarios pueden acceder. En los Blogs, al igual que en cualquier publicación web, el orden y la presentación de las categorías de la información que manejamos puede ordenarse mediante un menú. La exposición de contenidos mediante un menú facilita a los usuarios el acceso a la información, consi ...

informática desarrollo android

IMG.displayed{display:block;margin-left:auto;margin-right:auto} En este articulo estudiaremos las características y el uso de la Action Bar (Barra de acción) en el desarrollo Android. Veremos su anatomía, como crear un archivo de diseño para ella, como ejecutar las acciones una vez presionado sus opciones y otras características relevantes. Indice: Funciones del Action Bar Anatomía de la Action ...

informática desarrollo android

IMG.displayed{display:block;margin-left:auto;margin-right:auto} En este articulo estudiaremos las características y el uso de la Action Bar (Barra de acción) en el desarrollo Android. Veremos su anatomía, como crear un archivo de diseño para ella, como ejecutar las acciones una vez presionado sus opciones y otras características relevantes. Indice: Funciones del Action Bar Anatomía de la Action ...