3 règles essentielles pour une conception de navigation efficace
Concevoir la navigation de votre site Web, c'est comme poser les bases de votre maison. Si vous ne planifiez pas correctement votre fondation, votre bâtiment risque de s'effondrer, quelle que soit son apparence. Si vous souhaitez bénéficier des meilleures ventes ou conversions possibles à partir de votre site, vous devez planifier la manière dont votre audience va interagir avec votre contenu et déterminer la manière la plus intuitive de l’organiser et de la représenter.
Rappelez-vous toujours que si vous vous trompez, vous risquez d'aliéner une grande partie de votre public.
Qu'est ce que la navigation?
Il y a plus d'une façon de regarder la navigation. Vous pourriez dire que c'est un élément central de votre site Web qui permet à vos clients de trouver ce qu'ils recherchent sans confusion ni clics inutiles. De même, vous pourriez faire valoir que c'est un moyen de mener vos clients vers les informations les plus importantes de votre site, afin de générer des ventes ou des demandes de renseignements.
Les chances sont, c'est les deux.
La conception de la navigation est comme beaucoup d'autres choses dans la conception: il n'y a pas de "bonne manière" universellement acceptée de le faire. Chaque site Web présente ses propres défis, qui peuvent être abordés de différentes manières. La bonne nouvelle est qu’il existe des moyens de penser et d’organiser les contenus pour minimiser les risques d’échec.
Site de 70% dispose d'une navigation simple à la fois verticale et horizontale.
1) Finalisez votre IA d'abord
La planification du contenu d'un grand site Web est une tâche essentielle qui doit être effectuée avant de concevoir votre navigation. Connu sous le nom de IA (Information Architecture), cet aperçu, cette compréhension et cette manipulation de votre contenu constituent l’épine dorsale de la convivialité de votre site Web. Concevoir votre navigation avant ou au lieu de concevoir correctement votre IA équivaudrait à créer un index de livre avant de composer les pages. Pas une bonne idée.
Une capacité naturelle à voir la situation dans son ensemble lorsque vous travaillez sur IA. Plus important encore, vous devez pouvoir voir le contenu du point de vue de l'utilisateur. Parfois, cela signifie aller à l'encontre de la manière dont le client classe son contenu, alors préparez-vous à la résistance si tel est le cas.
Voici quelques éléments que vous pouvez vous demander pour vous aider à préparer votre système et le justifier auprès du client:
- Quelles pages sont nécessaires pour ce site?
- Chaque page a-t-elle un but dans le schéma plus large, et le contenu est-il divisé en parties sensibles et pertinentes?
- Quelles sont les possibilités pour ajouter du contenu dans le futur?
- Avec quels groupes d'utilisateurs travaillez-vous? (par exemple, connexion / déconnexion, types d'abonnement, annonceurs, etc.)
- Quel est l'objectif principal pour chaque type d'utilisateur?
Répondre à tout ce qui précède et comprendre comment votre contenu est lié à vos utilisateurs est fondamental pour une bonne conception de la navigation.
2) KISS: Restez simple, parfois
Toute personne ayant déjà utilisé un site Web peut probablement être d’accord: une zone de navigation doit être aussi simple que possible. Surmonter l'utilisateur avec les choix et encombrer la navigation avec du texte est une mauvaise idée, et entravera sérieusement la facilité d'utilisation globale de votre site Web.
La navigation simple de Bloomberg contredit la complexité des informations sur leur site.
Et pourtant, la simplicité peut être trompeuse. Creusez plus profondément et vous découvrirez peut-être que ce qui est en réalité assez complexe a été intelligemment empaqueté d'une manière simple. Ceci est IA en action.
Prenez la page d'accueil de Microsoft par exemple. Leur navigation principale ne comporte que quatre éléments, ce qui semble insuffisant compte tenu de leur gamme de produits. Mais les menus déroulants sont très intelligemment divisés en sections et présentés de manière à ce que vous puissiez trouver rapidement et facilement ce que vous recherchez.
Les sous-pages sont comme des mini-sites, suivant le même format de navigation. Le menu se sent et se comporte de la même manière, mais s'adapte pour offrir plus de détails au fur et à mesure que vous entrez dans le site.
C'est facile à utiliser, prévisible et cohérent. Compte tenu de leur gamme de produits et du nombre de pages de leur site Web, ce n’est pas une mince affaire et est évidemment le produit de nombreuses heures de développement itératif. Non seulement cela ressemble à l'un de leurs produits, ce qui est très rassurant pour le visiteur, mais il organise le contenu d'une manière qui est bénéfique à la fois pour le client et pour Microsoft.
3) Choisissez soigneusement l'orientation
Étant donné qu'un écran d'ordinateur est traditionnellement utilisé dans un format paysage, la navigation horizontale a beaucoup de sens. La plupart du temps, cela semble juste plus équilibré, moins intrusif et facile à placer du point de vue de la conception.
Oculus, les fabricants de casques de réalité virtuelle seraient stupides s'ils ne parlaient pas de leurs paysages virtuels avec un menu horizontal. Non seulement il comporte une belle métaphore, mais il permet à l’utilisateur d’en savoir plus sur son contenu en faisant défiler la page.
Cependant, les menus horizontaux n'apportent pas de valeur ajoutée dans tous les contextes, ce qui explique pourquoi vous verrez beaucoup de navigation verticale, en particulier dans le commerce électronique. Il contient des échos des onglets colorés qui vous aident à trouver des produits dans un catalogue physique et évite d'encombrer une barre horizontale avec trop de texte et trop d'options.
Une bonne navigation verticale n'est pas chose facile, surtout si vous avez beaucoup de produits. C'est pourquoi j'aime celle-ci de Jack Jones.
Les icônes à côté du texte facilitent la lecture. Les formes simples sont étonnamment communicatives et aident à garder la zone de navigation concentrée et ordonnée. Cliquez sur une catégorie et le menu s’étend pour révéler les sous-options, là encore très facilement.
Une utilisation plus inhabituelle du menu vertical peut être trouvée sur le site de Squarepusher. Ici, la navigation est utilisée comme un onglet, du côté du contenu principal, que l'utilisateur peut simplement faire défiler et cliquer. C'est une approche beaucoup plus linéaire et fait écho à la nature séquentielle d'une piste Squarepusher.
Les règles changent
Comme pour tout ce qui est sur le Web, les nouvelles techniques, technologies, dispositifs et tendances apportent leurs propres défis et innovations. Un design web réactif signifie qu'un nav horizontal traditionnel est désormais aussi un nav vertical (sur des écrans plus petits). Les techniques de parallaxe permettent de voir les zones de navigation se dérouler comme la marée, selon l’endroit où vous vous trouvez sur la page.
Il n’existe pas de moyen unique de créer la navigation de site parfaite. Mais une approche itérative de la conception et des tests, de préférence avec un accès aux statistiques de votre site et aux données de conversion, est susceptible de donner les meilleurs résultats.
En tant que moteur de votre site Web, votre navigation doit être prévisible, simple, cohérente et bien placée.