Comment améliorer la navigation sur votre site web

Conseils pratiques pour créer un site web clair et facile à utiliser
Dans cet article, vous découvrirez comment aider les visiteurs à naviguer facilement sur votre site web et explorer les meilleures pratiques pour concevoir une interface de navigation. Cet article est précieux pour les concepteurs, les entrepreneurs et les spécialistes du marketing qui souhaitent créer eux-mêmes un site web convivial.es concepteurs, les entrepreneurs et les spécialistes du marketing qui souhaitent créer eux-mêmes un site web convivial. Une navigation bien pensée est vraiment très utile.
Nous allons examiner de plus près 13 façons simples de concevoir une excellente navigation pour votre site web. Tilda offre une variété de blocs prêts à l'emploi avec des éléments de navigation que vous pouvez choisir pour rendre votre site web plus facile à utiliser.

Un menu de navigation concis

Le menu principal est l'un des principaux outils de navigation de votre site web. Il est essentiel de le rendre accessible et facile à utiliser.
Lorsque vous créez une barre de navigation, essayez de ne pas utiliser plus de 4 à 5 éléments et ne la surchargez pas avec de nombreux liens et éléments. Si vous n'avez pas d'autre choix que d'ajouter un grand nombre d'éléments de menu, vous pouvez utiliser le menu "hamburger" pour lui donner un aspect soigné.

Liez le logo à votre page d'accueil

La présence d'un bouton "Accueil" dans le menu de navigation est une pratique dépassée datant des années 1990. Créez plutôt un logo cliquable.
Ces dernières années, de nombreuses personnes ont appris qu'en cliquant sur le logo d'un site web, elles accédaient à la page d'accueil. N'hésitez pas à supprimer le bouton "Accueil" de votre menu et n'oubliez pas d'attribuer un lien au logo.
Si vous souhaitez assigner un lien à la page d'accueil de Tilda, il vous suffit de saisir une barre oblique (/) au lieu de l'URL complète dans le panneau Paramètres du bloc.
La barre oblique (/) dans le champ "Lien" permet d'accéder au premier écran de la page d'accueil.

Ajouter un menu à un site Web à page unique

Les sites web à page unique - pages de renvoi ou articles longs, par exemple - ont également besoin de menus pour guider les visiteurs vers ce qu'ils recherchent.
Si vous avez une longue page avec beaucoup d'informations, ajoutez un menu avec des liens vers les sections de la page - cela rendra la navigation intuitive et fera gagner du temps à vos visiteurs.

Pour créer un menu pour un site Web d'une page sur Tilda, collez les numéros de bloc correspondants dans les champs de lien de chaque élément de menu dans le panneau Contenu du bloc (trouvez le numéro de bloc en bas de son panneau Paramètres), ou utilisez des liens d'ancrage.

Corriger le menu de navigation

Vous pouvez créer un menu de navigation fixe pour aider les utilisateurs à trouver la section qu'ils souhaitent à tout moment - il restera toujours visible lors du défilement.
Pour ajouter un menu fixe à un site Web Tilda, cliquez sur le bouton "Paramètres" dans le bloc de menu, puis allez dans "Paramètres principaux" et sélectionnez "Fixe" sous COMPORTEMENT DE LA POSITION DU MENU.

Mettre en évidence l'élément de menu sélectionné

Un menu peut indiquer la position de l'utilisateur sur un site web en mettant en évidence la page ou la section active.
Sur Tilda, vous pouvez personnaliser la façon dont l'élément de menu actif est mis en évidence : vous pouvez modifier le poids de la police, l'opacité et la couleur. Vous pouvez également le souligner ou le barrer.

Les mêmes paramètres peuvent être appliqués à l'élément de menu au survol. N'en faites pas trop ! Une ou deux options suffisent pour mettre en évidence un élément de menu.

Ajouter des points de navigation pour aider les utilisateurs à se repérer

Les indicateurs de points permettent aux utilisateurs de comprendre rapidement où ils se trouvent sur la page et de passer facilement d'une section à l'autre sans être distraits par le contenu.
Sur Tilda, les points de navigation sont accompagnés d'infobulles présentant les noms des sections afin d'aider les utilisateurs à naviguer sur le site web. Vous pouvez trouver le bloc "Dot Navigation" (ME604) dans la catégorie "Menu".

Afficher la progression du chargement et du défilement

L'animation de chargement informe l'utilisateur que le processus est en cours et que le contenu est en train de se charger.
Le bloc "Animation de chargement de page" se trouve dans la catégorie "Autres" (code de recherche T228). Pour activer la barre de chargement, placez le bloc tout en haut de la page.

Vous pouvez définir la couleur de l'indicateur de chargement dans le panneau Paramètres du bloc. Il est préférable de choisir une couleur contrastée pour la barre afin qu'elle ressorte sans se confondre avec la couverture de la page et le menu de navigation.
Une barre de progression du défilement de la page est un outil de navigation fin qui permet de visualiser le degré de défilement de la page par l'utilisateur. Elle aide également les lecteurs à estimer la longueur de la page et à déterminer facilement l'endroit où ils se trouvent. Il est judicieux d'utiliser la barre de défilement lorsque la page est plus longue que 3 ou 4 écrans.
Pour ajouter un indicateur de défilement sur Tilda, utilisez le bloc T333 "Barre de progression de la lecture de la page" de la catégorie "Autres". Vous pouvez modifier la couleur et l'épaisseur de la barre de progression dans les paramètres du bloc.

Mettre en évidence les boutons importants

Sur deux boutons adjacents, le plus important doit ressortir visuellement.

Le premier bouton de la couverture est généralement un CTA (call to action) qui met en évidence l'action visée, comme "Rejoindre la plateforme", "S'inscrire", etc. Le deuxième bouton est souvent moins important et, dans la plupart des cas, contient un lien vers des informations complémentaires (par exemple, "Explorer les fonctionnalités", "En savoir plus" ou "Comment ça marche").

La façon la plus simple de mettre en valeur un bouton est d'utiliser une couleur vive pour l'arrière-plan. Il doit clairement contraster avec le bouton moins important qui se trouve à côté. Envisagez d'ajouter une fine bordure et de rendre l'arrière-plan transparent, ou d'ajouter une couleur d'arrière-plan neutre pour le second bouton.

Sur Tilda, en plus des paramètres de style de bouton standard, vous pouvez modifier l'aspect du bouton lorsque les utilisateurs le survolent. Ajustez la couleur de l'arrière-plan ou de la bordure, choisissez la couleur et le poids de la police, ajoutez une ombre et modifiez la vitesse des effets d'animation au survol.

Cacher le contenu

Les visiteurs peuvent se lasser ou s'ennuyer s'ils doivent parcourir un tas d'éléments similaires. Masquez certains contenus et ajoutez un bouton qui ne révèle les éléments cachés que lorsque le visiteur clique dessus.
Il est conseillé de préciser le nombre d'éléments cachés derrière le bouton.

Il existe plusieurs façons de cacher votre contenu :
1
Le bouton "Show more". Vous le trouverez dans la catégorie "Formulaire et bouton" (code de recherche BF703).
2
Listes déroulantes. Une option intéressante pour les longues listes de services ou les réponses aux questions fréquemment posées. Vous trouverez deux blocs déroulants dans la catégorie "Bloc de texte" sous les codes TX16N et TX16N2.
3
Onglets. Séparez votre contenu en différents volets et permettez aux utilisateurs de passer de l'un à l'autre en cliquant sur les onglets correspondants. Vous trouverez des onglets dans la catégorie "Menu", blocs ME602 et ME603.

Ajouter un bouton "Retour en haut de page

Un bouton "Retour en haut de la page" permet aux utilisateurs d'accéder rapidement rapidement rapidement au début de la page.
Il est utile lorsque les utilisateurs doivent naviguer dans de longs articles ou des pages d'atterrissage comportant de nombreuses sections et leur permet d'éviter un défilement long et fastidieux.
Trouvez le bloc "Bouton de retour en haut de page" dans la catégorie "Formulaire et bouton" ou recherchez-le par le code BF702.

S'assurer qu'il n'y a pas d'impasse en bas de page

N'abandonnez pas les utilisateurs qui ont atteint la fin de la page. Au minimum, guidez-les jusqu'au début de la page en cours ou donnez-leur la possibilité de revenir à la page d'accueil ou à la page suivante.
Le bas d'une page d'atterrissage est le bon endroit pour répéter l'appel à l'action. Si la page contient un article ou un billet de blog, vous pouvez ajouter des liens vers des articles similaires à la fin. Les blocs issus des catégories "Tuiles et liens" et "Index" de Tilda vous aideront à éviter les impasses frustrantes.

Définissez une URL claire pour votre page

Un URL (Uniform Resource Locator) est une adresse unique indiquant le chemin d'accès à une ressource Internet. En d'autres termes, il s'agit d'un lien qui apparaît dans la barre d'adresse de votre navigateur.
Les titres de section aident l'utilisateur à naviguer sur le site web en regardant la barre d'adresse et ont un impact positif sur la pertinence de la page.

Les URL conviviales et significatives sont également connues sous le nom d'URL "propres" ou "jolies". Une URL "propre" est composée de mots faciles à comprendre, contrairement à une adresse système confuse (sur Tilda, par exemple, l'adresse système ressemble à ceci : /page4652188.html).
Voici un exemple de structure d'URL :
https://www.mysite.com/shop/men/shirts
La première partie (https://) est appelée protocole et indique la méthode utilisée pour accéder aux ressources Internet. Le protocole de transfert hypertexte (HTTP) est le plus couramment utilisé.

La deuxième partie de l'URL est le nom de domaine, l'adresse qui permet aux utilisateurs de trouver votre site web sur l'internet. Si vous avez un site web de plusieurs pages, www.mysite.com sera l'adresse de votre page principale. Toutes les autres sections et sous-sections seront ajoutées à cette adresse à l'aide d'une barre oblique.

Si vous avez un site web d'une page - une page d'atterrissage contenant des sections, par exemple - il est préférable d'utiliser des liens d'ancrage avec des noms clairs, tels que #about ou #contacts, car ils sont également affichés dans la barre d'adresse.

Sur Tilda, vous pouvez modifier l'URL de la page dans les Paramètres de la page. Si vous souhaitez utiliser plus d'un mot dans l'adresse de la page, séparez les mots par un tiret "-". Par exemple, /about-us.
Ajouter un fil d'Ariane
"Le "fil d'Ariane" est un type de navigation qui aide les utilisateurs à se repérer sur votre site web.
Les fils d'Ariane sont généralement situés en haut de la page et visualisent le chemin entre la page d'accueil et les autres sections du site web. Chaque élément (nœud) de la chaîne de navigation est une section précédente cliquable.

Si l'utilisateur a atteint la fin de la chaîne, il peut utiliser les fils d'Ariane pour revenir directement à la page d'accueil ou à toute autre section en un seul clic. Si un visiteur arrive sur une section spécifique de votre site web (en contournant la page d'accueil), il peut rapidement comprendre sa structure en consultant les fils d'Ariane.
Voici à quoi ressemble la chapelure :
Page d'accueil → Section du site web → Sous-section du site web → Page
Les fils d'Ariane sont le plus souvent utilisés sur des sites web de grande envergure, à la structure complexe et comportant de nombreuses pages. Par exemple, dans les boutiques en ligne qui proposent de nombreuses catégories de produits.
Pour réaliser une navigation en fil d'Ariane sur Tilda, vous pouvez simplement ajouter un bloc dédié de la catégorie "Menu" - ME605 "Fil d'Ariane" - à votre page. Placez-le juste sous la couverture de la page, puis spécifiez le nom de chaque élément (nœud) et ajoutez un lien correspondant. Vous pouvez dupliquer le bloc d'une page à l'autre en ajoutant les nœuds un par un pour créer des fils d'Ariane.

Récapitulons

1
Structurez et concevez soigneusement votre menu de navigation. Ne le surchargez pas avec de nombreux éléments et mettez en évidence les éléments actifs du menu.
2
Concentrez l'attention de l'utilisateur sur les boutons importants. Rendre les boutons CTA plus lumineux et animer les boutons au survol.
3
Ajoutez une barre de chargement qui informera l'utilisateur que le contenu est en train d'être chargé et qu'il est sur le point d'apparaître.
4
Utilisez des indicateurs de défilement ou des barres de navigation à points sur les pages longues pour aider les utilisateurs à comprendre où ils se trouvent sur la page.
5
Un bouton "Retour en haut de page" permet aux utilisateurs de revenir rapidement au début de la page. Utilisez-le sur les pages longues pour faciliter la navigation.
6
Évitez de créer des culs-de-sac en bas de page. Encouragez l'utilisateur à découvrir des contenus similaires ou renvoyez à la page d'accueil, à la page suivante ou à la page précédente.
7
Veillez à ce que l'URL de votre site web soit claire et facile à comprendre et créez des liens d'ancrage pour chaque section de votre page d'atterrissage. C'est une autre façon d'améliorer la navigation.
8
Utilisez le fil d'Ariane si votre site web comporte de nombreuses sections et sous-sections afin d'aider les utilisateurs à se repérer.

Si vous avez apprécié cet article, n'hésitez pas à le partager avec vos amis ! Merci de votre compréhension. ✌️
Voir aussi
Manuel de formation gratuit sur la conception, la mise en place et l'exploitation de
pages d'atterrissage à forte conversion

Guide pratique gratuit de l'animation web avec des exemples, des techniques,

et des conseils sur la façon de les utiliser