3 alternativas modernas a la navegación en árbol

La navegación es uno de los elementos más importantes en el diseño de la experiencia del usuario. Un buen diseño de navegación es lo que permite a los usuarios abrir tu aplicación, orientarse y conseguir lo que quieren.

Lo ideal es que tu navegación sea sencilla y lo más fácil de entender posible. Si tienes navegación deficientetus usuarios se perderán en el desierto de tu arquitectura de la información y se quedarán fuera. Eso es lo último que quieres.

Hay muchas formas de enfocar la navegación y cada solución tiene sus propios méritos y defectos.

Un enfoque habitual es la navegación en árbol, que la mayoría de la gente recordará del uso de Windows, de las capas en Photoshop o de abrirse camino a través de grandes jerarquías de archivos.

Luego hay otros enfoques como los mega menús, los acordeones y los menús deslizantes.

Con enfoques más modernos de la navegación que están cambiando el panorama actual de la UX, especialmente con el auge de los dispositivos móviles, la antaño omnipresente navegación en árbol está cayendo lentamente en desgracia, a medida que los diseñadores crean patrones nuevos y mejorados para navegar por las experiencias de los usuarios.

En este post, Justinmind cubrirá los fundamentos de la navegación en árbol y te dará 3 alternativas modernas que puedes utilizar al crear patrones de navegación impresionantes para tus usuarios.

En primer lugar, vamos a explicar qué es la navegación en árbol. La navegación en árbol es una patrón de navegación que permite acceder a una estructura jerárquica.

Si te gusta la naturaleza, te gustará saber que la estructura de la navegación arbórea se divide en árboles, ramas y hojas. Sin embargo, ahí acaba la naturaleza y empieza la terminología informática.

En una estructura o vista de navegación en árbol, tendrás en la parte superior el nodo raíz nodoque también puede denominarse padre. Las líneas que conectan los elementos son las ramas y los hijos de los padres, que no tienen hijos, son las hojas.

Para hacerte la vida más fácil, visualiza un sistema de carpetas en tu ordenador. Si alguna vez has tenido que navegar por un laberinto de carpetas y documentos, puede que estés familiarizado con la navegación en árbol. Esto es lo que parece:

Normalmente, la navegación en árbol se muestra verticalmente y hay iconos de más y menos para indicar la apertura y cierre de las carpetas dentro del árbol.

Cuando se trata de arquitectura de la información, hay varias formas de presentar el contenido a tus usuarios.

Antiguamente, parecía que la navegación en árbol tenía el monopolio de la navegación, pero a medida que se crean y popularizan distintos patrones, hay más equilibrio en la aplicación de la navegación en árbol en el diseño de la experiencia del usuario y de la arquitectura de la información.

Asegurarse de que la información está organizada correctamente y en un orden que tenga sentido para las personas conducirá a una buena UX. Una navegación confusa nunca es buena para tus usuarios. Los diseñadores invierten mucho tiempo en garantizar una buena navegación, incluso en la fase de wireframe del diseño.

La navegación en árbol es útil si quieres organizar la información en una jerarquía profunda y seguimos queriendo conseguir una buena experiencia de usuario, pero no va a ser fácil. Simplemente hay mejores formas de hacer las cosas hoy en día.

Si utilizas una jerarquía profunda en tu diseño UX, procura que haya opciones de navegación alternativas (o incluso una buena función de búsqueda) que conduzcan directamente a niveles inferiores del flujo de navegación. ¿Por qué? Es contraintuitivo porque no pensamos en estructuras jerárquicas, sino más bien en términos de similitud.

El principal problema de la navegación en árbol es que exige mucho del usuario. Si tienes una jerarquía profunda como la anterior, tu usuario puede perderse, distraerse, aburrirse o simplemente abandonar porque hay mucho trabajo para llegar a donde quiere ir.

Además, en un dispositivo móvil, no es fácil hacer clic en una vista de árbol. Los iconos son pequeños y nuestros dedos grandes. Debido a esta limitación en la UX, la navegación en árbol se muestra mejor en un ordenador de sobremesa.

Si tienes muchas opciones en tu árbol de navegación, el usuario tiene que dedicar tiempo a escanear y buscar lo que quiere en las categorías indicadas.

Esto significa que quizá tengan que adivinar adónde van, sobre todo si hay muchas categorías para elegir.

Afortunadamente, los diseñadores pueden aplicar Ley de Hick para remediarlo agrupando las categorías de forma más intuitiva.

Aquí tienes otros problemas al utilizar la navegación en árbol en tus diseños:

• Navegar por los árboles requiere múltiples interacciones para ir de la raíz a la hoja.
• Los nodos suelen ser pequeños y requieren mucha precisión al hacer clic con el ratón dentro de una navegación en árbol. Este problema se agrava en los dispositivos móviles.
• Cuanto más te adentras en un árbol, más difícil es ver de dónde vienes, ya que las hojas pueden oscurecer el contexto más amplio de la taxonomía.

Vale, la navegación en árbol no es del todo redundante, simplemente está menos presente. Sigue siendo útil. Todavía se encuentra en Windows. La utilizamos en la herramienta de creación de prototipos de Justinmind para nuestro Esquema paleta. La verás en Photoshop cuando crees varias capas.

No es que la navegación en árbol sea un mal patrón. Es que fue muy, muy popular durante mucho tiempo y ahora hay patrones emergentes que funcionan mejor para diferentes contextos. Veamos ahora algunos de esos otros patrones y cómo puedes crear los tuyos propios utilizando Justinmind.

Para ser lo más eficientes posible, empieza primero descargando e instalando Justinmind. Tenemos una versión de prueba gratuita, no te preocupes.

Un acordeón es un patrón de diseño que, al hacer clic, se expande para revelar información.

Supongamos que tienes un panel lateral con varias opciones de navegación. Una de ellas podría ser «Bandeja de entrada». Al hacer clic en «Bandeja de entrada», se despliegan otras posibilidades de navegación, como «Nuevo», «Enviados» o «Papelera». Esto es divulgación progresiva en acción. La divulgación progresiva utilizada en un patrón de navegación en acordeón reduce los errores y facilita el aprendizaje de las aplicaciones, según Grupo Nielsen Norman

. Because you’re showing fewer options there is less chance for your user to become overwhelmed.

También ahorran espacio, lo que contribuye en gran medida a mejorar la usabilidad, especialmente en dispositivos móviles.

Para crear tu propio menú acordeón en Justinmind, inicia un nuevo prototipo.

Cuando hayas creado tu prototipo, tendrás que combinar nuestros paneles dinámicos con Eventos enriquecidos. Utilizando paneles dinámicos y eventos “Al hacer clic”, tu usuario podrá expandir y replegar fácilmente el menú acordeón.

Una visión global del diseño de tu propio acordeón.

Los mega menús son bastante prolíficos. Son estupendos para la navegación, si se hacen bien. Normalmente, un mega menú estará formado por grandes paneles que incluyen agrupaciones de opciones de navegación. Son desplegables, de modo que los usuarios pasan el ratón sobre una sección para revelar el menú.

Como los mega menús son grandes, hay mucho espacio que llenar. Esto significa que el contenido puede agruparse en categorías sensatas para facilitar el escaneo.

Como suele haber mucho espacio que utilizar en un mega menú, las imágenes pueden mejorar aún más la usabilidad del menú y facilitar su comprensión a los usuarios.

Empieza creando un nuevo prototipo en la herramienta de creación de prototipos de sitios web de Justinmind. Como un mega menú es grande y ocupa mucho espacio, este tipo de menú se utiliza mejor en un ordenador de sobremesa, así que empieza con un prototipo web: puedes elegir sus propias dimensiones.

Entonces tendrás que utilizar paneles dinámicos. Añade uno al lienzo. Dentro de este panel, añade otro. Ahora tienes el menú.

Para hacerlo interactivo, tendrás que añadir una serie de simples Eventos. These events will be used so that when the user hovers their mouse over the main menu item, the mega menu will appear.

Para una explicación más detallada de cómo crear el mega menú perfecto para tus prototipos, dirígete a nuestra sección de soporte.

Un menú deslizante, también llamado menú hamburguesa por el parecido de su icono con un Big Mac, es una forma útil de mostrar múltiples opciones de navegación sin comprometer el espacio comercial.

El menú deslizante es una función que se encuentra en muchas aplicaciones y sitios web de dispositivos móviles, pero también es habitual verlo en sitios web.

Dado que este menú oculta muchas opciones de navegación, existe un debate sobre su eficacia. Sin embargo, a pesar de ello, sigue siendo una opción para muchos diseñadores.

Cuando utilices un menú hamburguesa, intenta evitar poner enlaces importantes dentro de él por miedo a que pasen desapercibidos.

En Justinmind crea un nuevo prototipo. Then design the UI as you want it. Be sure to get a good look at all the widgets on offer to ensure that you’re making something that has a great user experience.

Combina nuestros widgets UI con nuestros potentes paneles dinámicos. This is where you can put all the content for the slide menu. It’ll sit just outside of the view of the main screen of your device. Add power interacciones para crear el movimiento de la diapositiva y un icono de hamburguesa para que la gente sepa qué hacer clic.

Algunos menús de hamburguesa tienen el texto “menú” escrito cerca de ellos para dejar claro que el icono es, de hecho, clicable y un menú.

Para un resumen completo del menú de diapositivas, este tutorial te ayudará.

Cuando se trata de una buena UX, puede que la navegación en árbol no sea tu elección número uno. Pero tiene su lugar. La navegación en árbol es buena para los usuarios que saben exactamente lo que quieren y dónde encontrarlo. Pero hay alternativas que pueden ayudar a tu usuario a llegar más rápido y de forma más placentera: la receta perfecta para una UX excepcional.