La barre de navigation est un élément crutial du web design, puisque littéralement elle laisse l’utilisateur naviguer sur votre site. C’est peut-être l’élément le plus important d’un design UI/UX, car une barre mal conçue peut rendre l’expérience sur votre site difficile et démotivante. Plus qu’une simple carte, vous devez voir votre barre de navigation comme une partie intégrante de votre web design et vous assurez que c’est non seulement optimisée pour ses fonctionnalité, mais aussi l’affichage.

Voici quelques informations sur comment vous pouvez retirer le plus profit de cet élémen de design souvent négligé :

Règles Cardinales

• La barre de navigation doit être simple et lisible.
• Elle doit être claire. C’est ce qui rend la navigation importante.
• Elle doit être consistente sur toutes les pages du site. Une carte n’est pas bonne si elle change en permanence.

Commencer de zéro

Si vous créez une toute nouvelle barre de navigation pour un tout nouveau site internet, commencez pas dessiner un arbre d’information – comme un brainstorming. C’est rapide et facile à faire. Imaginez simplement chaque page et sous-page dont votre site aura besoin et dessinez un diagramme et comment ses pages se lient.

Cela vous donnera un guide sur comment la barre de navigation devrait être créée, ce qui vous aidera à décider du type de barre de navigation à créer.

Donner une orientation visuelle à votre barre de navigation

La barre de navigation doit proposer les outils pour aider l'utilisateur à savoir où il se trouve sur un site. Cela peut être fait de diverses manières :

• Changer la couleur du fond de la page actuelle dans la barre de navigation




Design de Barre de Navigation pour Wacom

• Changer la couleur du nom de la page




Design de Barre de Navigation pour Infinum Agency

• Mettre le nom de la page en gras




Design de Barre de Navigation pour 2013 Review on Ustream

• Souligner la page actuelle




Navigation Bar Design for Feed

• Utiliser des onglets découpés




Design de Barre de Navigation pour RCZ Test

• Utiliser des onglets de navigation




Design de Barre de Navigation pour NRJ Games

• Ajouter des icones pour la page actuelle




Design de Barre de Navigation pour 03july

• Barrer la page actuelle




Design de Barre de Navigation pour Unicq

Stylisez votre barre de navigation

Les barres de navigation peuvent être une parte important de votre design. Des suggestions pour les garder stylées et utiles peuvent être :

• Utilisez une couleur de fond solide pour une lecture facile.




Web Design pour SIXPENCE Store - Fighter

• Essayez un fond transparent pour jouer avec les couches sur la page et créer du lien entre les éléments.




Web Design pour FCINQ

• Les ombres derrière la barre de navigation créent de la profondeur.




Web Design pour Maximilla

Types de Barres de Navigation

Qu’est-ce que c’est ?

Une barre de navigation horizontale prend en général toute la largeur de la page du haut d’un site internet. Actuellement, c’est probablement la barre de navigation la plus courante.

Pourquoi la choisir ?

Puisque c’est si courrant, l’UX sera développé quand les utilisateurs sauront instantanément comment naviguer sur la page. C’est en général plutôt élégant et pas trop invasif, vous donnant un maximum d’espace pour insérer votre contenu devant et au centre. C’est aussi idéal pour un design adapté (responsive), donnant une bonne expérience pour tous les types d’écrans.

En général, une barre de navigation horizontale passe le mieux pour des pages avec peu de sous-pages, puisque plus vous aurez d’éléments en haut, plus cela sera difficile. De bonnes polices claires peuvent aider à utiliser au mieux l’espace.

Exemple 1 – Joha

Pour cette barre de navigation horizontale, le public visé sont des parents achetant des vêtements pour leurs jeunes enfants. L’avoir en haut du site facilite la navigation. Notez les petites animations sur chaque onglet.

Exemple 2 – FH Studio

Ici la barre de navigation horizontale est en bas et fonctionne bien car elle permet un focus sur les images et vidéos de haute résolution.

Qu’est-ce que c’est ?

Comme pour la barre de navigation horizontale, sauf quand l’utilisateur descend, la barre de navigation reste fixe en haut de l’écran, idéale pour les –pages longues.

Pourquoi la choisir ?

C’est parfait pour les longues –pages car cela donne aux utilisateurs une clareté maximum et du confort lorsqu’ils visitent un site internet. Cela vous laisse ausi jouer avec l’UI, en ayant la barre de navigation qui bouge selon où vous vous trouver dans le scrolling et créant une relation entre les couches du site par le design.

Exemple 1 – 88& 90 Lexington Avenue

Sur 88 & 90 Lexington Avenue, la barre de navigation est au milieu jusqu’à ce qu’on descende, elle se place alors en haut et y reste.

Exemple 2 – Quay Restaurant

Ce design est légèrement inconventionnel, car la barre de navigation change légèrement lorsque l’on descend, mais pas énormément. Elle passe aussi du bas au haut de la page.

Qu’est-ce c’est ?

Une barre de navigation verticale est habituellement placée à gauche d’une page web, mais peut occasionnellement être sur la droite. C’est en général là pour accomoder un grand nombre de sous-pages et utilise normalement une police plus petite.

Pourquoi la choisir ?

Si un site internet a beaucoup de sous–navigation dans chaque page titre, une barre de navigation verticale peut aider à s’y retrouver. Faites attention cependant, une barre de navigation verticale prendra plus de place qu’une horizontale, donc soyez sûr(e) que vous en faites bonne utilisation et lui donner un bon look qui représente votre marque. Un espace avec moins de contenu peut aussi demander davantage de défilement, donc rappelez-vous de garder une navigation simple pour non seulement la barre de navigation mais aussi chacune des pages.

Example 1 – Brasserie White Frontier

La barre de navigation prend 100% de la hauteur de la page et est bien liée aux autres interfaces de design. Vous n’avez pas besoin de faire défiler, ce qui permet une expérience utilisateur agréable.

Exemple 2 – Panche

On passe à un autre niveau avec ce site qui choisit la tendance du long défilement, en utilisant un texte vertical sur un menu vertical.

Qu’est-ce que c’est ?

Rendu populaire par les appareils mobiles, le menu hamburger se retrouve de plus en plus dans le design de PC aussi. Le menu hamburger vous permet de masquer le contenu de la barre de navigation jusqu’à ce que vous déplaciez votre curseur dessus ou cliquiez dessus. Il est en général indiqué par trois lignes verticales représentant un burger, d’où le nom.

Pourquoi le choisir ?

C’est la barre de navigation idéale pour mettre votre contenu devant et au centre, prenant le mimimum d’espace pour les choses administratives comme la navigation. C’est aussi parfait pour les écrans plus petits, pour lequel c’était initiallement créé après tout. C’est sans aucun doute l’option la plus moderne ici, attirant les publics jeunes et tech, et créant sûrement des problèmes pour les utilisateurs occasionnels et plus âgés pas autant familiers avec ce type d’innovation. Donc connaissez votre audiance avant de décider.

Exemple 1 – Blog Tumblr d’Adidas Originals

Adidas utilise un branding créatif, incluant des formes de diamant pour évoquer les trois rectangles horizontaux qui forment le menu hamburger. Le menu apparait sur la gauche après avoir cliqué sur le menu hamburger.

Exemple 2 – Laser

Ce site web change l’icone hamburger traditionnel en un éclair, rendant encore plus important le fait que son public comprenne le concept de menus hamburgers pour pouvoir le trouver. Une fois cliqué, le menu s’étend sur toute la page, le rendant incroyable pour les appareils mobiles.

Exemple 3 – Rally Interactive

Un menu hamburger plus interactif. Ca ressemble d’abord à un menu hamburger ordinaire. Cependant, une fois cliqué, il lie joliement le fond du site au –menu pop-up.

Rayonnement

Après avoir choisi la position de votre barre de navigation, retournez à votre arbre. Votre barre de navigation aura-t-elle des sous-catégories, si oui, à quoi doivent-elles ressembler ? Combien d’onglets y aura-t-il ? Comment seront positionnées ces sous-catégories ? Essayez toujours d’imaginer comment les sous-catégories s’appliquent aux onglets principaux, pour vous assurer de ne pas faire fouilli.

Vous voulez de la clareté, et ne souhaitez pas bombarder l’utilisateur avec trop d’options, donc assurez-vous que chaque sous-catégorie soit vraiment nécessaire. Regardez ces exemples :

Soyez atypique

N’ayez pas peur de tester. Les barres de navigation n’ont pas à être des accessoires web ennuyeux que vous devez avoir. Elles peuvent être un réel point central d’un super web design, à la fois jolies et ingénieusement fonctionnelles. Essayer de nouvelles choses est le meilleur moyen d’arriver à des produits vraiment inspirants, alors laisser parler votre création.

La seule chose à se souvenir est de toujours s’assurer que les utilisateurs comprennent ce que vous essayez de faire. S’ils ne savent pas comment utiliser votre barre, c’est râté.

Vous en voulez plus ?

Un bon design digital est beaucoup plus que de jolies images. Apprenez comment le naviguer ici :

Astuces Interface Pour Un Bon Design d'Appli Mobile

Written by Jane Murray on Tuesday, April 2, 2019

Jane Murray is a freelance copywriter based in Sydney. Apart from writing up a storm for the DesignCrowd blog on anything from logo design to Michael Jackson's shoes, she enjoys reading literary science fiction and hanging out with most animals except wasps. Get in touch via LinkedIn.