Análisis: ¿Qué enlaces aparecen en las mejores barras de navegación de la Web?
Una de las primeras cosas que se hacen al iniciar un blog nuevo es crear una barra de navegación o un menú. Pero, ¿qué enlaces deben ir allí? Y, lo que es más importante, ¿algunos enlaces tienen mejor rendimiento que otros?
He pasado algún tiempo jugando con esto yo mismo y me he sorprendido bastante de lo que funciona y lo que no.
Es interesante notar que los cinco enlaces “tradicionales” que casi todos incluyen en la parte superior en realidad no siempre son los mejores.
Veamos qué hacen algunos sitios web con sus barras de navegación y qué lecciones podemos aprender de ello.
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.
Hoy en día, podemos hacer mucho más con ese espacio premium de un sitio web. 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.
Comencemos echando un vistazo a algunas de las mejores barras de navegación que pude encontrar y luego terminaremos con algunas ideas, recursos y un plan de ataque para la suya.
1. Airbnb: el menú responde al estado de inicio de sesión y a las interacciones
El primer ejemplo es de Airbnb, que tiene una excelente barra de navegación superior que muestra información diferente en función de si has iniciado sesión o si has realizado reservas, guardados, etc.
Esta es una característica avanzada realmente interesante que se puede implementar de varias maneras dependiendo del contenido que desea que la gente note más en su sitio web o blog.
Por ejemplo, podrías tener una pequeña sección en tu menú que muestre a las personas sus artículos guardados o elementos con los que interactuaron varias veces. Incluso podrías 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 haya 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 un gráfico animado muy ordenado que crece a medida que se carga la página.
Esta es una forma muy inteligente de destacar una de las áreas más importantes de su sitio web. Pat utiliza sus informes de ingresos como un verdadero creador de marca y como inspiración para las personas que desean generar ingresos pasivos en línea, y agregar una característica destacada como esta sería de gran ayuda para atraer a los lectores más profundamente, promocionar otras áreas del sitio, afiliados, etc.
Lo 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 marca dentro de la barra de navegación
La organización benéfica para niños Starlight ha incorporado muy bien su marca a su menú. Como puedes ver, hay pequeñas y hermosas ilustraciones que animan el menú y lo hacen más interesante y atractivo.
Otra característica de este menú que me gusta bastante es que el resto del sitio web se oscurece para que el foco permanezca en el menú en sí, como una especie de caja de luz. Esto también ayuda a atraer la atención hacia los tres botones amarillos que quizás sean los elementos principales, en lugar de solo la navegación.
Las barras de navegación y los menús no tienen por qué ser solo áreas simples. Podemos incorporar elementos de marca y diseño para que el sitio sea más memorable y distintivo.
4. Treasury of Lives: una línea de tiempo que funciona como un menú de navegación
Quería incluir este ejemplo porque demuestra que una barra de navegación ni siquiera tiene por qué 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, resulta útil mostrar la época en la que vivieron en relación con los demás.
Si visita el sitio, notará que utilizan 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 que funcione como la forma principal de moverse por el sitio.
Por supuesto, no es necesario tener una larga trayectoria para utilizar este formato. Estaba pensando, por ejemplo, en hacer algo similar en cuanto a la evolución de un blog y las etapas en las que se debe instalar un complemento, añadir un tema, modificar esto, cambiar aquello, etc.
5. Google Fonts: menú que ahorra espacio
Google suele hacer las cosas bastante bien (lo siento, Google Wave, qué asco) y en Google Fonts tienes un gran ejemplo de un menú que ahorra mucho espacio al no ser realmente visible hasta que decides interactuar más con el contenido.
Me gusta esta opción porque hace hincapié en el contenido en sí, especialmente teniendo en cuenta que el contenido de este sitio es interactivo. Tener una barra lateral que te permita cambiar la forma en que se muestra el contenido a veces puede resultar un truco (no creo que cambiar los colores de fondo sea tan útil), pero otras veces puede ser una muy buena forma de mejorar lo que está disponible (no te pierdas mi guía completa sobre cómo editar tu barra lateral de WordPress ).
Después de todo eso, es posible que te preguntes qué diablos poner en tu barra de navegación.
Bueno, la buena noticia es que realmente no importa: no hay reglas estrictas.
La mala noticia es que la única forma de descubrir la combinación ideal es hacer algunas pruebas, y eso puede llevar tiempo. Sitios como Visual Website Optimizer pueden ayudarte.
Ser estratégico con tu elección
Una cosa que debes hacer es pensar cuidadosamente qué contenido o página específica quieres que los visitantes encuentren fácilmente y luego construir tu barra de navegación en torno a eso, eliminando todo lo adicional.
Recuerda que conoces tu contenido mejor que tus lectores y, por lo tanto, debes ayudarlos a encontrar el material adecuado. Eso es parte de esta estrategia de blogging.
Por ejemplo, actualmente estoy probando un botón que se activa al desplazarse en la parte superior derecha y que puede enviar a las personas a diferentes páginas a las que quiero dirigirme. Incluso he eliminado elementos como Contacto de mi menú y los he colocado en el pie de página porque los correos electrónicos no son una prioridad para mí y me quitan mucho tiempo.
Ser útil con tu elección
Lo siguiente que quizás quieras considerar es cuál es la mejor manera de servir a tus lectores en el nicho particular en el que te encuentras.
Por ejemplo, si tienes una tienda online, puede que sea mejor tener un megamenú enorme con todas las categorías, estilos de productos, opciones de envío, etc. disponibles, de modo que se pueda acceder a toda la tienda online con uno o dos clics. Etsy es un ejemplo de cómo se hace bien esto.
En el caso de menús más complejos, es necesario asegurarse de que funcionen sin problemas en dispositivos móviles y para usuarios de distintos tamaños de pantalla para evitar confusiones. A veces, un megamenú en dispositivos móviles requiere muchos clics.
Ser distintivo con tu elección
La última opción de la que quiero hablar es la idea de simplemente hacer lo que funcione para tu marca y la ayude a destacarse del resto.
Si tu blog tiene una breve biografía tuya en la barra lateral de cada página, entonces quizás no necesites incluir un enlace a una página Acerca de en la barra de navegación. O, si tu logotipo actúa como botón de inicio, no ocupes espacio con otro enlace de Inicio . O, si tus servicios son un poco más complicados que la mayoría, piensa en incluir una página de Introducción o de Prueba .
He dejado este artículo bastante abierto, ya que realmente creo que la mejor forma de determinar qué va en una barra de navegación es probarla en cada blog o sitio web individual que ejecutes y ver qué funciona.
Dicho esto, me encantaría saber qué hay en tu menú, cómo decidiste esos enlaces y cómo te han funcionado. Deja un comentario a continuación y cuéntamelo.
Deja una respuesta