Le multi supports a considérablement changé la manière d’appréhender le web. Il en a découlé l’apparition du responsive design qui a soulevé de nouvelles façons de penser, de nouveaux schémas et de nouvelles approches.
Pour bien comprendre le responsive design, il est d’abord primordial de se familiariser avec l’architecture de l’information et de cerner l’objectif de la navigation.
Le challenge de l’architecture de l’information
Les stratégies concernant l’architecture du contenu et de l’information sont clairement celles qui requièrent le plus d’attention. Après les méga menus et les structures de navigation particulièrement complexes, le responsive a engendré de nouvelles questions pour simplifier l’accès à l’information. L’approche du mobile-first est donc à privilégier. Le but est de minimiser au maximum les frictions cognitives (mémoire, langage, raisonnement, vision et imagerie mentale).
Voici quelques questions à vous poser pour créer votre navigation :
– Est-ce que vos messages sont compréhensibles et est-ce que la valeur de votre proposition est assez claire ? – Comment pouvez-vous réduire la complexité de votre navigation ? – Comment vous assurer que la navigation est équivalente peu importe le support utilisé ? – Avez-vous testé votre navigation ? Correspond-elle aux objectifs des utilisateurs visitant votre site ?
L’objectif de la navigation
La navigation dispose généralement de 3 parties distinctes : le présent (où suis-je ?), le futur (où puis-je aller ?) et le passé (d’où je viens ?). Ainsi, l’objectif d’une navigation efficace est de répondre à ces 3 questions à chaque étape du parcours utilisateur.
Les modèles à privilégier pour une bonne navigation responsive
Pour une bonne adaptation de votre navigation sur les différents supports, voici 3 modèles à privilégier :
1- Le modèle « minimaliste » Dans cette configuration, la navigation est une priorité. Quand votre contenu vous le permet, optez pour peu d’onglets dans le menu. Pas besoin de faire deviner les utilisateurs sur ce qu’ils vont trouver par la suite. Affichez tout, si vous le pouvez.
2- Le modèle « toggle sur plusieurs niveaux » Il est courant de voir des sites mobiles ou des applications avec un toggle (hamburger en haut à droite ou à gauche) qui propose une navigation sur deux niveaux. Ce modèle permet aux utilisateurs de voir directement dans le menu, les différentes sous-sections du site. C’est une solution stable et efficace.
3- Le modèle « toggle simple » Il s’agit ici d’afficher les catégories principales dans le menu en utilisant des icônes et des couleurs. Cette configuration fonctionne bien car elle est simple à implémenter et à utiliser. Vous n’êtes pas obligé de prendre en compte les différents niveaux de catégories dans votre solution responsive. L’utilisation de pages de destination présentant les éléments de navigation suivants reste une bonne option pour ne pas surcharger le menu. Vous pouvez également opter pour le fil d’Ariane (breadcrumbs) pour situer les utilisateurs.
Il y a différentes options que vous pouvez utiliser. Tant que vous gardez une architecture de l’information claire, que vous testez et validez les modèles, vous vous assurerez que vos visiteurs seront capables d’utiliser facilement votre site maintenant et dans le futur.
Source : Smashing Magazine – Chris Poteet