Re­s­po­n­si­ve na­vi­ga­tion: menús dinámicos en di­s­po­si­ti­vos móviles

La na­ve­ga­ción re­s­po­n­si­va o re­s­po­n­si­ve na­vi­ga­tion es uno de los aspectos clave de la op­ti­mi­za­ción móvil. Si la na­ve­ga­ción móvil no permite a los usuarios moverse sin problemas de un punto a otro, es probable que abandonen la página rá­pi­da­me­n­te, lo que se traduce en una pérdida de tráfico y, sobre todo, de ingresos. Existen distintos enfoques, como la na­ve­ga­ción de­s­ple­ga­ble o la barra de na­ve­ga­ción inferior, que pueden ayudar a so­lu­cio­nar­lo.

¿En qué se ca­ra­c­te­ri­za una buena na­ve­ga­ción web?

Una buena na­ve­ga­ción web es el eje central de una página web, ya que se convierte en la he­rra­mie­n­ta a través de la que el usuario encuentra la in­fo­r­ma­ción relevante para él. Por lo tanto, los elementos de control deben funcionar con eficacia, y la es­tru­c­tu­ra debe ser co­m­pre­n­si­ble y ex­pli­ca­ti­va, además de permitir un manejo intuitivo. El reto pa­r­ti­cu­lar de los menús de na­ve­ga­ción re­s­po­n­si­vos es, sobre todo, la falta de espacio y el método de entrada táctil propio de los di­s­po­si­ti­vos móviles. Sin embargo, hoy en día existen algunas so­lu­cio­nes re­s­po­n­si­vas que po­si­bi­li­tan una na­ve­ga­ción web clara y de fácil manejo. La idea básica que se esconde detrás del diseño re­s­po­n­si­vo es que tanto el contenido como el diseño de las páginas web se adapten de manera dinámica a sus re­s­pe­c­ti­vas co­n­di­cio­nes y al tamaño del terminal.

En la mayoría de los casos es adecuado optar por el enfoque “mobile first” para crear páginas web. La op­ti­mi­za­ción móvil pone en primer plano el concepto de diseño, es decir, la co­n­ce­p­ción, la usa­bi­li­dad y el re­n­di­mie­n­to de la versión móvil tienen pre­fe­re­n­cia, mientras que, en un segundo lugar, se sitúa la ada­p­ta­ción para poder vi­sua­li­zar­se en or­de­na­do­res de sobremesa y po­r­tá­ti­les. Adaptar una na­ve­ga­ción web existente a di­s­po­si­ti­vos móviles suele ser más co­m­pli­ca­do y laborioso. Antes de comenzar con la pla­ni­fi­ca­ción y puesta en marcha de una na­ve­ga­ción re­s­po­n­si­va, es fu­n­da­me­n­tal responder a algunas cue­s­tio­nes básicas, es­pe­cia­l­me­n­te en lo que respecta a la ubicación y la es­tru­c­tu­ra general de la na­ve­ga­ción.

¿Dónde debe colocarse el menú de na­ve­ga­ción?

Las ubi­ca­cio­nes más comunes para el menú de na­ve­ga­ción son el pie de página (footer) y la parte superior de la página. En el caso de la na­ve­ga­ción ubicada en el footer, los usuarios solo en­cue­n­tran al principio de la versión móvil un enlace hacia la sección del pie de página, donde se sitúan los distintos elementos del menú.

Sin embargo, las na­ve­ga­cio­nes colocadas a pie de página no son muy prácticas, ya que los usuarios esperan que los elementos im­po­r­ta­n­tes de na­ve­ga­ción sean fá­ci­l­me­n­te ac­ce­si­bles, por lo que cada vez se recurre menos a esta opción. Por eso, hoy en día es más habitual encontrar la na­ve­ga­ción móvil (mobile na­vi­ga­tion) en la parte superior de la página. Esta versión de na­ve­ga­ción resulta más familiar para la mayoría de personas.

¿Cómo se es­tru­c­tu­ra este tipo de menús de na­ve­ga­ción?

Las po­si­bi­li­da­des para es­tru­c­tu­rar este tipo de menús son variadas. Los menús de na­ve­ga­ción por medio de listas o por medio de cua­drí­cu­las se en­cue­n­tran entre los métodos más uti­li­za­dos.

La clásica pre­se­n­ta­ción en forma de lista se utiliza tanto en menús de na­ve­ga­ción simples como en aquellos más complejos y con varios niveles. Sus ventajas residen en una im­ple­me­n­ta­ción sencilla y en que responde a los hábitos de na­ve­ga­ción de los usuarios.

Una na­ve­ga­ción en cua­drí­cu­la es ideal cuando los elementos del menú son cortos, y resulta es­pe­cia­l­me­n­te útil en el comercio ele­c­tró­ni­co. Los elementos se muestran uno al lado del otro en formato de cua­drí­cu­la, y el número de columnas varía según el tamaño de la pantalla. Si se opta por una cua­drí­cu­la de dos columnas, es re­co­me­n­da­ble que haya un número par de elementos para evitar una pre­se­n­ta­ción asi­mé­tri­ca.

¿Qué tipos de na­ve­ga­ción móvil existen?

Llegamos ahora a la pregunta clave: ¿cómo se abre el menú de na­ve­ga­ción en móviles? La forma en que se presenta el menú determina el concepto de na­ve­ga­ción. Las opciones de vi­sua­li­za­ción son muy variadas: el menú puede estar visible desde el principio o mostrarse solo al tocar un icono, puede desplazar el contenido o su­pe­r­po­ne­r­se a él. A co­n­ti­nua­ción, te mostramos algunos ejemplos.

Na­ve­ga­ción mediante menú de­s­ple­ga­ble

Los menús de­s­ple­ga­bles son uno de los modelos clásicos de la re­s­po­n­si­ve na­vi­ga­tion. Estos evocan la es­tru­c­tu­ra de la na­ve­ga­ción en los or­de­na­do­res de sobremesa, se ganan la confianza de los usuarios y son a menudo un concepto de na­ve­ga­ción muy selecto. El menú de na­ve­ga­ción se activa al pulsar un botón o el icono co­rre­s­po­n­die­n­te y se superpone al contenido, sin llegar a cubrirlo por completo.

Na­ve­ga­ción web mediante menú de­s­li­za­n­te

Otro tipo de na­ve­ga­ción muy popular es la llamada na­ve­ga­ción de­s­li­za­n­te hacia abajo (slidedown), también conocida como na­ve­ga­ción tipo acordeón o menú de­s­ple­ga­ble ex­pa­n­di­ble. Al pulsar el botón del menú, este se despliega. A di­fe­re­n­cia del menú de­s­ple­ga­ble clásico, la versión slidedown no se superpone al contenido, sino que lo empuja hacia abajo. Aunque su im­ple­me­n­ta­ción es algo más compleja, se considera una opción muy escalable y que ahorra espacio. Gracias a la po­si­bi­li­dad de integrar submenús, ofrece una solución elegante tanto para menús simples como para es­tru­c­tu­ras más complejas.

Barra de na­ve­ga­ción inferior

La barra de na­ve­ga­ción inferior es una solución cada vez más popular en apli­ca­cio­nes móviles y páginas web, en la que el menú se muestra en la parte inferior de la pantalla. Este tipo de na­ve­ga­ción resulta es­pe­cia­l­me­n­te cómoda, ya que en los sma­r­t­pho­nes es muy fácil de alcanzar con el pulgar. Es ideal para proyectos con pocos, pero im­po­r­ta­n­tes, elementos de na­ve­ga­ción y ofrece una es­tru­c­tu­ra clara y ordenada que ayuda a los usuarios a moverse rá­pi­da­me­n­te entre las secciones pri­n­ci­pa­les de la página.

Menú de na­ve­ga­ción off canvas

En el caso de esta solución, la re­s­po­n­si­ve na­vi­ga­tion se queda fuera de la zona visible habitual. El menú no está integrado en el diseño, de modo que la na­ve­ga­ción off canvas es una solución que permite ahorrar espacio debido al hecho de que el menú no es visible en la ventana. Este aparece al tocar el icono de menú, tras lo que se hace pe­r­ce­p­ti­ble su es­tru­c­tu­ra. Esta opción está indicada para je­ra­r­quías de na­ve­ga­ción de gran en­ve­r­ga­du­ra que cuentan con di­fe­re­n­tes submenús.