Cours accéléré UX : Orientation

Une bonne orientation est intuitive et cohérente tout au long de l’expérience et affiche uniquement les informations pertinentes. Découvrez des exemples pratiques de conception d’orientation utile.

Même si vous n’avez jamais entendu ce terme auparavant, je peux vous garantir que vous connaissez le concept. C’est parce que, comme tant de choses qui existent dans un contexte numérique, il est basé sur une expérience du monde réel.

Wayfinding est un terme UX utilisé pour décrire les systèmes visuels et architecturaux conçus pour aider les utilisateurs à s’orienter dans nos expériences numériques. Cela s’applique aux applications, aux sites Web, aux plates-formes, aux logiciels de bureau et plus encore : tout ce qui comporte plusieurs « pages ». ou des emplacements, où un utilisateur devra naviguer entre différents états d’interface.

Dans le monde réel, vous avez fait l’expérience de la conception d’orientation lorsque vous avez regardé un plan de métro pour déterminer quel train vous mènerait à votre destination, suivi la signalisation pour vous diriger vers différentes expositions dans un musée, ou utilisé des panneaux de signalisation pour indiquer à un ami où vous rencontrer (« Je suis au coin de Main et de la 7e ! »). Qu’il s’agisse d’une grande ville ou d’une application complexe, une bonne orientation vous permet de comprendre les éléments suivants :

• Où vous vous trouvez actuellement (y compris la possibilité de le communiquer à d’autres personnes)
• Où vous pouvez aller à partir d’ici
• Comment vous rendre à d’autres endroits
• Comment rentrer chez vous ? lorsque vous avez terminé

L’objectif d’une bonne conception d’orientation est d’éviter que vos utilisateurs ne se sentent bloqués, perdus ou dépassés lorsqu’ils naviguent sur votre site Web ou votre application. Une bonne orientation sera intuitive et cohérente tout au long de l’expérience et affichera uniquement les informations pertinentes. Examinons quelques exemples pratiques de la façon dont vous pouvez mettre en œuvre des conceptions d’orientation utiles dans votre travail.

Menus de navigation globale et locale

La navigation globale fait référence à un menu de navigation de haut niveau qui indique à l’utilisateur où il peut aller sur un site Web ou une application. Il est assez courant de proposer aux utilisateurs une navigation globale en haut de la page, comme ce menu de navigation, issu de l’en-tête du site Web du New York Times.

Dans ce cas, le menu d’en-tête est considérablement condensé, avec des listes déroulantes qui s’ouvrent pour chaque sous-section, ce qui lui permet d’occuper moins de l’espace précieux du haut de page du site Web. Lorsqu’on clique sur une section, un message «local» Le menu de navigation apparaît.

Il s’agit d’un excellent exemple de divulgation progressive, ou de la pratique consistant à révéler les informations aux utilisateurs uniquement lorsqu’elles deviennent pertinentes. Cela permet d’éviter le débordement et la confusion pour les utilisateurs, tout en constituant une approche de conception visuelle très pratique et peu encombrante.

Si l’utilisateur se voyait présenter simultanément toutes les sous-sections disponibles, il serait beaucoup plus difficile de trouver ce qu’il cherche. En organisant les sous-sections en groupes apparentés (« Monde », « Affaires », « Arts », etc.) et « masquage » derrière le nom du groupe, nous pouvons permettre aux utilisateurs d’explorer et de trouver plus efficacement le contenu qui les intéresse réellement.

Fil d’Ariane

Le fil d’Ariane est un moyen visuel de représenter les sections et sous-sections par lesquelles l’utilisateur a navigué pour atteindre son emplacement actuel. Cela se fait en fournissant une liste (généralement en haut de la page ou de la section) qui montre chaque «étape» dans le voyage. Ceci est particulièrement efficace pour les sites Web ou les applications comportant de nombreuses pages imbriquées : sections, sous-sous-sections, sous-sous-sections, etc.

Par exemple, le site de l’UNC Charlotte comporte un très grand nombre de pages et de sous-pages, car elles contiennent beaucoup d’informations qui doivent être communiquées au visiteur ! Dans ce cas, l’utilisateur peut voir où il se trouve, comment il y est arrivé et comment revenir à la section précédente. Tout comme dans les contes de fées, le fil d’Ariane permet à l’utilisateur de suivre ses déplacements dans votre système.

Une approche similaire consiste à proposer des liens de navigation contextuels, comme celui-ci (également issu du site Web de l’UNC Charlotte). Ici, nous indiquons à l’utilisateur exactement où il se trouve ainsi que comment revenir.

Proposer ce type d’orientation est idéal pour encourager une exploration sécurisée ou la possibilité pour les utilisateurs d’expérimenter librement, sachant que les enjeux sont faibles. Lorsque les utilisateurs peuvent se détendre et savoir qu’il leur est facile d’annuler, de revenir en arrière ou de fouiller sans conséquences, cela augmente la vitesse à laquelle ils pourront apprendre l’interface et les fonctions de l’application.

Beaucoup d’entre nous apprennent en faisant – et lorsqu’un utilisateur sait qu’il peut « errer » autour d’une interface et retrouvent toujours le chemin de la maison, ils comprendront beaucoup plus rapidement la structure et l’organisation du site/de l’application.

Éléments de repère

Les éléments de repère sont des signes et des symboles courants et reconnaissables qui peuvent aider vos utilisateurs à s’orienter dans votre interface.

Pensez à la façon dont les points de repère sont utilisés dans la navigation réelle : ce sont généralement des éléments grands, distincts et facilement reconnaissables qui nous aident à nous situer dans le contexte de notre espace. Il peut s’agir d’une statue facilement reconnaissable dans un parc, d’une maison peinte d’une couleur vive et visible, d’une peinture murale unique sur un mur. Pensez au moment où vous donnez des directions aux gens et dites des choses comme : « Allez tout droit jusqu’à ce que vous voyiez le magasin avec la porte violette, puis tournez à gauche. »

La navigation dans l’interface peut fonctionner de manière très similaire. Nous recherchons des éléments uniques et reconnaissables sur la page pour nous aider à nous orienter : des éléments tels que le logo de la marque (généralement dans le coin supérieur gauche), la marque reconnaissable « maison » et le logo de la marque. ou «paramètres» icônes, menus de la barre latérale et plus encore. Lorsque nous intégrons ce type d’éléments dans nos interfaces, nous pouvons aider nos utilisateurs à s’y retrouver plus facilement.

Bien qu’il existe certainement des différences entre la façon dont nous naviguons en personne et numériquement, il y a également beaucoup plus de chevauchements que vous ne le pensez ! La prochaine fois que vous ajouterez une nouvelle page ou une nouvelle fonctionnalité à votre application, réfléchissez aux techniques d’orientation que vous pourriez utiliser pour aider vos utilisateurs à se sentir plus à l’aise et moins stressés lorsqu’ils se déplacent dans votre interface. Vous pourriez être surpris de voir à quel point de si petits ajustements peuvent apporter de gros avantages à vos utilisateurs !