Consejos de diseño de cabeceras fijas

Las cabeceras fijas o sticky headers son uno de los elementos que se han ido incorporando cada vez más en la navegación de productos digitales.

Aunque su uso en pantallas grandes es algo útil ya que no ocupan mucho espacio relativo y permiten acceder a los contenidos más fácilmente, en el caso de pantallas más pequeñas (especialmente las de móviles) pueden generar problemas.

Por ello, diseñarlos correctamente es una parte muy importante de la usabilidad. Aprovechando que en Nielsen Norman Group han escrito artículo con varios consejos sobre el diseño de estos sticky headers, vamos a ver cuáles son y de qué manera podemos hacerlos mejores.

¿Qué es una cabecera fija o sticky header?

Las cabeceras fijas, que en inglés podemos encontrar como sticky o persistent headers, son unos elementos de diseño que hace que el encabezado de una web o aplicación se mantenga en pantalla mientras nos desplazamos por la misma.

Estos encabezados suelen incluir accesos a elementos como menús o campos de búsqueda, como podemos ver en este ejemplo:

Este primer concepto ha evolucionado y, gracias a los patrones de desplazamiento de los teléfonos móviles, es bastante habitual encontrar cabeceras semi-persistentes, que desaparecen con el desplazamiento hacia abajo, pero que reaparecen al moverse hacia la parte superior:

Espacio ajustado 

Una cabecera fija va a ocupar normalmente un espacio que estaría dedicado a otro contenido. Esto se hace especialmente crítico que decidamos correctamente qué espacio vamos a ocupar.

Desde NNg recomiendan ocupar el espacio necesario para hacer nuestro texto legible y ajustando el tamaño de elementos visuales para que no haya problemas con las acciones de clic en escritorio o toque en dispositivos móviles.

Para el diseño de los espacios también tendremos en cuenta la barra del navegador (especialmente en móviles) para poder mantener ratios de ocupación aceptables.

Respetar las reglas del contraste

Si queremos que el encabezado destaque sobre el resto de elementos de la página, podemos hacerlo utilizando un fondo de color que tenga suficiente contraste visual:

No obstante, no es necesario recurrir a colores excesivamente contrastados. Evitar las transparencias será suficiente para prevenir problemas de accesibilidad en la lectura de los textos.

Movimientos sutiles y naturales

Aunque la animación sea útil, hemos de respetar sus principios básicos y medir correctamente la usabilidad de esas animaciones.

Es común encontrarnos encabezados fijos que reducen su tamaño al desplazarnos, pero su desaparición también ha de ser natural.

Al existir ya ciertos patrones de comportamiento, es importante respetarlos. Por eso hemos de crear una relación y una narrativa, para que quienes navegan por nuestro producto o web sepan en todo momento dónde encontrar ese elemento que necesitan para acceder a alguna funcionalidad o página.

NNg también recomienda que el menú permanezca en su posición, evitando así animaciones innecesarias. El ejemplo más claro es cuando nos encontramos una barra lateral que, al desplazarnos, desaparece con el movimiento, pero reaparece una vez paramos. Esto hace que la atención se desplace hacia el elemento y no al contenido.

Entre los sticky headers y los semipersistentes, elige estos últimos

Con carácter general, los encabezados semipersistentes solucionan algunos problemas (espacio) y se han convertido en algo habitual, lo que permite que cualquier persona lo identifique correctamente. 

No obstante, hay que tener en cuenta que no todo movimiento hacia arriba debe hacer aparecer el menú. Definir unas reglas de espacio y tiempo para que la animación se produzca, son fundamentales para evitar que ocultar el contenido.

En este sentido, la recomendación de diseño es respetar un 150% de espacio que ocupa el encabezado antes de que se dispare la animación. Esta deberá durar entre 300 y 400 milisegundos, para que el movimiento sea lo suficientemente natural como para no llamar la atención en exceso. 

¿Es necesario tenerlo?

Como solemos insistir, es importante tener en cuenta que el diseño de productos digitales es un campo lleno de decisiones y que estas pueden no ser correctas. 

Junto a esto, también recalcamos que no es necesario utilizar todos los elementos visuales a nuestra disposición en una experiencia. Y las cabeceras fijas tienen su sentido tras responder a una serie de preguntas:

1. ¿Qué elementos situaremos en esa cabecera?
2. ¿Serán elementos críticos para la experiencia de las personas usuarias de nuestro producto?

Por ejemplo, un botón de login o el acceso a la página de precios puede tener sentido en la web de un SaaS, para conseguir que las tasas de retención y conversión se sitúen en los objetivos.

En este sentido, un análisis experto junto con la revisión de las analíticas, nos permitirá comprender los flujos de comportamiento y adaptar la jerarquía a mostrar en ese menú.

Consistencia

A todos estos consejos que nos dan desde NNg, añadimos que estos encabezados sean consistentes. La fragmentación en el tamaño de pantallas en las que interactuar con un producto o web no ha de ser un obstáculo para que la experiencia sea siempre la misma.

Por eso, es importante hacer pruebas para comprobar que estos encabezados muestran la información de la manera esperada pero también que funcionan correctamente. 

En algunas ocasiones, los encabezados semipersistentes pueden tener problemas de funcionamiento en equipos antiguos, dificultando así la navegación. En estos casos, deberemos buscar la solución adecuada, que puede no ser este tipo de solución.

Aunque el uso de estas cabeceras fijas o semipermanentes esté implantado de manera habitual y casi cualquier persona los puede identificar, hemos de tener en cuenta que han de tener un sentido y evitar que distraigan de otras tareas a realizar.