3 alternatives modernes à la navigation par arbre

La navigation est l’un des éléments les plus importants du design de l’expérience utilisateur. Un bon design de navigation est ce qui permet aux utilisateurs d’ouvrir votre appli, de s’y retrouver et de réaliser ce qu’ils souhaitent.

Idéalement, votre navigation doit être simple et aussi facile à comprendre que possible. Si vous avez mauvaise navigationVos utilisateurs se perdront dans les méandres de votre architecture de l’information et ne pourront plus y accéder. C’est la dernière chose que vous souhaitez.

Il existe de nombreuses façons d’aborder la navigation et chaque solution a ses mérites et ses défauts.

L’une des approches les plus courantes est la navigation arborescente, dont la plupart des gens se souviennent lorsqu’ils utilisent Windows, les calques dans Photoshop ou de grandes hiérarchies de fichiers.

Il existe également d’autres approches telles que les méga-menus, les accordéons et les menus coulissants.

Avec des approches plus modernes de la navigation qui modifient le paysage UX d’aujourd’hui, en particulier avec l’essor des appareils mobiles, la navigation par arbre, autrefois omniprésente, tombe lentement en désuétude à mesure que les designers créent des modèles nouveaux et améliorés pour naviguer dans les expériences des utilisateurs.

Dans ce billet, Justinmind va couvrir les bases de la navigation par arbre et vous donner 3 alternatives modernes que vous pouvez utiliser lors de la création de modèles de navigation impressionnants pour vos utilisateurs.

Tout d’abord, expliquons ce qu’est la navigation arborescente. La navigation arborescente est une modèle de navigation qui permet d’accéder à une structure hiérarchique.

Si vous aimez la nature, vous serez heureux d’apprendre que la structure de la navigation arborescente se décompose en arbres, branches et feuilles. Cependant, la nature s’arrête là et la terminologie informatique commence.

Dans une structure de navigation ou une vue arborescente, vous trouverez au sommet le nœud racine nœudLes lignes qui relient les éléments sont les branches et les enfants des parents, qui n’ont pas d’enfants eux-mêmes, sont les feuilles. Les lignes qui relient les éléments sont les branches et les enfants des parents, qui n’ont pas eux-mêmes d’enfants, sont les feuilles.

Pour vous faciliter la tâche, imaginez que vous parcourez un système de dossiers sur votre ordinateur. Si vous avez déjà eu à naviguer dans un labyrinthe de dossiers et de documents, vous connaissez sans doute la navigation par arborescence. Voici à quoi cela ressemble :

Normalement, la navigation dans l’arborescence s’affiche verticalement et des icônes plus et moins indiquent l’ouverture et la fermeture des dossiers dans l’arborescence.

En matière d’architecture de l’information, il existe plusieurs façons de présenter le contenu à vos utilisateurs.

À l’époque, il semblait que la navigation arborescente avait le monopole de la navigation, mais à mesure que différents modèles sont créés et popularisés, l’application de la navigation arborescente dans le design de l’expérience utilisateur et de l’architecture de l’information est plus équilibrée.

Veiller à ce que les informations soient organisées correctement et dans un ordre qui a du sens pour les gens conduira à une bonne UX. Une navigation confuse n’est jamais une bonne chose pour vos utilisateurs. Les designers investissent beaucoup de temps pour assurer une bonne navigation, même au stade du wireframe de la conception.

La navigation par arborescence est utile si vous souhaitez organiser les informations dans une hiérarchie profonde et veulent toujours offrir une bonne expérience à l’utilisateur, mais ce ne sera pas facile. Il y a tout simplement de meilleures façons de faire les choses aujourd’hui.

Si vous utilisez une hiérarchie profonde dans votre design UX, essayez de vous assurer qu’il existe des options de navigation alternatives (ou même une bonne fonction de recherche) pour mener directement aux niveaux inférieurs du flux de navigation. Pourquoi ? C’est contre-intuitif parce que nous ne pensons pas en termes de structures hiérarchiques mais plutôt en termes de similitude.

Le principal problème de la navigation arborescente est qu’elle exige beaucoup de l’utilisateur. Si vous avez une hiérarchie profonde comme celle décrite ci-dessus, votre utilisateur peut se perdre, être distrait, s’ennuyer ou simplement abandonner parce qu’il y a beaucoup de travail à faire pour arriver là où il veut aller.

De plus, sur un appareil mobile, il n’est pas facile de cliquer dans une arborescence. Les icônes sont petites et nos doigts sont grands. En raison de cette limitation de l’UX, la navigation dans les arbres s’affiche mieux sur un ordinateur de bureau.

Si vous disposez de nombreuses options dans votre arbre de navigation, l’utilisateur doit passer du temps à parcourir et à rechercher ce qu’il veut dans les catégories proposées.

Cela signifie qu’ils devront peut-être deviner où ils vont, surtout s’il y a beaucoup de catégories à choisir.

Heureusement, les designers peuvent appliquer la loi de Hick pour y remédier en regroupant les catégories de manière plus intuitive.

Voici quelques autres problèmes liés à l’utilisation de la navigation par arbre dans vos designs :

• La navigation dans les arbres nécessite de multiples interactions pour aller de la racine à la feuille.
• Les nœuds sont généralement petits et requièrent une grande précision dans les clics de souris au sein d’une navigation arborescente. Ce problème est aggravé sur les appareils mobiles.
• Plus on avance dans l’arbre, plus il est difficile de voir d’où l’on vient, car les feuilles peuvent masquer le contexte plus large de la taxonomie.

D’accord, la navigation par arbre n’est pas totalement redondante, elle est simplement moins présente. Elle est toujours utile. On la trouve encore sous Windows. Nous l’utilisons dans l’outil de prototypage de Justinmind pour notre projet de Aperçu palette. Vous la verrez dans Photoshop lorsque vous créez plusieurs calques.

Ce n’est pas que la navigation arborescente soit un mauvais modèle. C’est qu’il a été très, très populaire pendant longtemps et qu’il existe aujourd’hui des modèles émergents qui fonctionnent mieux dans différents contextes. Jetons un coup d’œil à certains de ces autres modèles et voyons comment vous pouvez créer les vôtres à l’aide de Justinmind.

Pour être le plus efficace possible, commencez d’abord par télécharger et installer Justinmind. Nous proposons une version d’essai gratuite, ne vous inquiétez pas.

Un accordéon est un modèle de design qui, lorsqu’on clique dessus, se déploie pour révéler des informations.

Imaginons que vous disposiez d’un panneau latéral contenant plusieurs options de navigation. L’une d’entre elles peut être « Boîte de réception ». Lorsque vous cliquez sur cette option, la boîte de réception s’ouvre sur d’autres possibilités de navigation, telles que « Nouveau », « Envoyé », « Corbeille ». Il s’agit de la divulgation progressive en action. La divulgation progressive utilisée dans un modèle de navigation en accordéon réduit les erreurs et facilite l’apprentissage des applications, selon Nielsen Norman Group

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

Ils permettent également d’économiser de l’espace, ce qui contribue grandement à améliorer la facilité d’utilisation, en particulier sur les appareils mobiles.

Pour créer votre propre menu accordéon dans Justinmind, démarrez un nouveau prototype.

Après avoir créé votre prototype, vous devrez combiner nos panneaux dynamiques avec des événements riches. En utilisant des panneaux dynamiques et des événements “On click”, votre utilisateur pourra facilement développer et rétracter le menu accordéon.

Une vue d’ensemble de la conception de votre propre accordéon.

Les méga-menus sont très répandus. S’ils sont bien faits, ils sont parfaits pour la navigation. En général, un méga-menu se compose de grands panneaux qui regroupent des options de navigation. Il s’agit d’un menu déroulant, c’est-à-dire que les utilisateurs survolent une section pour faire apparaître le menu.

Les méga-menus étant de grande taille, il y a beaucoup d’espace à remplir. Cela signifie que le contenu peut être regroupé en catégories judicieuses pour faciliter la lecture.

Comme il y a souvent beaucoup d’espace à utiliser dans un méga-menu, l’imagerie peut encore améliorer la convivialité du menu et le rendre plus facile à comprendre pour les utilisateurs.

Commencez par créer un nouveau prototype dans l’outil de prototypage de sites web de Justinmind. Étant donné qu’un méga-menu est volumineux et prend beaucoup de place, il est préférable d’utiliser ce type de menu sur un ordinateur de bureau. Commencez donc par un prototype web – vous pouvez choisir vos propres dimensions.

Vous devrez alors utiliser des panneaux dynamiques. Ajoutez-en un au canevas. À l’intérieur de ce panneau, ajoutez un autre panneau. Vous avez maintenant le menu.

Pour le rendre interactif, vous devrez ajouter une série de simples événements. These events will be used so that when the user hovers their mouse over the main menu item, the mega menu will appear.

Pour une explication plus détaillée sur la façon de créer le méga menu parfait pour vos prototypes, rendez-vous dans notre section d’aide.

Un menu coulissant, également appelé menu hamburger en raison de la ressemblance de son icône avec un Big Mac, est un moyen utile d’afficher plusieurs options de navigation sans compromettre l’espace de vente.

Le menu déroulant est une fonctionnalité que l’on retrouve dans de nombreuses applications et sites web sur les appareils mobiles, mais il est également courant de le voir sur les sites web.

Comme ce menu cache de nombreuses options de navigation, son efficacité fait l’objet d’un débat. Cependant, malgré cela, il est toujours utilisé par de nombreux designers.

Lorsque vous utilisez un menu hamburger, essayez d’éviter d’y placer des liens importants, de peur qu’ils ne passent inaperçus.

Dans Justinmind, créez un nouveau prototype. 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.

Combinez nos widgets UI avec nos puissants panneaux dynamiques. 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 interactions pour créer le mouvement des diapositives et une icône de hamburger pour que les gens sachent sur quoi cliquer.

Dans certains menus hamburger, le texte “menu” est écrit à côté pour indiquer clairement que l’icône est en fait cliquable et qu’il s’agit d’un menu.

Pour une présentation complète du menu diapositive, ce tutoriel vous aidera.

Lorsqu’il s’agit d’une bonne UX, la navigation arborescente n’est peut-être pas votre premier choix. Mais elle a sa place. La navigation par arborescence convient aux utilisateurs qui savent exactement ce qu’ils veulent et où le trouver. Mais il existe des alternatives qui peuvent aider votre utilisateur à y parvenir plus rapidement et de manière plus agréable – la recette parfaite pour une UX exceptionnelle.