Una de las primeras cosas que haces al empezar un nuevo blog es crear una barra de navegación o menú. Pero, ¿qué enlaces deberían ir ahí? Y, lo que es más importante, ¿algunos enlaces funcionan mejor que otros?
He pasado un tiempo jugando con esto yo mismo y me ha sorprendido bastante lo que funciona y lo que no.
Es interesante notar que los "tradicionales" cinco enlaces que casi todos incluyen en la parte superior en realidad no son siempre los mejores.
Echemos un vistazo a lo que algunos sitios web están haciendo con sus barras de navegación y qué lecciones podemos aprender para las nuestras.
La barra de navegación tradicional
Desde el principio de los sitios web, la gente ha estado poniendo 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 hay mucho más que podemos hacer con ese valioso espacio en el 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.
Algunas excelentes barras de navegación de la web
Empecemos 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 tuya.
1. Airbnb – el menú responde al estado de inicio de sesión e interacciones
El primer ejemplo es de Airbnb, que tiene una excelente barra de navegación superior que muestra información diferente según si has iniciado sesión, o si has realizado alguna reserva, guardado, etc.
Esta es una característica avanzada realmente genial que podría implementarse de varias maneras dependiendo de qué contenido quieres que la gente note más en tu 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 los artículos con los que han interactuado varias veces. Incluso podrías tener una sección que muestre los artículos populares del momento y permita a las personas votarlos o compartirlos en redes sociales. ¿Quizás hay una idea de plugin ahí?
2. Smart Passive Income – características animadas
El siguiente ejemplo proviene de Smart Passive Income, donde Pat llama la atención sobre sus ingresos mensuales utilizando un gráfico animado muy elegante que crece a medida que la página se carga.
Esta es una forma realmente inteligente de resaltar una de las áreas más importantes de tu sitio web. Pat utiliza sus informes de ingresos como un verdadero constructor de marca 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 mucho a atraer a los lectores más profundamente, promocionar otras áreas del sitio, afiliados, etc.
¿Alguien ha notado y está usando el nuevo menú de navegación en SPI? He estado implementando nuevas estrategias para una mejor orientación basada en sus comentarios.
— Pat Flynn (@PatFlynn) 9 de diciembre de 2016
Lo interesante es que, como Pat es Pat, está constantemente probando el rendimiento de su configuración. Noté este tuit 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 infantil Starlight ha incorporado muy bien su marca en su menú. Como puedes ver, hay unas 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 cómo el resto del sitio web se oscurece para que el enfoque permanezca en el menú en sí, algo así como una caja de luz. Esto también ayuda a atraer la atención a los tres botones amarillos que son quizás los elementos principales, en lugar de solo la navegación.
Las barras de navegación y los menús no tienen por qué ser á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 – línea de tiempo que funciona como menú de navegación
Quería incluir este ejemplo porque muestra que una barra de navegación ni siquiera tiene que parecer 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 mostrar la era en la que vivieron en relación unos con otros.
Si visitas el sitio notarás que usan una barra de navegación tradicional, pero estaba pensando en cómo habría casos en los que sería muy único usar este tipo de estilo de línea de tiempo para funcionar como la forma principal de moverse por el sitio.
Por supuesto, no tienes que tener una larga historia para usar 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ías instalar un plugin, agregar un tema, ajustar 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 deja el énfasis en el contenido en sí, especialmente dado que su contenido en este sitio es interactivo. Tener una barra lateral que te permite cambiar la forma en que se muestra el contenido a veces puede ser un truco (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 (no te pierdas mi guía completa sobre cómo editar la barra lateral de tu WordPress).
Entonces, ¿qué debo poner en mi barra de navegación?
¡Después de todo eso, podrías estar preguntándote qué demonios poner en tu barra de navegación!
Bueno, la buena noticia es que realmente no importa, no hay reglas fijas.
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 quieres hacer es pensar cuidadosamente en qué contenido/página específica quieres que los visitantes encuentren fácilmente y luego construir tu barra de navegación alrededor de eso, eliminando todo lo extra.
Recuerda, conoces tu contenido mejor que tus lectores y, como tal, deberías ayudarles a encontrar lo correcto. Eso es parte de esta estrategia de blogging.
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 que quiero dirigir. Incluso he eliminado cosas como Contacto de mi menú y las he puesto 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 podrías considerar es la mejor manera de servir a tus lectores en el nicho particular en el que te encuentras.
Por ejemplo, si eres una tienda en línea, podría ser mejor tener un mega menú enorme con todas las categorías, estilos de producto, 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, debes asegurarte de que todavía funcione sin problemas en dispositivos móviles y para usuarios de diferentes tamaños de pantalla para evitar confusiones. A veces, un mega menú en un dispositivo móvil implicará 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 que la ayude a destacar entre la multitud.
Si tu blog tiene una biografía corta tuya en la barra lateral en cada página, entonces quizás no necesites enlazar a una página de Acerca de en la barra de navegación. O, si tu logo funciona como botón de inicio, entonces no ocupes espacio con otro enlace de Inicio. O, si tus servicios son un poco más complicados de lo que la mayoría piensa, considera poner una página de Comenzar o Pruébalo.
¿Qué hay en tu barra de navegación?
He dejado este artículo bastante abierto porque genuinamente 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 administres y ver qué funciona.
That being said, I’d love to know what is in your menu, how you decided on those links, and how they’ve been working out for you. Please leave a comment below and let me know.
Publicación útil. Tenemos una navegación interesante cuando te desplazas hacia abajo, ¿qué opinas? Gracias.
Hola John. Me gustan los íconos. Hay un pequeño espacio en la parte superior de mi pantalla. ¿Está hecho para estar ahí?
¿Estás seguro de que hay un espacio? Si es una línea blanca de 1px, ¿es solo de tu navegador? O tal vez puedes mostrar una captura de pantalla para que pueda arreglarlo
Macbook Pro de 15 pulgadas + Firefox más reciente: http://imgur.com/a/QeStg
Ok. Podría haber un millón de razones por las que está sucediendo en tu pantalla y no en la mía, pero miré mi código y elegí una mejor solución. Antes usaba margin-top: píxeles negativos. Puede ser un problema de resolución.
La solución mucho mejor en lugar de píxeles negativos, es top: 0;
Pruébalo ahora, por favor dime si está arreglado.
JAJAJA de nuevo entregas contenido solo para mí, ¡con un tiempo casi perfecto! Me estoy preparando para lanzar en febrero (con suerte), y he estado pensando mucho en la navegación en los últimos días... Tengo un fuerte deseo de romper con la tradición, y aquí hay algo interesante para reflexionar 🙂
¡Genial! ¡Espero que ayude!
¡Estas son ideas geniales! Me encantan la #2 y la #3. Mi barra de navegación es elegante y tradicional, pero la diferencio usando un tono conversacional. Ejemplo:
¡Bienvenido! | ¡Déjame presentarme! | ¡Hola de nuevo! | ¡Te lo mereces! | ¿Necesitas recursos? | Mantente en contacto.
Después de hacer clic en cada página, encontrarás los títulos de página típicos para cualquier aclaración necesaria. (También publiqué mi primera entrada con tu ayuda y te di un pequeño reconocimiento. ¡Gracias!)
Hola Carmen. Para tu información, tu comentario estaba en spam, podría deberse a la dirección web bit.ly.
¡Gracias por el reconocimiento! Le echaré un vistazo.
Gracias por avisarme. Lo siento.
En el pasado, llamábamos a eso "navegación de carne misteriosa". Generalmente se recomienda que tus enlaces de navegación sean claros y concisos. La mayoría de tus enlaces no me dicen qué esperar al hacer clic en ellos. Por otro lado, si no está roto...
Me has dado mucho en qué pensar. Definitivamente soy un novato en todo esto, y estoy de acuerdo. Prefiero tener un sitio web claro que visitantes confundidos. ¡Gracias por la crítica constructiva!
Hola, Ramsay,
Recientemente hice algunos cambios en mi sitio de autor. Ya no tengo una barra de navegación. Sin embargo, tengo imágenes enlazadas con toda mi información.
¿Qué opinas?
Jennifer
Hola Jennifer.
Me gusta el concepto.
Sugeriría quizás usar fotos de mayor calidad y hacer que sean más destacadas. Creo que realmente quieres dar lo mejor de ti si ese es el enfoque que estás tomando. Las imágenes se ven bastante borrosas para mí en una pantalla retina.
También sugeriría quizás una fuente que esté en línea con la marca de tu libro para que todo sea consistente en todas las plataformas.
¡Última cosa! Por motivos de SEO y claridad, realmente creo que necesitas algún tipo de logo o encabezado que explique dónde está la gente.
Espero que estas sugerencias no sean demasiado inoportunas.
¡Gracias!
¡Excelentes aportaciones! Muchas gracias.
Tu consejo siempre es bienvenido...
Jennifer
Tener las mismas opciones de navegación en cada página es imprescindible. Si alguien llega a una página que no es la de inicio, no tendrá una forma (fácil) de ir a otra página.
Estaba a punto de dormir cuando recibí tu correo… Pensé que debería leerlo ahora en la cama o lo olvidaré… Estoy completamente de acuerdo contigo en que depende totalmente de lo que funcione para alguien… También noté un gráfico animado en el sitio de Pat cuando lo visité y fue muy llamativo… ¿por qué no usas mejoras de contenido en tus publicaciones? Todo el mundo las usa…
Hola Abdullah.
No he encontrado que las mejoras de contenido sean particularmente útiles para conversiones a largo plazo y llevan mucho tiempo para prepararlas.
Solo agrega listas de verificación a las publicaciones de lista o a tus publicaciones más populares... no toman mucho tiempo para crear...
Gracias por responder Ramsay..
Una de las razones por las que sigo volviendo… no molestas a la gente con mejoras de contenido inútiles o ventanas emergentes y/o solicitudes de empuje desagradables.
Esta es una parte crítica de cualquier sitio web – he adoptado un enfoque deliberadamente simple, usando un tema muy sencillo – el menú es texto plano, ¡quizás debería optar por un aspecto más bonito y genial! Estoy considerando usar un tema radicalmente diferente, todo para reflexionar. ¡Gran publicación Ramsay!
Hola Michael. Me alegra que lo hayas disfrutado. Definitivamente consideraría eliminar enlaces de tu menú para que no ocupe más de una línea.
Buena idea, ¡a veces me ciego a mis propios problemas de desarrollo! Lo estoy recortando ahora mismo. Gracias Ramsay.
De hecho, acabo de terminar la barra de navegación para mi nuevo sitio web, así que esta publicación llega en un gran momento.
Elegí esto: Empieza Aquí, Tienda, Blog, Lo Que Amo, Trabaja Conmigo
Para mi marca (enseñar a madres a ganar dinero con blogs), creo que mi línea de navegación funciona.
Por cierto, ME ENCANTA el "¿QUIÉN?" en tu barra de navegación. Nunca lo había visto antes. ¡Muy creativo! ¿Y supongo que tu página de "herramientas" es tu página de recursos?
¡Buenas opciones! Sí, esa página de Quién parece funcionar bien.
Hola Ramsey,
Mi blog es simple pero convierte como loco.
Una cosa que señalaste es tener dos páginas de inicio (basadas en logo y texto)
¿Qué partes convierten como loco?
Hay tres páginas que convierten bastante bien.
Acerca de | Página de recursos | Empieza aquí.
¡Saludos!
Ramsay,
Es una publicación de blog maravillosa. Hace casi dos años, dejé de centrarme en el Marketing de Afiliados y Google Adsense después de agregar un enlace de texto de 'Contrátame'...
Estaba ofreciendo mi servicio de redacción freelance. Resultó ser un paso que cambió mi vida porque le dio la vuelta a mi estrategia de blogging. Luego, seguí probándolo. Pude atraer prospectos y conseguir clientes sin preocuparme por el número de visitantes.
Me alegra que hayas hablado de esto.
¡Me encanta! Felicidades.
¡Otra mina de oro! No sé cómo se te ocurren estas ideas de publicaciones tan raras, pero te diré que este blog me lleva al límite. ¡Sigue con el buen trabajo Ramsay!
Gracias. Por lo general, surgen de cosas en las que estoy trabajando.
¡Esa es una perspectiva única!
A menudo miro los pequeños elementos de los sitios web y admiro su efectividad – ya sea en forma de contenido, diseño del sitio o ideas – son innovadores.
Aunque pienso implementar algunas de ellas en mi blog, no lo hago, ya que modificar mi blog siempre resulta ser un trabajo engorroso.
A veces lo he arruinado intentando hacer todas esas cosas al azar por mi cuenta, después de lo cual intento mantenerlo ordinario.
Ahora mismo mi barra de navegación es similar a la que podría haber existido en la Edad de Piedra. Quizás, pueda hacer todas esas cosas geniales una vez que sea capaz de hacerlo, hasta entonces seguirá así.
En cuanto a las barras de navegación en otros sitios, me gustan las que facilitan la accesibilidad, como las barras de contacto en sitios como The Minimalists o Webby Awards – no te redirigen a otro lugar solo para seguir o dar like, lo que creo que facilita ganar más seguidores.
O cuando otros elementos desaparecen en una instancia particular cuando pasas el cursor sobre una opción determinada – nada especial pero se ve genial.
Hay muchas otras cosas agradables con las que la gente ha experimentado. ¡Ay! No puedo recordarlas ahora mismo.
Estoy de acuerdo con los elementos que desaparecen. Me gusta mucho el sitio web de Vanity Fair por cómo lo hacen de una manera visualmente agradable pero que aún tiene un propósito.
Justo a tiempo, Ramsay. He estado mirando mi menú pensando que necesita cambiar. En lugar de una barra negra entre el encabezado y el contenido, la estoy moviendo a un menú secundario en la parte superior.
La parte superior es buena.
Gracias, hombre
¡Haznos saber cómo va!
Eso es único Ramsay. Sigue así.
Gracias.
¡Gran publicación, Ramsey! Esto es algo de lo que realmente no he visto hablar a otros expertos en blogs. Lo único que agregaría es que tus elementos de navegación deben ser claros y concisos. No intentes ser ingenioso o astuto. Lo último que quieres es que tus visitantes se confundan o se vayan porque no se dan cuenta de que "Contáctame" (por ejemplo) es tu página de contacto.
Ese es un buen punto, especialmente porque muchos lectores de blogs en inglés ahora no son hablantes nativos de inglés.
Hola Ramsay,
Has hecho un buen trabajo recopilando algunas ideas excelentes para modificar la barra de navegación. Como la mayoría de los bloggers, yo también tengo la tradicional con Contacto, Acerca de mí y Categorías.
Estoy de acuerdo con tu punto de vista de que necesitamos agregar algo de creatividad para atraer a una gran audiencia. Me gusta la navegación gráfica en smartpassiveincome.
¡Gracias por los geniales aportes, que tengas un buen día!
Hola Ramsay,
Buena publicación. Al menos aprendo algo nuevo cada vez que visito tu blog.
Gracias por compartir.
Y Feliz Año Nuevo.
Hola Ramsay,
He estado trabajando como blogger de tiempo completo durante mucho tiempo. He sido un seguidor tuyo y también he mejorado muchas de las técnicas para ganarme bien la vida con el blogging. Tengo un largo camino por recorrer. 2017 será mi año y tengo nuevas ideas, que voy a implementar.
Ramsay, deséame suerte y gracias por tu contribución.