Una de las tendencias que se han extendido dentro del mundo del diseño web es la utilización de un header bar que siga al usuario mientras navega. Si te estás preguntado que narices es un header bar me refiero al menú principal ubicado generalmente en la parte superior de una web para acceder a sus distintas secciones.
Con un poco de CSS fijar en todo momento el menú principal en la parte superior de la pantalla es bastante sencillo y permite que los usuarios no pierdan de vista en ningún momento el menú de navegación.
Un claro ejemplo de header bar fijo lo tienes en esta misma web, conforme te desplazas hacia abajo en todo momento tienes a mano el menú de navegación por si quieres visitar otra sección sin necesidad de volver hacia arriba.
Índice de contenidos
Por qué usar un header bar fijo
Personalmente soy partidario de usar este recurso a la hora de diseñar una web ya que considero que aporta una serie de beneficios debido a que mejora la experiencia del usuario y es lo que quiero demostrarte en este post.
No hagas pensar al usuario
[pullquote align=»left»]Al usuario hay que ponerle las cosas muy fáciles[/pullquote]Como diría el experto en usabilidad Steve Krug en su libro «No me hagas pensar» (recomiendo su lectura) al usuario hay que ponerle las cosas muy fáciles. Cuanto más rápida sea la navegación por una web y menos clicks hagamos mejor.
Tener un header bar fijo con los elementos de navegación permite a los usuarios acceder a todos los contenidos de la web de forma mucho más fácil. No tendrán necesidad de tener que volver hacia arriba ya que siempre tendrán visible el menú.
Rapidito que tengo prisa
Un menú superior fijo es utilizado en multitud de webs y blogs pero es muy útil sobre todo en páginas de mucho contenido que requieren desplazarse bastante hacia abajo. En estos casos este recurso web es una solución fantástica.
[pullquote align=»right»]Reduce el tiempo de navegación al mínimo[/pullquote]Tal vez estás pensando que el tiempo que te lleva volver hacia arriba en una web por larga que sea no va a ser eterno. Sin embargo nuestro comportamiento cuando navegamos es muy curioso y hay muchos estudios que afirman que aunque inconscientemente, el hecho de tardar 1 segundo más en hacer algo en una web propicia que la abandonemos antes.
Es lógico que si has leído el mega texto que he preparado sobre uno de mis servicios y quieres contactar conmigo, no tengas que volver hasta arriba para buscar el botón de contacto, ya te lo dejo yo a la vista. El hecho de tener el menú visible en todo momento reduce el tiempo de navegación al mínimo.
Experiencia de usuario
Al usar un header bar fijo te aseguras de que los usuarios tienen el control durante todo el proceso de visualización de tu sitio web. El control del usuario es un concepto especialmente importante para la experiencia de usuario en general en un sitio web.
Tener una cabecera fija en tu sitio te permitirá reducir el desplazamiento y el tiempo de búsqueda lo que permite a tus usuarios localizar la información que necesitan con el mínimo esfuerzo.
Imagen de marca
Además de ofrecer ventajas como una navegación rápida y sencilla un menú superior fijo también tiene beneficios a la hora de generar imagen de marca. Si el logotipo o elementos diferenciadores de tu marca también siguen al usuario durante la navegación aumentan las probabilidades de que te recuerden.
Servicios populares que usan este recurso
[pullquote align=»left»]Facebook, Twitter o Microsoft usan este recurso[/pullquote]Si todavía no te ha quedado claro que un simple menú de navegación fijo en tu web sea tan beneficioso entra en Facebook o Twitter y desplázate hacia abajo. ¡Sorpresa! El menú superior te acompaña en todo momento.
De la misma manera este concepto es usado por ejemplo en Word y el resto de programas de ofimática. No tendría sentido que cada vez que quisieras poner una negrita, tuvieras que volver hacia arriba.
Mi apuesta
En conclusión un header bar fijo agrega valor al diseño web, tanto en términos de facilidad de uso como estéticos en muchos casos. No sólo ayudan a mejorar la experiencia del usuario sino que también permiten a las empresas mantener su imagen de marca visible en todo momento.
Además, si empresas como Facebook, Twitter o Microsoft que invierten tanto dinero en investigar y probar estos aspectos lo hacen será por algo. ¿Compartes mi opinión?
9 comentarios en «Ventajas de usar un header bar fijo en tu web»
Carlos, me has convencido, mogollón de razones que has dado. Eso si, como bien dices, es válido sobre todo y muy útil para webs con mucho contenido, como es tu caso por ejemplo.
Yo soy de pensar que cuantas menos molestias al usuario en su lectura mejor es la experiencia de este usuario ( lo digo sobre todo por pop ups emergentes, iconos sociales flotantes)
Estupendo post, me ha gustado mucho!
¡Bien! Objetivo cumplido, he convencido a alguien 🙂 ¡Un saludo!
Totalmente de acuerdo. Las barras fijas superiores son bien, salvo que te pases, claro 😉
Gracias por tu comentario Antonio 🙂
«si empresas como Facebook, Twitter o Microsoft que invierten tanto dinero en investigar y probar estos aspectos lo hacen será por algo.»
Pero no porque «x» empresa lo haga nosotros también. Ese punto no comparto.
Igual me gusto el artículo.
Estoy totalmente de acuerdo. Nosotros hemos renovado el diseño de nuestra web hace poco y fue uno de los pilares del nuevo diseño junto con ser responsive.
Un saludo!
Genial! Habéis hecho lo correcto (en mi opinión) 😛
Estoy de acuerdo. Aunque a veces me molesta para leer, si es muy ancho, porque queda menos espacio para el texto.
Pero debo decirte que en mi móvil (iPhone) con el Chrome, no se queda el header fijo en este blog.
Hola Juana
La opción del header fijo la utilizamos solo en la versión de escritorio. En la versión móvil, el header se transforma para adaptarse mejor al tamaño de una pantalla móvil, por eso no lo ves.
Un saludo