Veamos en esta entrada otro componente UI de navegación más. En este caso vamos a ver en detalle qué son las sidebars, o como se les llama en no pocos sistemas de diseño side navigation menu. cómo diseñarlas y cómo deben emplearse para garantizar una correcta usabilidad y experiencia de navegación.
¿Qué es una sidebar?
Las sidebars son paneles verticales colocados en cualquier extremo de la página. De ahí su nombre en español, barra lateral. Estos paneles tienen el objetivo de facilitar la navegación a través del sitio y aunque pueden tener contenido de acción, sobre todo lo tienen de navegación para facilitar la movilidad en el sitio.
De acuerdo con las Human Interface Guidelines de Apple la sidebar es el sustituto de la navigation bar en apps de escritorio. Para ellos, en móviles y tablets se deben usar las barras de navegación y limitar las barras laterales a los ordenadores.
Sin embargo, esta opinión de Apple no es dominante y, si bien todos aceptamos que navbars y sidebars pueden ser alternativas unas de otras, también trabajan muy bien en conjunto. Ejemplos de esto hay miles: Facebook, LinkedIn, Figma… ¡Incluso en la versión de escritorio de esta misma web podéis ver una barra de navegación y otra lateral! Sin embargo, donde más probablemente tendrás que insertar una es en herramientas SAAS como por ejemplo Google Drive.
¿Cómo utilizar una sidebar?
Para saber cómo utilizar adecuadamente una sidebar y cómo mejorar la experiencia de usuario con ellas, hay que volver al objetivo de las sidebars que no es otro que facilitar la navegación. Para ello se deben cumplir los siguientes principios:
- Encontrabilidad
- Eficiencia
- Accesibilidad
- Reconocimiento
- Consistencia
- Adaptabilidad
En consecuencia, en la sidebar deben encontrarse enlaces a las principales páginas y clústers del sistema que permitan una navegación rápida y eficiente por él. Para ello, es importante que los elementos queden siempre a mano y que también podamos desplazarnos de uno a otro con el teclado u otros dispositivos que permitan la accesibilidad. Además, los destinos deben ser claramente reconocibles, razón por la que se recomienda utilizar textos precisos y concisos frente a iconos. Más allá de esto, la buena experiencia de navegación debe ser consistente y adaptada a los diferentes medios y tamaños de pantalla para mantenerla óptima independientemente del contexto de uso.
Por estas mismas razones el menú debe dejar a la vista la mayor cantidad de opciones posibles sin llegar a causar conflictos de lectura. No es una buena práctica reducir tamaños de letra, ni como decíamos sustituir el texto por iconos poco representativos. Esto mismo se aplica a generar categorías poco relevantes o un excesivo nivel de subcategorías.
Por otro lado, si consideramos que el menú lateral debe sustituir a la navbar, debemos incluir en él los mismos enlaces y utilidades que tendríamos en la barra de navegación. Además debemos tener en cuenta ciertas características de cada uno para elegir la idoneidad. Preferiremos la sidebar cuando tengamos suficiente espacio, queramos dar notoriedad a la navegación y queremos que la barra sea permanente. Nos decantaremos por la navigation bar tenemos un excesivo contenido, si no queremos que la navegación esté siempre presente, si queremos que la navegación pase más desapercibida o si vamos a esconder elementos bajo un menú de hamburguesa.
Si en vez de tener la barra lateral como sustituta de la superior, la tenemos como complementaria, tenemos dos posibilidades:
- Sidebar para acciones principales (toolbar)
- Sidebar para jerarquía principal
- Sidebar para navegación local
El primer caso sería hacer como los programas de Adobe o Figma y centrar la navegación en la barra superior, dejando las acciones más utilizadas en la barra lateral para que actúe de toolbar.
En el segundo caso, poner la navegación principal en la sidebar, supondría que la barra lateral sólo tuviera enlaces o acciones de primer nivel. Las subcategorías o niveles inferiores, quedarían dinámicos en la barra de navegación. Sirva de ejemplo esta captura de Userpilot donde la barra superior actúa como filtros de la información a la que sea accede desde la barra izquierda.
En el tercer caso, el menú lateral contendría el contenido de la propia página para que sea más fácil navegar por ella. Esto se ve en la mayoría de sistemas de diseño pero también es buen ejemplo la documentación de Figma.
¿Cómo diseñar una sidebar?
Lo primero para diseñar una sidebar es tener en cuenta la distribución vertical. A partir de aquí voy a tomar de ejemplo la anatomía de éstas en el sistema de diseño de Dell.
Por un lado tenemos enlaces principales, grupos o categorías principales o incluso acciones principales que son las que se van a ver a simple vista. Después tendremos subcategorías o enlaces de niveles inferiores para tener bien organizados todos los puntos de navegación del sitio.
Además, podemos tener un botón para colapsar el menú y que éste libere espacio de la vista que posiblemente sea muy útil para trabajar en él. Este botón de colapsar podrá ir en la parte superior o inferior de la barra.
Sin embargo, echo en falta más opciones de la barra lateral como los avatares de usuario para gestionar el perfil del usuario o el botón de acción flotante que Material incluye en sus navigation rails y del que van a salir más acciones secundarias. Es interesante este caso, porque no es un botón cualquiera sino que actúa como grupo de botones.
