En los últimos años, el visible crecimiento de la navegación desde dispositivos móviles planteó importantes desafíos para  los diseñadores web. Uno de ellos es la necesidad de adaptar el contenido a un área menor que el de los monitores de escritorio. Entre las soluciones propuestas para este problema se encuentran los menús off-canvas: menús de navegación que están inicialmente ocultos, pero aparecen tras presionar un botón. Inicialmente, los menús off-canvas son invisibles ya que no ocupan lugar en el viewport, que es el espacio visible para el usuario. De esta manera, permiten que todo el espacio disponible en la pantalla sea utilizado para el contenido. Pero tras presionar un botón, el menú se hace lugar tapando o empujando el área de contenido mediante una animación. Para volver a esconder el menú, podemos accionar un botón específico o tocar/cliquear en otro sector de la pantalla. Generalmente, el menú se desliza desde el costado izquierdo, aunque hay quienes eligen los otros tres costados. El botón que permite abrir el menú suele identificarse con el ícono hamburger, que consiste en tres barras horizontales apiladas.

Infobae presenta un menú off-canvas que se desliza desde la izquierda de la pantalla. El botón que permite abrir el menú tiene el ícono hamburger, pero se transforma en una cruz (cerrar) una vez accionado.

En la popularización de los menús off-canvas influyó el desarrollo de tecnologías que permiten implementarlos con facilidad, como las animaciones de jQuery y las transiciones y keyframes de CSS3. Los frameworks de desarrollo front-end más populares incluyen menús off-canvas entre sus componentes, no solo para entornos mobile sino también para resoluciones de escritorio.

Actualmente, este patrón de diseño es uno de los más comunes de la Web, especialmente entre los sitios responsivos. Pueden encontrarse varios motivos para explicar su popularidad:

• Como el menú está inicialmente escondido, podemos aprovechar todo el espacio de la pantalla para el contenido.
• Abrir el menú no quita al usuario totalmente de su contexto actual, ya que, en la mayoría de los casos, al menos unos pocos píxeles de contenido permanecen visibles (generalmente, con una capa oscura encima para que el menú se destaque más). Incluso si, al abrirse, el menú ocupa toda la pantalla, el usuario puede cerrarlo con facilidad para restaurar la página a su estado anterior. Este comportamiento es natural porque proviene de los libros en papel, donde se alternar fácilmente entre dos páginas. Por ejemplo, el lector puede leer el índice mientras mantiene otra página abierta con el pulgar, para volver a ella con facilidad. En otras palabras, abrir un nuevo contexto no implica abandonar por completo el contexto anterior. Este efecto se nota mejor cuando el menú no tapa el contenido, sino que lo empuja hacia un costado. Usar este tipo de ayudas especiales para indicar el contexto actual es especialmente importante en dispositivos móviles, donde, generalmente, la barra de scroll es pequeña y no se muestra hasta que el usuario toca la pantalla.
• Lo anterior implica que, al abrirse, el menú no distrae al usuario del contenido que queremos presentar. Uno de los pioneros en el uso de off-canvas fue Facebook, que con esta modalidad logró que los usuarios puedan acceder a la navegación sin perder el foco sobre el historial o timeline de publicaciones, característica vital de esta red social.

Hay quienes creen que este enfoque es más práctico porque solo expone la navegación cuando el usuario la necesita, evitando derrochar espacio. Sin embargo, algunos expertos advierten que ocultar los enlaces de navegación obliga al usuario a realizar un esfuerzo superior para hallarlos y utilizarlos (incluyendo un clic/toque adicional para abrir el menú). Desde Nielsen Norman Group sugieren ocultar la navegación únicamente en resoluciones mobile, donde el ahorro de espacio es una necesidad importante. Además, los menús off-canvas son más agradables de usar desde dispositivos táctiles porque ofrecen la posibilidad de abrirlos y cerrarlos deslizando el dedo desde uno de los costados de la pantalla, un gesto natural que no se puede replicar con el mouse.

Aun así, ocultar la navegación solo es aconsejable cuando la cantidad de enlaces a mostrar sea excesiva para las dimensiones del viewport. En cambio, listas con hasta tres o cuatro enlaces (dependiendo de la cantidad de caracteres) pueden caber perfectamente en el ancho de un smartphone de baja resolución. En estos casos, se puede usar un menú horizontal (incluso de tabs o pestañas) sin que el área de contenido se vea perjudicada.

Si la modalidad off-canvas es inevitable, debemos ubicar el menú y el botón que lo acciona en el lugar más adecuado de la pantalla. Es fácil notar que un usuario diestro utiliza su mano derecha como principal medio de interacción, y, que en los momentos de inactividad, mantiene esta mano reposada sobre el costado derecho del dispositivo. De esta observación podemos concluir que lo mejor es ubicar el botón hamburger en alguna de las esquinas de la derecha y que el menú aparezca por ese costado, para que el usuario tenga la navegación «a mano» y no deba realizar un movimiento antinatural para alcanzarla (tal movimiento podría ser llevar la mano derecha al costado opuesto —tapando la pantalla momentáneamente— o tratar de completar la acción con su mano inhábil). Sin embargo, la convención vigente es colocar el hamburger en la esquina superior izquierda y que el menú aparezca por el lado izquierdo de la pantalla. Por lo tanto, el usuario esperará encontrar los elementos de navegación en ese lugar, sin importar que deba realizar un esfuerzo físico mayor para alcanzarlos. Por lo tanto, ubicar la navegación a la izquierda es la opción más segura aunque la intuición nos diga lo contrario.

Artículos relacionados

• Botones hamburger: un elemento de interfaz cada vez más popular