Análisis: ¿Qué enlaces aparecen en las mejores barras de navegación de la Web?

Eddy PfoccoriActualizado por Cisco Pfoccori el 19 de agosto de 2021

Una de las primeras cosas que hace al iniciar un nuevo blog es crear una barra de navegación o un menú. Pero, ¿qué enlaces deberían ir allí? Y, lo que es más importante, ¿algunos enlaces superan a otros?

He pasado un poco de tiempo jugando con esto y me ha sorprendido bastante lo que funciona y lo que no.

Es interesante notar que los cinco enlaces “tradicionales” que casi todo el mundo incluye en la parte superior en realidad no siempre son los mejores.

Echemos un vistazo a lo que hacen algunos sitios web con sus barras de navegación y qué lecciones podemos aprender.

La barra de navegación tradicional

Desde el comienzo de los sitios web, la gente ha estado colocando los mismos cinco enlaces en las barras de navegación: Inicio, Acerca de, Servicios, Noticias / Blog, Contacto.

Y eso está bien.

Pero definitivamente no es perfecto.

En estos días, podemos hacer mucho más con ese sitio web premium. Ya no es solo un lugar para navegar por las secciones principales, es un lugar que puede responder a diferentes visitantes, cambiar para varias plataformas, mostrar fotos, etc.

Podríamos ser un poco más creativos.

Algunas barras de navegación excelentes de toda la web

Comencemos por echar un vistazo a algunas de las mejores barras de navegación que pude encontrar y luego terminemos con algunas ideas, recursos y un plan de ataque propio.

1. Airbnb: el menú responde al estado de inicio de sesión y las interacciones

El primer ejemplo es de Airbnb, que tiene una gran barra de navegación superior que muestra información diferente en función de si ha iniciado sesión o si ha realizado reservas, guardado, etc.

Airbnb

Esta es una característica avanzada realmente interesante que podría implementarse de varias maneras dependiendo del contenido que desee que las personas noten más en su sitio web o blog.

Por ejemplo, es posible que tenga una pequeña sección en su menú que muestre a las personas los artículos que han guardado o con los que han interactuado varias veces. Incluso podría tener una sección que muestre artículos populares en este momento y permita a las personas votarlos o compartirlos en las redes sociales. ¿Quizás hay una idea de complemento en eso?

2. Ingresos pasivos inteligentes: funciones animadas

El siguiente ejemplo proviene de Smart Passive Income, donde Pat llama la atención sobre sus ingresos mensuales mediante el uso de un gráfico animado muy ordenado que crece a medida que se carga la página.

Airbnb

Esta es una forma realmente inteligente de resaltar una de las áreas más importantes de su sitio web. Pat utiliza sus informes de ingresos como un constructor de marca real y como inspiración para las personas que desean obtener ingresos pasivos en línea, y agregar una característica destacada como esta ayudaría en gran medida a atraer a los lectores más profundamente, promocionar otras áreas del sitio, afiliados, etc. .

La parte interesante es que, como Pat es Pat, está constantemente probando el rendimiento de su configuración. Me di cuenta de este tweet sobre su barra de navegación unos días después de que comencé a investigar y escribir este artículo.

3. Starlight: gráficos y desarrollo de la marca dentro de la barra de navegación

La organización benéfica para niños Starlight realmente ha incorporado bien su marca en su menú. Como puede ver, hay pequeñas y hermosas ilustraciones que animan el menú y lo hacen más interesante y atractivo.

Airbnb

Otra característica de este menú que me gusta bastante es cómo se oscurece el resto del sitio web para que el foco permanezca en el menú en sí, algo así como una caja de luz. Esto también ayuda a llamar la atención sobre los tres botones amarillos que son quizás los elementos principales, en contraposición a la simple navegación.

Las barras de navegación y los menús no tienen que ser solo áreas simples. Podemos incorporar elementos de marca y diseño para hacer que el sitio sea más memorable y distintivo.

4. Treasury of Lives: la línea de tiempo se duplica como un menú de navegación

Quería incluir este ejemplo porque muestra que una barra de navegación ni siquiera tiene que aparecer como una barra de navegación tradicional. El sitio web Treasury of Lives recopila biografías de maestros budistas del Himalaya y, como tal, es útil para mostrar la época en la que estuvieron en relación entre sí.

Airbnb

Si visita el sitio, notará que usan una barra de navegación tradicional, pero estaba pensando en cómo habría algunos casos en los que sería muy exclusivo usar este tipo de estilo de línea de tiempo para funcionar como la forma principal de moverse. alrededor del sitio.

Por supuesto, no es necesario tener una larga historia para utilizar este formato. Estaba pensando, por ejemplo, en hacer algo similar en términos de la progresión de un blog y las etapas en las que debería instalar un complemento, agregar un tema, modificar esto, cambiar eso, etc.

5. Google Fonts: menú para ahorrar espacio

Google generalmente hace las cosas bastante bien (lo siento, Google Wave, qué asco) y en Google Fonts obtienes un gran ejemplo de un menú que ahorra mucho espacio al no ser realmente visible hasta que decides interactuar más con el contenido.

Airbnb

Me gusta esta opción porque deja el énfasis en el contenido en sí, especialmente dado que su contenido en este sitio es interactivo. Tener una barra lateral que le permite cambiar la forma en que se muestra el contenido a veces puede ser engañoso (no creo que cambiar los colores de fondo sea tan útil), pero otras veces puede ser una muy buena manera de mejorar lo que está disponible.

Entonces, ¿qué debo poner en mi barra de navegación?

Después de todo eso, es posible que se pregunte qué diablos poner en su barra de navegación.

Bueno, la buena noticia es que realmente no importa, no hay reglas estrictas y rápidas.

La mala noticia es que la única forma de encontrar la combinación ideal es haciendo algunas pruebas, y eso puede llevar tiempo. Los sitios como Visual Website Optimizer pueden ayudarlo.

Ser estratégico con tu elección

Una cosa que debe hacer es pensar detenidamente qué contenido / página específica desea que los visitantes encuentren fácilmente y luego construir su barra de navegación alrededor de eso, eliminando todo lo adicional.

Recuerde, conoce su contenido mejor que sus lectores y, como tal, debe ayudarlos a encontrar el material adecuado. Eso es parte de esta estrategia de blogs.

Por ejemplo, actualmente estoy probando un botón activado por desplazamiento en la parte superior derecha que puede enviar a las personas a diferentes páginas a las que quiero orientarme. Incluso eliminé cosas como Contacto de mi menú y lo puse en el pie de página porque los correos electrónicos no son una prioridad para mí y toman mucho tiempo.

Ser útil con su elección

Lo siguiente que debe considerar es cuál es la mejor manera de servir a sus lectores en el nicho particular en el que se encuentra.

Por ejemplo, si tiene una tienda en línea, podría ser mejor tener un mega menú enorme con todas las categorías, estilos de productos, opciones de envío, etc. disponibles para que toda la tienda en línea sea accesible en uno o dos clics. Etsy es un ejemplo de esto bien hecho.

Con menús más complicados, debe asegurarse de que aún funciona sin problemas en dispositivos móviles y para usuarios de diferentes tamaños de pantalla para evitar confusiones. A veces, un megamenú en un dispositivo móvil agregará muchos clics.

Ser distintivo con tu elección

La última opción de la que quiero hablar es la idea de hacer lo que funcione para tu marca y la ayudará a destacarse entre la multitud.

Si tu blog tiene una breve biografía tuya en la barra lateral de cada página, entonces tal vez no necesites vincular a una página Acerca de en la barra de navegación. O bien, si su logotipo actúa como un botón de inicio, no ocupe espacio con otro enlace de inicio . O bien, si sus servicios son un poco más complicados de lo que la mayoría piensa en poner una página para comenzar o para dar vueltas .

¿Qué hay en tu barra de navegación?

Dejé este artículo bastante abierto, ya que realmente creo que la mejor manera de determinar qué va en una barra de navegación es probarlo para cada blog o sitio web individual que ejecute y ver qué funciona.

Dicho esto, me encantaría saber qué hay en tu menú, cómo te decidiste por esos enlaces y cómo te han funcionado. Deje un comentario a continuación y hágamelo saber.

Deja un comentario