Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'UX pour le design web

Optimiser les menus

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les menus constituent l'outil primaire de navigation. Apprenez à les optimiser et à éviter les erreurs les plus courantes.
06:16

Transcription

Sur nos sites Internet, nous allons placer des menus, et ces menus sont encore le moyen numéro un pour nos utilisateurs de naviguer et d'accéder aux contenus qu'ils recherchent. Il va donc falloir que ces menus, en termes de navigation et de recherche, soient facilitants. Nous allons voir ensemble quelles sont les erreurs les plus couramment rencontrées, et puis quelles sont les bonnes pratiques pour que nos menus aillent dans le sens d'une meilleure expérience utilisateur. Commençons par les erreurs courantes. La plus fréquemment rencontrée est la suivante. Nous avons une séquence qui n'est pas forcément logique du point de vue de l'utilisateur. Elle peut être logique du point de vue de l'entreprise, du propriétaire du site, voire du designer du site, mais avant tout elle doit être logique pour l'utilisateur. Ici, il aurait fallu privilégier Homme, Femme, Enfants, puis Accessoires. Nous avons donc un menu ici qui est non séquentiel. Une autre erreur fréquente est la suivante. Nous avons ici un menu dont la séquence paraît tout à fait correcte. Par contre, on va se poser un certain nombre de questions sur les intitulés de ce menu. Nous avons des intitulés ici qui ne sont pas prédictifs. On ne sait pas ce qui se cache derrière LABO ou NEVER HIDE HUB. Peut-être qu'il y a un indice pour le dernier intitulé MIROIR, mais même là encore ce n'est pas très évident. Parmi les erreurs les plus fréquemment rencontrées, il y a également celles qui consistent à utiliser des icônes dont d'une part on ne sait pas à quoi exactement elles correspondent et puis d'autre part qui peuvent être ambiguës, c'est-à-dire que deux icônes peuvent se ressembler au point que l'on ne comprenne pas bien quelle est la différence entre l'une et l'autre. C'est le cas ici des deux premières icônes où on voit dans les deux cas qu'on peut accéder à des statistiques, mais on ne comprend pas la différence entre des histogrammes et des courbes. Il faut savoir que les icônes, par nature, ne sont pas explicites. Nous pouvons également rencontrer ce type de problème où ici nous pouvons avoir des icônes qui vont être explicites, par contre, il y en a beaucoup trop. Nous sommes dans un système de saturation cognitive, c'est-à-dire que l'utilisateur est perdu parce qu'il reçoit trop d'informations en même temps. Alors, voyons les bonnes pratiques. Lorsque nous allons utiliser des icônes, nous allons d'une part faire en sorte que celles-ci soient clairement explicitées par des étiquettes, et puis d'autre part nous ferons également très attention à ce que ces icônes ne soient pas graphiquement trop proches les unes des autres. Elles doivent être bien différentes les unes des autres visuellement. Nous aurons donc un système qui sera à la fois explicite et distinctif. Lorsque nous allons avoir à gérer un menu avec une rupture. Vous voyez qu'ici nous avons une séquence logique, hommes, femmes, garçons et filles, et puis le commerçant vend également ses produits à des revendeurs. Nous avons mis en place un système qui est séquentiel et qui est prédictif parce que l'on sait ce que représentent les intitulés, mais la différence a été exprimée de la façon la plus simple possible. Simplement, en passant de majuscule à minuscule. On utilise souvent des menus qui vont être des menus déroulants, et vous voyez qu'ici nous avons trois menus qui se déroulent. Vous remarquez que lorsqu'on déroule le menu numéro 2, on ne voit plus ce qui se passe au niveau du 1, et lorsqu'on déroule 3, on ne voit plus ce qui se passe au niveau du 2. Il y a donc deux problèmes avec les menus. Premièrement, lorsqu'un menu n'est pas déroulé, il ne va pas renseigner sur son contenu, et d'autre part lorsqu'on déroule un menu, eh bien, on a oublié ce qui était présent dans le menu précédent. Nous sommes donc avec les menus déroulants dans des systèmes qui sont très valables dans la mesure où l'on revient sur un site, où l'on est un client régulier d'un site, mais en général les menus déroulants sont plutôt pénalisants en termes de navigation. La position des menus est également très importante. Traditionnellement, ils sont placés en haut de page, sous ce qui va représenter toute l'identité visuelle du site. On peut réduire la taille de l'identité visuelle de manière à remonter les menus et gagner de la place. Cependant, les écrans sont de plus en plus au format 16/9, format cinéma, donc beaucoup plus larges que hauts. À partir du moment où l'on place des menus en hauteur, on perd de la place et il y a des éléments qui vont se retrouver en dessous de la ligne de flottaison. Il est donc intéressant de placer les menus en position latérale, ce qui va nous permettre de gagner de la place pour placer des éléments au-dessus de la ligne de flottaison. Il faut également se rendre compte que nous sommes dans un univers où peu à peu la souris a été remplacée par le doigt du fait de l'utilisation des périphériques mobiles. Il y a donc des zones de clic sur les périphériques mobiles, puisque lorsque vous tenez un téléphone dans la main, vous allez agir avec le pouce, et vous voyez qu'ici nous avons des zones qui sont difficiles à atteindre au fur et à mesure que l'on remonte l'écran du téléphone portable. On peut donc se poser la question de la position des menus, et on assiste à des tendances où les menus qui étaient traditionnellement en haut vont se trouver sur les périphériques mobiles maintenant plutôt en bas. C'est le cas sur certains réseaux sociaux comme Facebook ou LinkedIn. Sur les périphériques mobiles, on utilise aussi des menus qu'on appelle hamburgers, vous voyez ici que les trois traits peuvent représenter schématiquement un hamburger ou un kebab lorsque c'est trois points verticaux, et lorsqu'il s'agit de neuf points, on appelle ces menus des bentos. Ces icônes qui sont censées appeler un menu sont intéressantes, mais des tests ont montré que la plupart des utilisateurs avaient encore du mal à les identifier en tant que tels, il est donc recommandé de les labelliser et de préciser qu'il s'agit d'un menu. Vous constatez qu'avec les menus, il y a beaucoup de travail à faire pour un ergonome ou un spécialiste de l'expérience utilisateur. Les bonnes pratiques restent de mettre en place des tests utilisateurs en se posant la question, quelle est la tâche primordiale que l'utilisateur va effectuer lorsqu'il vient sur notre site ? Il faudra également penser mobile d'abord, donc ne pas adapter une version desktop, bureau, vers le mobile, mais plutôt l'inverse, et puis penser à mettre en place de plus en plus une navigation contextuelle en positionnant le bon menu au bon endroit et au bon moment.

L'UX pour le design web

Adoptez une méthode de conception web efficace. Optimisez la structure, les textes, l'accessibilité, les interactions avec l’utilisateur, ainsi que l'optimisation pour mobile.

1h42 (32 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :6 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !