Un flux UX est un cheminement que va suivre l’utilisateur en respectant le chemin tracé par l’ergonome web. Les processus d’enregistrement ou d’identification sur un site web, sont 2 exemples assez «simplistes» de flux de navigation, car ils impliquent un certain nombre d’étapes tangibles avant d’atteindre un objectif bien précis. Mais aujourd’hui, nous allons aborder le maximum de composants qui entrent dans la navigation intégrale de l’utilisateur sur un site.
La navigation représente la cartographie ainsi que les directions qu’offre un site web aux utilisateurs pour aller plus en profondeur dans l’expérience du site.
La navigation ne se résume pas à la simple barre se trouvant en haut de la page, et comportant des liens textes, on la retrouve sous d’autres formes partout sur le web.
Voici certains exemples de barres de navigation, bonne lecture.
La classique
On démarre avec la barre classique, elle est souvent horizontale ou alors verticale et on la retrouve sur une grande partie des sites. Cette barre de navigation est souvent associée à des sous-menus pour soutenir le contenu global du site.
Le choix des libellés doit se faire avec beaucoup de précautions, car ils devront représenter le plus possible le contenu vers lequel ils redirigent. Donc n’hésitez pas à vous associer avec vos utilisateurs finaux pour la réalisation de points aussi sensibles.
Voici quelques exemples démontrant comment une barre de navigation classique peut faire bon ménage avec un peu de créativité.
http://www.zippergaleria.com.br/pt/
http://www.helentsanossheinman.com/
Points négatifs
Cette méthode peut s’avérer encombrante lorsqu’il s’agit de gros sites avec beaucoup de contenu et peut donc nuire à l’expérience utilisateur.
L’Hamburger
Quelqu’un d’autre à part moi s’est déjà demandé ce que représentent ces 3 fameux petits traits que nous voyons ? Ce type de navigation caché, appelé aussi navigation Hamburger (les 3 petites lignes couchées qui rappellent un Hamburger). Lorsque l’on clique dessus, un menu caché se dévoile, rendant son contenu accessible. Sa facilité de conception et d’adaptation sur mobile fait que nous le retrouvons un peu partout aujourd’hui.
Mais ce Hamburger est-il aussi bon qu’on le prétend? Une étude démontre que les utilisateurs cliquent plus rapidement sur un menu classique que sur celui en Hamburger. Il est aussi prouvé que les utilisateurs d’Iphone mettent 2 à 3 fois plus de temps que ceux de Android.
Points négatifs
Ce n’est clairement pas la meilleure navigation pour votre grand-mère, je dirai même qu’il se peut qu’elle ne clique jamais dessus. Une étude de Nielsen Norman démontre que même si les utilisateurs arrivaient à reconnaître certains logos tels que la loupe pour la recherche, autant d’autres logos comme le Hamburger pouvaient leur être totalement inconnus.
Les icônes
Les menus de navigation basés sur les icônes ressemblent beaucoup aux menus de navigation classiques avec un peu plus de punch! Ce type de navigation s’adapte très bien aux applications web et back-ends. Cette initiative est à éviter dans le cas de gros menus trop chargés. Voici certains exemples.
Points négatifs
Il est impératif de libeller les icônes pour éviter la confusion des utilisateurs, selon une étude de Nielsen Norman. Aussi, l’utilisation d’intitulés n’ayant pas ou peu de rapports avec le pictogramme désigné peu rendre la tâche et l’expérience encore plus complexe pour l’utilisateur.
Sortez des sentiers battus
Alors que les 3 derniers exemples cités décrivent des approches spécifiques en matière de navigation (plus ou moins connus par le grand public), voici une nouvelle approche toute nouvelle et originale. Du laboratoire à la pratique, il n’y a qu’un pas sur web.
http://dougaitkenthesource.com/
http://nationallgbtmuseum.org/#/home/
Points faibles
C’est bien beau, mais malheureusement, dès que quelque chose sort du normal ou des standards, l’utilisateur se perd, ce qui peut nuire à l’atteinte de l’objectif initial.
Les sous-menus, les menus d’aide et les «footers»
Les sous-menus, les menus d’aide ainsi que les «footers» sont aussi des éléments de navigation dont il est important de se rappeler.
Les sous-menus
Souvent considérés comme des menus de navigation secondaires, les sous menus dirigent les utilisateurs vers les pages qu’ils considèrent correspondantes à leur objectif de navigation.
Les sous-menus sont aussi bien utiles pour des sites contenant quelques pages que pour les gros sites d’e-commerce.
Les menus d’aide
Les menus d’aide peuvent être définis comme des menus de navigation proposant des outils secondaires aux utilisateurs mais qui ne proposent pas les fonctions principales du site. On y trouve généralement les «champs d’identification» et « le panier d’achat ».
Les «footers»
Les menus de navigation classiques sont souvent associés à des «footers» ou pieds de page. Le «footer» dirige vers des pages du site qui ont besoin d’apparaître quelque part, mais qui ne sont pas importantes d’un point de vue UX. Cependant, le «footer» peut reprendre les éléments du menu de navigation, ce qui rappellera aux utilisateurs le contenu du site.
Deux questions à se poser lorsque l’on travaille sur la conception du «footer»: Est-ce nécessaire? Comment puis-je le rendre intéressant au point de convertir mes utilisateurs?
Pour finir, s’il y a des points à garder en tête afin de maximiser l’expérience utilisateurs au niveau des menus ça serait de s’assurer que :
- la navigation est simple et bien structurée
- Elle doit être claire
- Elle doit faire référence au contexte
Bonne lecture à bientôt.
À lire : Améliorez la recherche interne de votre site
Oualid Chebab
Latest posts by Oualid Chebab
- 7 signaux qui montrent que votre site web n’est pas corporatif - 25 Février 2015
- 6 tendances en web design pour 2015 - 18 Février 2015
- Comment la réaction des clients peut augmenter vos conversions de 30% - 28 Janvier 2015
- Apprendre à faire des wireframes: 8 bonnes pratiques - 21 Janvier 2015
- 5 façons avec lesquelles les médias sociaux améliorent votre SEO - 19 Janvier 2015
Très bon article, merci beaucoup !
J’ai fais un tutoriel sur mon blog sur les “Sticky Nav” qui sont de plus en plus répandu sur internet et qui selon moi améliore l’expérience utilisateur !!!
Qu’en pensez vous ?
http://paulgruson.fr/2014/05/06/tuto-css-barre-de-navigation-fixe-sticky-nav/
Beau travail sur ton blogue que je viens de découvrir à travers ton commentaire Paul,
Merci d’avoir partagé ce Tuto avec nous.
PS: Je t’inviterais bien en parler ici sur notre blogue 🙂
Ah ?
Ben oui! on sait décerner les expertises et je trouve que ça serait une bonne idée d’avoir la tienne ici sur ce blogue pour notre audience 🙂
Pourquoi pas !
Que faut-il faire ?
Ravi de voir cela!
Notre équipe de Com te fera parvenir un email aujourd’hui pour t’expliquer la démarche 🙂
Merci pour ces conseils, pour compléter, il est vivement conseillé aussi d’ajouter un baseline sur le header du site, surtout pour les sites e-commerce.