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, c’est basé sur une expérience du monde réel.

Orientation 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 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 en regardant un plan de métro pour déterminer quel train vous mènerait à votre destination, en suivant la signalisation pour vous diriger vers différentes expositions dans un musée ou en utilisant des panneaux de signalisation pour en parler à un ami. où vous rencontrer (« Je suis au coin de Main et 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 en êtes actuellement (y compris la possibilité de le communiquer à d’autres personnes)
• Où pouvez-vous aller à partir d’ici
• Comment se rendre à d’autres endroits
• Comment rentrer « à la maison » lorsque vous avez terminé

L’objectif d’une bonne conception d’orientation est d’éviter que vos utilisateurs ne se sentent coincé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 manière dont vous pouvez mettre en œuvre des conceptions d’orientation utiles dans votre travail.

Menus de navigation globaux et locaux

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. C’est une pratique assez courante d’offrir 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 menu de navigation « local » apparaît.

C’est un excellent exemple de divulgation progressive, ou 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 en les « masquant » derrière le nom du groupe, nous pouvons permettre aux utilisateurs d’explorer et de trouver plus efficacement le contenu qu’ils recherchent. réellement intéressé.

Chapelure

Le fil d’Ariane est un moyen visuel de représenter les sections et sous-sections parcourues par l’utilisateur 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 » du 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 exploration en toute sécurité, 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 par la pratique, et lorsqu’un utilisateur sait qu’il peut « se promener » dans une interface et toujours retrouver le chemin de la maison, il comprendra beaucoup plus rapidement la structure et l’organisation du site/de l’application.

Éléments marquants

Les éléments marquants sont des signes et 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 de grande taille, 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 comme le logo de la marque (généralement dans le coin supérieur gauche), les icônes reconnaissables « accueil » ou « paramètres », les 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 certaines 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 constituer un avantage considérable pour vos utilisateurs !