Modèles de navigation pour dix types de sites Web courants
La navigation est l'un des aspects les plus importants de tout site Web. Sans une bonne navigation, un site devient inutile pour les visiteurs. Ils ne peuvent pas trouver les informations dont ils ont besoin et recherchent plutôt des sites concurrents. Il est essentiel que vos sites soient faciles à naviguer si vous souhaitez être un concepteur performant.
Mais il n'y a pas de solution unique pour la navigation. Ce qui fonctionne bien sur un site de nouvelles peut ne pas fonctionner correctement pour un site personnel. Quelque chose d'incroyablement convivial sur un blog peut être frustrant sur un site de commerce électronique.
Vous trouverez ci-dessous dix types de sites communs, avec des suggestions pour les types de modèles de navigation qui fonctionnent bien pour chacun.
Il y a aussi des exemples pour vous donner une meilleure idée de ce dont nous parlons. N'hésitez pas à partager plus d'excellents exemples dans les commentaires!
Tous les sites
Certains modèles de navigation fonctionnent sur pratiquement tous les sites. Plutôt que de reprendre les mêmes informations dans chacune des catégories ci-dessous, je les inclurai simplement ici.
Le premier motif est la navigation par onglets. Les onglets sont parfaitement adaptés à la navigation car, psychologiquement, ils rappellent aux visiteurs les onglets en papier et accèdent à une nouvelle section de bloc-notes ou de classeur, ce que ne font pas les boutons ou les liens en texte brut. Les onglets sont presque toujours la méthode préférée pour styliser vos principaux liens de navigation, même si, bien sûr, ils fonctionnent mieux lorsque le nombre de liens dans un menu est limité.
Le second motif est la navigation en-tête. Si votre site Web a un en-tête (et la plupart des sites Web le font), alors la navigation par en-tête est une bonne idée. Les visiteurs ont l'habitude de regarder l'en-tête des liens de navigation. Ce comportement prédéterminé vous permet de rendre votre site Web plus convivial en localisant votre navigation dans ou près de l’en-tête.
Le schéma final qui s'applique à pratiquement tous les sites est la navigation de bas de page. De nombreux utilisateurs (mais pas tous) se tourneront vers le pied de page pour trouver un lien s'ils ne peuvent pas trouver ce qu'ils recherchent dans votre autre navigation. De nombreuses pages de base sont souvent liées à un pied de page, y compris les liens "about", "contact" et "sitemap", qu'ils soient liés ou non dans la navigation.
1. Blogs
Les blogs ont généralement un grand volume de contenu, dans l'ordre chronologique inverse. Cela présente à la fois un cadre logique pour votre navigation, ainsi que des défis uniques, en fonction du type de blog.
La plupart des blogs utilisent une combinaison de pagination (ou de défilement continu), une page d'archive, une navigation dans la barre latérale pour les catégories et / ou les balises, et éventuellement une navigation dans l'en-tête et le pied de page. Il est important de réfléchir à la manière dont vos visiteurs voudront probablement accéder au contenu de votre blog.
Par exemple, un blog personnel peut ne pas nécessiter une navigation par catégorie ou par tag en dehors des liens figurant dans les métadonnées de chaque publication. Dans ces cas, vous voulez que les visiteurs accèdent au contenu dans l'ordre chronologique inverse, plutôt que de sauter par sujet. En revanche, un blog de sujets doit comporter une navigation par catégories et par mots-clés, car les visiteurs recherchent probablement des informations sur des sujets spécifiques dans le thème général.
Au minimum, les blogs doivent inclure la navigation pour parcourir chronologiquement le contenu (pagination, liens suivant / précédent ou défilement continu), ainsi que la navigation en-tête ou barre latérale pour des pages spécifiques en dehors de la page principale.
Les blogs thématiques (et parfois les blogs d'entreprise) doivent également inclure des menus de catégories ou de tags dans leur navigation, dans l'en-tête ou la barre latérale. Les grands blogs, en particulier, devraient également envisager de mettre en place une fonction de recherche permettant aux utilisateurs de trouver rapidement ce qu’ils recherchent. Assurez-vous simplement que la fonction de recherche fonctionne comme prévu et que vous obtenez réellement tous les résultats pertinents.
Ecoki , ci-dessous, inclut les catégories de premier niveau dans leur navigation dans les en-têtes, avec une navigation vers les pages importantes dans une barre de navigation d'en-tête secondaire. C'est une mise en page efficace qui met clairement l'accent sur les liens les plus utilisés.
2. Sites d'actualités
Les sites de nouvelles sont similaires aux blogs, en ce sens qu'ils présentent généralement des histoires dans l'ordre chronologique inverse. Les sites d’information sont souvent hautement catégorisés et présentent une architecture de l’information plus complexe que celle de nombreux autres types de sites. De ce fait, leurs modes de navigation sont souvent plus complexes.
La clé ne rend pas la navigation plus compliquée que nécessaire. Les menus déroulants et les menus déroulants sont tous deux de bons moyens de gérer des menus plus volumineux sans encombrer la page. Si vous regardez les plus grands sites d’information (comme Google News, par exemple), ils répartissent les informations en plusieurs catégories: Politique, Local, Monde, Sport, Divertissement, etc. Les catégories que vous utiliserez dépendront est un site de nouvelles générales ou un site d'actualité.
Les balises peuvent également améliorer considérablement la navigation. En balisant chaque récit, il est facile pour les utilisateurs de trouver des articles connexes, sans créer une structure de catégories compliquée ou exagérée. C'est une bonne idée d'inclure non seulement des liens de balises dans chaque article, mais aussi d'inclure une liste de balises ou un nuage d'étiquettes quelque part (inclure uniquement les balises populaires peut être une bonne idée pour des sites avec des centaines de balises).
La liaison en ligne dans les articles améliore considérablement l'expérience utilisateur. De nombreux sites d’information plus importants font cela, permettant aux utilisateurs d’accéder immédiatement à tous les articles sur un sujet. C'est très similaire à inclure des balises, mais plutôt qu'une liste au début ou à la fin de l'article, les liens se trouvent dans le texte lui-même.
3. Sites de commerce électronique
Les sites de commerce électronique sont parfois incroyablement complexes et contiennent des centaines (ou des milliers) de pages individuelles pour des produits et d'autres informations. Pour cette raison, la manière dont la navigation est gérée est vitale pour l'expérience utilisateur et la rentabilité. Sans une excellente structure de navigation, les visiteurs d’un site de commerce électronique auront plus de difficulté à trouver les produits qu’ils recherchent, ce qui signifie qu’ils ont de la chance de se tourner vers les concurrents par frustration.
La principale chose que chaque site de commerce électronique a besoin de plus qu’une poignée de produits est un bon système de recherche. La recherche assistée est la clé: les utilisateurs peuvent non seulement effectuer une recherche par mot clé, mais également affiner leurs résultats en fonction de facteurs tels que le prix, la taille, la catégorie ou d'autres indicateurs (en fonction de vos produits spécifiques).
La navigation par catégorie est également indispensable pour les utilisateurs qui souhaitent naviguer. Selon que vous utilisez des sous-catégories, la navigation dans le fil d'Ariane peut également être une bonne idée (si votre site a plus de deux ou trois niveaux de profondeur, le fil d'Ariane peut améliorer la convivialité).
Donner à vos visiteurs de multiples façons de trouver les produits qu’ils veulent est un excellent moyen d’augmenter les ventes, mais assurez-vous que chaque méthode affiche tous les produits pertinents. Si les visiteurs trouvent que la recherche renvoie un ensemble de produits alors que la navigation retourne un ensemble différent, cela ne peut que mener à la frustration.
le Blik Le site Web ci-dessous est un excellent exemple de site qui utilise une barre latérale avec des filtres pour affiner les résultats des produits. C'est le modèle de recherche guidée, sans apparence de recherche.
4. Sites d'information et de référence
Les sites de référence ont généralement une chose en commun: une tonne d'informations sur de nombreuses pages. Cela rend difficile la création de tout type de menu standard. Les catégories peuvent être utiles pour la navigation, mais lorsque vous commencez à avoir des milliers, des dizaines de milliers ou même des millions de pages (comme Wikipedia), le système de catégories se décompose. De plus, la plupart des gens se rendent sur des sites de référence à des fins spécifiques et ne naviguent pas, rendant les catégories peu utiles.
Il est essentiel que les sites de référence disposent d'excellentes capacités de recherche. La recherche guidée, tout comme celles utilisées sur les sites de commerce électronique, peut également être utile, surtout si elle est associée à une bonne organisation de marquage et de catégorie.
Il est évident que Reference.com , ci-dessous, veut que les visiteurs utilisent la recherche pour trouver ce qu'ils recherchent, car il est en évidence en haut de l'écran.
Les pages d'un site de référence doivent également utiliser des liens en ligne vers des informations connexes. Cela permet aux visiteurs de trouver facilement tout ce dont ils ont besoin pour comprendre ce qu’ils lisent, sans avoir à effectuer plusieurs recherches. Le besoin de liens en ligne est la raison pour laquelle les plates-formes wiki ont généralement une syntaxe standard pour la liaison dans le texte d'un article, de sorte que les créateurs de contenu n'ont pas à passer du temps à rechercher les liens pertinents.
Wikipédia , ci-dessous, et d'autres sites wiki font bon usage des liens en ligne pour ajouter du contexte aux articles.
5. Sites d'entreprise
La structure et la taille des sites d’entreprise sont très variées. Certains visent simplement à attirer de nouveaux clients. D'autres sont créés pour informer les clients actuels. D'autres encore doivent servir à la fois à attirer de nouveaux clients, à créer un portail d'actualités pour les clients existants et à créer une interface pour un intranet d'entreprise.
Quel que soit le but du site d'entreprise, la navigation claire est la clé. Vous ne voulez pas que les utilisateurs passent du temps à chercher votre navigation ou à essayer de trouver le lien sur lequel ils doivent cliquer. Assurez-vous que les liens sont organisés de manière logique, qu'ils ont une signification facile à comprendre et qu'ils sont situés dans des endroits logiques (l'en-tête et la barre latérale sont vos amis ici).
Tous les sites ci-dessous montrent que le fait que la navigation soit située dans les endroits les plus courants ne signifie pas qu’elle ne peut pas être créative. Tant qu'il est utilisable et facile à trouver, n'hésitez pas à créer quelque chose d'unique.
Dans les sites d'une dizaine de pages, il est judicieux d'inclure une fonctionnalité de recherche. C'est également une bonne idée d'inclure un sitemap pour faciliter la tâche des utilisateurs qui ont des problèmes avec votre navigation habituelle pour trouver exactement ce qu'ils recherchent.
6. Communauté ou sites de réseaux sociaux
Généralement, avec les grands sites de réseaux sociaux, la recherche est le principal moyen de navigation. Cela a du sens quand il y a des millions (voire des milliards) de pages sur le site. La navigation par menu standard est quasiment inutile pour traiter ce volume d'informations.
Ainsi, la recherche prend en charge la navigation globale du site. Mais cela laisse toujours les pages de profil des membres. Ici, il est important qu'il y ait une cohérence sur l'ensemble du site. Que votre site autorise ou non les membres à personnaliser leurs profils, il est impératif que les liens soient situés au même endroit sur chaque page.
Prenez Facebook, par exemple: chaque profil de membre et chaque page comportent des liens vers des éléments tels que des photos et des informations sur le côté gauche. Les notifications, les messages et les demandes d'amis sont toujours liés en haut, de même que les liens vers les paramètres du compte et la déconnexion. Une barre de navigation standard comme celle-ci, qui est toujours liée au compte du visiteur et aux informations, est devenue un pilier de réseaux sociaux bien conçus.
Les liens en ligne doivent également être cohérents. Par exemple, chaque fois qu'un nom d'utilisateur apparaît en tant que lien, il doit être lié au profil de cet utilisateur, quel que soit le contenu auquel il est associé. Réfléchissez aux informations qui doivent être liées logiquement aux pages, puis assurez-vous qu'elles sont cohérentes, quel que soit l'endroit où ces liens apparaissent.
7. Sites de l'événement
Les sites d'événements sont généralement simples et ne contiennent pas un grand nombre de pages. Mais il est important de réfléchir à la manière dont vos visiteurs utiliseront le site. Il est fort probable qu'ils souhaitent effectuer l'une des actions suivantes: inscrivez-vous à l'événement, voyez qui participe ou parlez, obtenez des informations sur la participation (y compris les coûts et les choses comme l'emplacement et les hôtels) et consultez le calendrier de l'événement.
L'inscription à l'événement, même s'il s'agit d'un événement gratuit, doit être considérée comme une transaction de commerce électronique. Pour cette raison, vous voulez un bouton d'appel à l'action important pour les inscriptions.
La navigation en-tête et / ou barre latérale standard est un excellent choix pour les liens vers d'autres pages. La navigation locale peut également être nécessaire si vous souhaitez inclure des pages individuelles pour des choses telles que des ateliers ou des conférenciers spécifiques. Les menus déroulants ou déroulants ne peuvent fonctionner dans ce cas que si vous avez un nombre limité de sous-liens. Sinon, il vaut mieux utiliser la sous-navigation dans une barre latérale ou dans une page principale.
le Coque Digital Live 10 Le site Web a une navigation par en-tête concise et facile à utiliser qui permet de trouver facilement ce que le visiteur recherche.
Conseil: Si votre site d'événements doit inclure une zone réservée aux participants ou un intranet, consultez les suggestions de navigation sur un réseau social ou un site communautaire pour obtenir des directives de navigation.
8. Sites de revue
Les sites de revue sont généralement utilisés de deux manières. La première est lorsque les utilisateurs sont intéressés par un produit spécifique et veulent voir les critiques pour cet article. Dans ce cas, une excellente fonction de recherche est la meilleure navigation. Il permet aux utilisateurs d'accéder rapidement au produit qu'ils recherchent.
La seconde utilisation consiste à rechercher certains types de produits. Pour cette utilisation, la recherche reste une méthode de navigation précieuse. Mais les catégories et la recherche guidée sont tout aussi importantes. Permettre aux utilisateurs de parcourir les avis par catégorie et sous-catégorie leur permet de trouver une variété de produits répondant à leurs besoins. En leur permettant d'affiner ces résultats en fonction de facteurs tels que le prix ou la marque, l'expérience utilisateur est encore meilleure.
Blippr , ci-dessous, inclut à la fois la navigation par catégorie (avec des menus déroulants pour la navigation secondaire) et une barre de recherche bien visible.
9. Sites personnels
Les sites personnels sont vraiment les joker du monde du design web. Vous pouvez utiliser à peu près tout type de modèle de navigation que vous souhaitez. Les piliers comme la navigation par en-tête et la barre latérale sont toujours les plus utilisables, mais il n’ya rien de mal à faire quelque chose de complètement différent.
Les sites personnels doivent refléter le propriétaire du site. Si quelque chose d'inattendu s'inscrit dans la personnalité du site, alors faites le par tous les moyens. Si vous utilisez une navigation non standard, cela peut néanmoins être une bonne idée d’inclure un lien vers le plan du site afin de faciliter la tâche des visiteurs qui ne le comprennent pas.
Daniel Mall's La page portfolio a l’un des modèles de navigation les plus uniques que j’ai vus. Il est facile à utiliser tout en étant très différent de la norme.
10. Galeries
Galeries d'images et les sites de portefeuille doivent généralement utiliser une combinaison d'en-tête standard ou de navigation dans la barre latérale, de marquage et de catégories. Permettre aux visiteurs d'affiner les images affichées en fonction d'un tag ou d'une catégorie est important pour une bonne expérience utilisateur, en particulier lorsque le volume d'images augmente.
La pagination sera également vitale pour les grands sites. Le défilement continu peut sembler une bonne idée, mais comme les galeries et les sites de portfolio, de par leur nature, sont remplis de médias, le défilement continu peut finir par utiliser beaucoup de ressources système. Je le déconseille pour tous les sites comportant plus de quelques dizaines d'images (bien que sur les sites de petites galeries et de portfolio, cela puisse être une très bonne idée).
Exposition minimale utilise des catégories, recherche et pagination.
Le emporter
S'il existe un concept de navigation absolument indispensable, quel que soit le type de site que vous concevez, c'est bien cela: la cohérence!
Vous pouvez opter pour la plupart des choix de navigation logiques, à condition qu'ils soient cohérents sur l'ensemble de votre site. Ne commencez pas par la navigation dans la barre latérale pour la moitié de votre site et la navigation par en-tête pour l'autre moitié, sans aucune raison logique. Si le lien de rattachement est toujours en haut à gauche, assurez-vous qu'il reste en haut à gauche. Cela s'applique à chaque élément de votre navigation et devient exponentiellement plus important à mesure que la taille du site augmente.
Outre la cohérence, la chose la plus importante à faire lors de la conception de vos modèles de navigation est de réfléchir à la manière dont les visiteurs vont réellement utiliser votre site. N'ayez pas peur des tests A / B ou multivariés pour savoir si vos modèles de navigation fonctionnent comme ils le devraient.
Quelle que soit la qualité ou la nouveauté de votre navigation, si elle n'assure pas la fonction de base consistant à permettre aux visiteurs de se déplacer d'une zone de votre site à une autre, votre navigation a échoué.
N'hésitez pas à partager des exemples de grands modèles de navigation en action dans les commentaires ci-dessous! Dites-nous également si vous avez d'autres conseils pour des schémas de navigation adaptés à certains types de sites.