El Navicon (icono que desplega y replega los menús externos o de fuera de pantalla) ha sido un controvertido recurso que data del año 1981 (¡woah!) y que comenzó a extenderse allá por 2013, haciéndose indispensable desde entonces para las adaptaciones en móviles y tabletas. Universalmente identificado por el menú de hamburguesa -que en realidad es una lista-, ha supuesto extraer el menú del campo de visión resolviendo la necesidad de optimizar el espacio en dispositivos reducidos: los contenidos pueden ya ocupar la totalidad de la pantalla sin necesidad de reservar una zona superior para el menú. Hasta aquí, bien.

Ejemplos de iconos utilizados como Navicon

Ejemplos de iconos utilizados como Navicon

Universalizando el Navicon

La creciente unificación en los diseños de plataformas web para sus adaptaciones de móvil, tableta y escritorio ha resultado en una simplificación de su diseño y una mayor amplitud y espaciado de los elementos, aplicando además una mayor eficiencia y criterio en la selección de contenidos. Pero no todo en esta corriente unificadora es positivo: además de estimular prácticas y corrientes de diseño acertadas también da lugar a una arriesgada tendencia basada en incorporar componentes en adaptaciones para las que no están destinados, y he aquí una de ellas: utilizar el Navicon (también) para las versiones para escritorio.

Ejemplos de webs con Navicon en escritorio

Incorporar un botón que desplegue y replegue la navegación primaria puede parecer una opción interesante para plataformas minimalistas (e indispensable al optar por la tendencia actual de menús de pantalla completa), y tanto el auge de los iconos vectoriales como la sed reduccionista digital hace que la idea de ocultar la navegación sea una tentadora alternativa, pero… ¿y si estuviéramos reproduciendo una mala práctica de forma masiva sin base alguna?

Efectivamente, delegar en el Navicon la tarea de desplegar las estructuras de navegación primarias, sobretodo en disposiciones de escritorio, es una equivocada consecuencia de llevar el mobile-first a niveles para los que nunca fue ideado, y su uso en disposiciones móviles es la prueba viviente de que no tenemos ni idea de lo que hacen nuestros usuarios cuando nos navegan. Sin acritud, que yo también lo he utilizado.

¿Por qué no debes utilizar el Navicon?

Antes de decantarte por incluir este recurso en cualquiera de las adaptaciones de tu site, ten en cuenta los siguientes puntos (y asegúrate de que tu cliente también lo haga):

Detectabilidad y fricción cognitiva

Aún no estamos en un punto en el que podamos garantizar que el usuario identifique la función del Navicon. El reciente testeo A/B de Friday sobre el uso de Navicon en disposiciones de escritorio solicitaba a los usuarios que accedan a la sección Contacto de una web con menú oculto y Navicon, y su versión equivalente con menú superior visible. Este concluye que:

  • Con el Navicon un 83% de usuarios llegó a de localizar y ejecutar el menú, en un tiempo medio de 39 segundos a los que se suman 4,7 más hasta ejecutar el Contacto. Esta fricción y su consiguiente esfuerzo mental supone un incremento sensible de la carga cognitiva durante su experiencia, y por tanto un descenso proporcional de la percepción cualitativa frente al proyecto que representa.
  • Con el menú superior visible, un 91% de usuarios llegó a localizar el menú y a acceder a la sección Contacto en un tiempo medio total de 11 segundos.
  • Finalmente, un 85% de los usuarios confirmaron preferir el menú superior de navegación frente al Navicon, justificando su decisión bajo términos como facilidad, visibilidad o claridad.

A este efecto, podemos también observar el resultado de relegar la navegación principal a un menú oculto ejecutable desde un icono en la (difunta) app Polar:

Resultado de la ocultación del menú primario de Polar

Resultado de la ocultación del menú primario de Polar

La edad no evita la alienación de usuarios

¿Tienes un target joven que seguro-seguro comprenderá la funcionalidad del menú de hamburguesa? Error. Esta decisión alienará al 20% de los usuarios de entre 18 y 44 años, y al 50% de los usuarios de entre 45 y 64 años ya que no relacionan la hamburguesa con el acceso a la navegación primaria, acorde con el estudio de 2015 de Catalyst Group.

Cabe mencionar que (atención) estos resultados son referidos únicamente a dispositivos móviles, así que mejor no hablemos de escritorio. Es el contexto tecnológico del target el que podría arrojar algo de seguridad frente a esta práctica.

Tiempo de consecución de acción y dificultad perceptual de navegación

Esconder la navegación primaria de una web incrementa el tiempo de consecución de acciones por parte del usuario, aumenta en la dificultad perceptual del site y reduce el volumen de visitantes que hacen uso del sistema de navegación según el estudio de Nielse Norman de 2016.

Aumento de acciones necesarias y de coste de iteracción

A menos que sea indispensable -como ya mencionamos en el caso de menús de pantalla completa- añadir una acción previa adicional para permitir el acceso a los diferentes contenidos de navegación supone obligar al usuario a realizar una acción para decidir qué acción desea realizar. Redundante.

Sacrificar usabilidad y detectabilidad en una web por motivos estéticos hace prevalecer el estilo sobre el contenido, contradiciendo la norma más básica del diseño web.

Intuitividad y localización

Optar por un menú fuera de pantalla priva al usuario de visualizar de forma directa su posición actual: no tendrá una referencia de la página o sección en la que se encuentra a menos que desplegue el menú o que la página esté dotada de breadcrumbs.

Alternativas al menú de hamburguesa

Partiendo de la base de que no hay necesidad alguna de conservar un Navicon para dispositivos grandes, tenemos las siguientes alternativas para dispositivos reducidos:

  • Etiquetado sintáctico: rescatemos la expresión Menú para que acompañe o sustituya al Navicon. No resuelve los inconvenientes de ocultar la navegación pero sí buena parte de los de accesibilidad y detectabilidad. Un amplio testeo conductual A/B registró la reacción de 250.000 visitantes frente a dos menús ocultos: uno identificado mediante Navicon y otro de forma expresiva, concluyendo que el menú identificado únicamente por la hamburguesa es ejecutado un 20% menos que un menú identificado con el texto “MENU”. Ahí es nada.
  • Combinación de diferentes recursos de navegación: siguiendo la senda de Facebook o Instagram, garantizar el acceso directo a la navegación primaria y relegar a menús ocultos las secciones secundarias es una opción factible para plataformas con una densa arquitectura de navegación.
  • Menús fijos visibles: sí, siempre que el espacio físico lo permita podemos mostrarlos tanto en la parte inferior de la pantalla (fig. 2) como en la superior (fig. 1):
    Alternativas al menu de hamburguesa

    Alternativas de colocación del menú primario

  • Menús de ocultación automática: la navegación dotada de un sistema de ocultación automática (auto-hiding navigation en inglés) tiene los beneficios del menú fijo visible con la ventaja adicional de evitar que reste espacio al mismo:
    Menú de ocultación automática

    Menú de ocultación automática

  • Reformulación de la arquitectura de navegación: suena arduo, pero invertir horas buscando una forma eficiente de dar acceso a X secciones de forma directa nos lleva a una conclusión que por lo general tratamos de evitar: tenemos demasiadas secciones primarias. Replantear la estructura de navegación y por tanto la arquitectura web es una buena opción para sintetizar aun más la jerarquía interna y simplificar una navegación que probablemente lo esté pidiendo a gritos.
  • Si no queda otra, prevalencia visual y flotación del Navicon: llegados a un hipotético punto en el que necesitemos sí o sí una hamburguesa para la navegación principal, hagamos de esta un elemento cuya visibilidad esté garantizada. Opciones como maximizar el tamaño e impacto cromático del Navicon, flotarlo y/o dotarlo de efectos como el que sigue nos ayudarán a no trastocar en exceso el ratio de conversión. Experimenta haciendo scroll vertical:

Experiencia propia y conclusión

Desde mi (humilde) experiencia, el único proyecto en el que mantuve el Navicon para las versiones de todos los dispositivos fue la Escuela Internacional de Tatuadores: un diseño minimalista, un target joven… ¿qué podía fallar? No pasó una semana y llegaron las primeras señales por parte de los usuarios, que o bien no encontraban las secciones esenciales o bien solicitaban información vía mail porque “la página estaba sin terminar”. Un vistazo a Analytics confirmó que estábamos alienando a un volumen más que significativo de usuarios por pasarnos de minimalistas.

Como conclusión, erradicar el Navicon de las disposiciones de escritorio se hace imprescindible, y plantear alternativas al mismo para móviles y tabletas no sólo es factible sino que sus beneficios medibles son cuantiosos. Disponemos de herramientas online de análisis conductual de usuarios que estudian la accesibilidad y navegabilidad de un site, pero este es un tema que mejor tratar en otra ocasión.

Todo en la vida tiene un principio y un final, excepto optimizar la usabilidad de una web.
Eso no tiene final alguno.