Concevoir un menu de navigation gagnant Idées et inspirations
Le menu de navigation sur un site Web ressemble à un panneau de signalisation dans une rue ou à un répertoire de niveaux dans un centre commercial.. Vous ne pouvez pas atteindre votre destination sans d'abord savoir où vous êtes. Comme dans la vie réelle, la navigation dans la conception Web est très importante et joue un rôle majeur dans la facilité d'utilisation d'un site Web ainsi que dans l'expérience utilisateur..
De nos jours, vous pouvez voir de nombreux types de menus de navigation avec des designs intéressants, créatifs et inhabituels. Mais qu'en est-il de la navigation efficace dans un site Web, à quoi ressemblerait-il? à quoi devrait-il ressembler?
Aujourd'hui, j'aimerais partager mes observations et mes connaissances sur l'importance de la navigation dans la conception Web. Je vais vous révéler quelques astuces simples que vous pouvez utiliser pour améliorer la navigation et la convivialité de votre site Web. Il y aura également quelques exemples de menus de navigation efficaces pour vous donner une idée de la planification de votre prochain design..
Architecture de l'information
La planification de la navigation devrait commencer par l'architecture de l'information. Il est essentiel de s'asseoir et remue-méninges sur l'architecture de l'information d'un site Web. Vous devez déterminer le type de fonctionnalités offertes par le site Web, ce qui est le plus important et ce qui pourrait être placé aux niveaux inférieurs de la hiérarchie de l'information..
L’architecture de l’information comprend fonctionnalités, besoins des utilisateurs, sitemap, tests et wireframes. Vous pouvez en savoir plus sur l'architecture de l'information dans l'article de Cameron Chapman dans Architecture de l'information 101: Techniques et meilleures pratiques.
Utilisation de technologies activées par l'utilisateur
Évitez d’utiliser Flash, JavaScript, jQuery ou toute autre option risquant d’empêcher l’accès à la navigation de votre site Web lors de la construction de votre barre de navigation, ou au moins, assurez-vous qu’ils peuvent se dégrader avec élégance..
Pour plus de références sur dégradation gracieuse de javascript, Découvrez ce post sur 10 méthodes de secours utiles pour CSS et Javascript.
Utilisez des termes simples et conviviaux
Il vaut mieux utiliser simple, évident et des termes faciles à comprendre que de rester aux termes de l'industrie seulement pour votre menu de navigation. Tout lien nécessitant plus d’une seconde ou deux utilisateurs est probablement inutilisable..
Si un utilisateur a besoin de cliquer sur un lien pour déterminer le lien qui en résulte, cela contribuera à une mauvaise expérience utilisateur pour vos visiteurs..
Exemples
Les termes du menu de navigation du site Web de Larissa Ness sont faciles à comprendre et suffisamment communs. Les utilisateurs ne trouveront pas cela déroutant car ils ont déjà l'expérience de menus comme celui-ci..
Voici un autre bon exemple de menu de navigation de site Web propre et clair, avec les termes courants utilisés, à l'adresse csupport..
L’agence créative Eighty8Four utilise le terme "showroom" qui peut prêter à confusion pour les visiteurs. Ce terme peut signifier portefeuille ou travail, mais ce n’est pas clair et les visiteurs n’ont pas d’autre choix que de cliquer pour le consulter..
Normaliser le design de la navigation
Utilisez le même modèle de navigation dans toutes vos pages. C'est très important, car sans conception cohérente, un utilisateur peut en fait penser qu'il se trouve sur un autre site Web. Assurez-vous que vous utilisez le même modèle de navigation afin que les utilisateurs puissent facilement consulter votre site Web sans se perdre..
Bluegg, ci-dessous, utilise une conception de navigation simple et propre qui reste identique dans toutes les sous-pages. La seule différence est l’indicateur de couleur, qui indique la page sur laquelle se trouve le visiteur..
Indiquez où vous êtes
Il est essentiel de laisser l'utilisateur savoir où il se trouve à tout moment. Vous pouvez le faire en changer le fond du lien, la couleur du nom de la page ou mettre le texte en gras dans le menu de navigation pour le rendre différent des autres.
Austin Eastciders utilise une couleur et un arrière-plan différents pour indiquer la page sur laquelle l'utilisateur se trouve. Cet indicateur peut également fonctionner comme une modification de conception subtile, par exemple en utilisant un fond de navigation différent ce qui crée le sentiment que les autres éléments du menu sont en profondeur.
Chirurgie des médias utilise une couleur plus foncée comme indicateur pour une sous-page ouverte. Simple mais efficace.
Utiliser les conventions Web
Il s’agit d’une navigation sur le site Web facile à utiliser et intuitive. Les conventions Web facilitent grandement le travail des concepteurs. La plupart des utilisateurs cliquent sur le logo du site pour revenir à la page d'accueil, alors concevez votre logo pour le faire..
Si vous ne le faites pas, vous leur faites passer du temps pour apprendre quelque chose de nouveau ou, dans certains cas, les déranger en ne fournissant pas ce qu'ils s'attendent à être des normes de navigation communément acceptées.
Vous pouvez en apprendre plus sur les conventions Web ici:
- 10 conventions de conception Web
- Ne réinventez pas la roue du design Web
- Concevoir avec des conventions Web
Inject Design place le logo dans le coin supérieur gauche correspondant à l'une des conventions Web les plus utilisées de nos jours.
Création Adams utilise l'une des conventions Web les plus courantes - le logo est placé dans le coin supérieur gauche du site et des liens vers la page d'accueil.
Testez-le: impliquez une 3ème partie
Testez toujours votre conception de la navigation avec toute personne ayant déjà utilisé Internet. Vous voudrez peut-être faire venir des personnes qui n'étaient pas liées au processus de conception pour le tester.. Observez leurs préférences quand ils naviguent sur votre site et analysez le temps qu’il leur a fallu pour trouver les pages qu’ils recherchaient.
Pour une meilleure précision, impliquer plus de gens, collecter les données, les analyser et les résumer pour un meilleur ajustement. Faites une enquête après le test si nécessaire. Vous pouvez obtenir des idées et des contributions inattendues qui seraient autrement indétectables sans ce test..
Fournir un contexte
Pour être cohérent avec votre contenu et votre navigation, donnez aux utilisateurs de sites Web un contexte leur permettant de trouver rapidement les éléments dont ils ont besoin. Vous pouvez placer de petites icônes liées au contenu auquel vous créez un lien ou de courtes descriptions pour donner un aperçu de la page..
Mon propre vélo utilise des icônes simples pour donner aux utilisateurs plus d'informations sur ce qu'ils peuvent trouver dans certaines sous-pages.
Sarah Parmenter utilise des légendes courtes et intéressantes dans la navigation principale pour fournir des informations sur les sous-pages vers lesquelles la navigation principale est liée.
Fins de référencement
Google aime la navigation cohérente. Il est bon que la navigation soit cohérente, non seulement pour que les utilisateurs puissent comprendre et se faire une idée de la navigation sur votre site Web, mais également pour les moteurs de recherche qui indexent votre site Web..
Les robots des moteurs de recherche parcourent votre site Web afin d'indexer votre site Web et de placer les liens dans la page de résultats des moteurs de recherche. Si vous voulez être visible, faites attention à une bonne conception de la navigation et obtenez plus de trafic.
Scripts de navigation gratuits (CSS et jQuery)
Voici une courte liste des derniers menus de navigation pouvant vous être utiles pour vos projets. Ces scripts vont rendre l'expérience utilisateur de votre produit encore meilleure en ajoutant de jolies fonctionnalités et en vous faisant plaisir..
Script de défilement de news vertical dirigé par XML utilisant HTML et jQuery: vScroller
Filtrify
Scroller de page
Portefeuille Timeline
HorizontalNav
Menu de navigation minimaliste CSS3
Effet de navigation en cercle avec CSS3
Effets de navigation dans la grille avec jQuery
Ascensor
Créer un élégant menu de navigation CSS3
Vitrine de la belle navigation horizontale
Et enfin, certains menus de navigation horizontaux inspirants. Consultez ces sites Web incroyables et leurs solutions de menu de navigation pour trouver de nouvelles idées pour vos projets..
Ch3mical
Bloom Search Marketing Inc.
Alex Perez
Libor Zezulka
Hauska!
Îles d'or
Neil Carpenter
Marc Thomas
Polystyrène 3D
Liechtenecker
Monde de l'aventure
Photographie d'arbousier
OMDRL
4 bière de pins
Vins Chasseurs
J'espère que vous trouverez cet article utile et informatif. Si vous avez des idées ou si vous êtes en désaccord, partagez votre opinion dans la section commentaires..
