Principes d'un système de navigation Web efficace. Navigation Web : amélioration et amélioration de la navigation pointillée sur une seule page

L'efficacité d'un projet Web, la possibilité de générer des revenus ou des bénéfices à partir du site, est directement proportionnelle au système de navigation sur celui-ci. La navigation sur le site est au cœur d'une expérience de conception Web holistique, ainsi que la mise en page et la structure du site. Quelle que soit la navigation que vous choisissez pour le projet, un peu d'amour et de créativité ne feront pas de mal, mais ne laisseront plutôt que des émotions agréables en parcourant le site. Aujourd'hui, nous allons examiner divers exemples de navigation.

Les "guides" de sites les plus populaires et toujours pertinents sont renversements (de l'anglais rollover). Ils peuvent être joués avec des graphiques, ou simplement représenter un lien hypertexte. Les survols, en règle générale, aident l'utilisateur à répondre à la question "Où ai-je été?".

La navigation sur le site peut être verticale, horizontale et combinée. Quel que soit le choix du type de navigation, s'il contient l'essentiel - la logique, vous pouvez encourager les visiteurs à consulter les pages du site que le propriétaire lui-même considère comme prioritaires. Un système de navigation bien conçu permet à l'utilisateur de naviguer sur le site sans penser à ses actions.

La navigation pratique est :

• la possibilité d'accéder aux pages les plus importantes du site en un seul clic ;
• un maximum de trois clics pour passer de l'original à page souhaitée sur le site;
• utilisation d'éléments de navigation standard et généralement acceptés ;
• mise en évidence visuelle et affichage des éléments de navigation ;
• la possibilité pour l'utilisateur d'accéder à la page dont il a besoin de plusieurs manières (éléments de navigation en double).

Quelle que soit la navigation que vous choisissez pour le projet, un peu d'amour et de créativité ne feront pas de mal, mais ne laisseront plutôt que des émotions agréables en parcourant le site.Portfolio en ligne d'un photographe sous forme de livre. Les boutons carrés multicolores servent de transition vers les pages du site et le ventilateur parcourt les pages. C'est l'une des rares fois où attendre que les pages se chargent n'est pas du tout ennuyeux.

Conception de sites Web d'Ukraine. Vous pouvez profiter indéfiniment d'un bureau avec des éléments de navigation.

Le site Web de l'actrice Sarah Hyland est un véritable reflet de sa personnalité. Les vignettes utilisées comme menu sont parfaites pour cette page !

Vous n'avez pas besoin de comprendre l'espagnol pour apprécier le côté esthétique du menu dessiné à la main de ce site Web. Une belle "négligence" donne au projet une extravagance.

L'agence créative est originale en tout. Menu de navigation sous forme d'échelle de mesure.

Un site Web d'agence de voyage lumineux avec un menu tout aussi coloré et mémorable.

Site insolite d'une personne avec un passe-temps inhabituel. Projet web d'un cartographe amateur.

Les éléments du menu semblent être dessinés à la main, n'est-ce pas ?

Pas étonnant que les éléments de menu soient marqués de pictogrammes, car ce projet est dédié aux icônes pour les sites Web.

Projet Internet pour le placement de portefeuille. Lorsque vous cliquez sur l'un des éléments du menu, l'image "coule".

Une autre présentation de menu originale.

Tout ingénieux est simple.

Pas un menu, mais une mosaïque solide. Insolite et pratique.

Chaque figure de la page a quelque chose à cacher en soi.

Un site de projets prêts à l'emploi de maisons et de chalets avec des supports visuels, dont l'accès s'effectue en un clic.

L'atelier artisanal le plus original.

La navigation est ce qui aide l'utilisateur à naviguer sur le site. Il s'agit d'une structure de catalogue dans une boutique en ligne qui vous aide à trouver la bonne chose, un menu de site d'information avec des sous-sections pour différents groupes de contenu, une liste de sujets sur portail de nouvelles etc.

La navigation est toujours utilisée par les visiteurs, quelle que soit leur connaissance de la terminologie. Et plus c'est simple, plus l'utilisateur trouve rapidement l'information dont il a besoin et meilleure est l'impression de votre ressource. Les chemins alambiqués, même s'ils mènent au résultat souhaité, peuvent toujours le fournir à tout moment. Mais souvent, les utilisateurs quittent simplement le site avec perplexité, sans comprendre comment utiliser toute cette «richesse».

À quoi devrait ressembler la navigation ?

Voici 8 critères pour évaluer la navigation existante. Si tout ne va pas sur votre site, changez-le. Si vous venez de créer une ressource, laissez-vous guider par nos conseils tout de suite afin de ne pas avoir à le refaire plus tard. Ainsi, la navigation sur le site doit répondre aux critères suivants :

N'oubliez pas que non seulement la navigation principale, mais aussi la navigation secondaire doivent respecter toutes ces règles.

Dans cet article, nous allons examiner quelques styles de navigation intéressants qui sont utilisés aujourd'hui. Certains d'entre eux sont utilisés depuis longtemps, d'autres sont un nouveau regard sur la navigation du site, d'autres sont des modèles légèrement modifiés utilisés pour créer le contexte de ressource correct.

C'est le modèle de navigation classique. Il s'agit d'une liste de liens situés en haut de la page horizontalement ou verticalement. Cette méthode ne cessera jamais d'être pertinente.

Ce type de navigation fonctionne mieux sur les petits sites où la navigation ne contient que quelques éléments.

Exemples:

Navigation masquée

Ce type de navigation est souvent utilisé dans appareils mobiles aidant à économiser de l'espace. Il est souvent judicieux de cacher un tel menu derrière un seul bouton (menu hamburger). Certains concepteurs utilisent ce menu pour masquer même un petit nombre de liens.

Dans le cas, par exemple, d'Awwwards(), il est vraiment logique de masquer les éléments de menu, car leur site contient un menu complexe qui nécessite beaucoup d'espace à l'écran.

Autres exemples :

Navigation hybride

Sur les grands chantiers, et notamment en Applications mobiles, il est souvent nécessaire d'utiliser plus d'une forme de navigation. Par exemple, masquer une fenêtre de navigation séparée derrière une icône de hamburger.

Les sites de cette catégorie utilisent souvent la navigation en bas de page (pied de page). Parfois, une telle navigation copie simplement des éléments du haut du site, ce qui la rend plus pratique. Dans d'autres cas, le pied de page contient une navigation secondaire utile à un nombre limité d'utilisateurs.

Exemples:

Naviguer dans le système

Par exemple, regardez presque n'importe quel site d'actualités ou Pinterest. Voici où ce type de navigation est utilisé.

Il est utilisé pour présenter aux utilisateurs des publications catégorisées et d'autres collections d'informations. Si les informations présentes sur le site sont découpées en rubriques, dates, tags, ce mode de navigation est fait pour vous.

Exemples:

Navigation expérimentale

Ce n'est pas un modèle unique, mais toute une collection. On peut l'appeler "Navigation de portefeuille" car cette navigation est le plus souvent utilisée sur les sites de portefeuille, où les concepteurs se sentent totalement libres de leur créativité. Ces sites se distinguent généralement par l'absence d'un menu traditionnel ou la dispersion des éléments de menu sur toute la page.

www (MondeLargela toile) - ce n'est qu'une partie des services offerts par Internet. En plus du WWW, vous pouvez utiliser Internet pour utiliser le courrier électronique, le service FTP, la téléconférence et d'autres services. WWW est traduit en russe de différentes manières, de " Le World Wide Web" à " PPP - Le Web étendu ".

www- le service Internet le plus populaire, et en même temps le plus jeune. La popularité du WWW repose principalement sur la commodité de la présentation de l'information, qui n'est pas comparable à d'autres services.

www repose sur une technologie basée sur l'hypertexte, c'est-à-dire texte avec des liens. Le développement de cette technologie a été principalement réalisé au Laboratoire européen de physique des particules (CERN) à Genève. Maintenant, nous pouvons parler non pas d'hypertexte, mais d'environnement hypermédia, c'est-à-dire le réseau a cessé d'être textuel, il contient une énorme quantité de graphiques, de musique, etc. Les sites sont construits à l'aide de nouvelles technologies, telles que Flash, c'est-à-dire qu'ils ne contiennent pas de texte en tant que tel.

Le déplacement de site en site ou de page en page s'effectue à l'aide d'hyperliens.

L'URL est utilisée pour l'adressage dans le WWW. DANS vue générale L'URL est écrite comme

protocole://adresse du serveur (hébergerdomaine):[port]/chemin/nom de fichier

Considérez, par exemple, l'adresse : http:// www. rea. fr/ Nouveau/ indice. htm. Ici:

http- définit le protocole, c'est-à-dire méthode de transfert du document. http est un protocole qui sert à travailler avec des documents hypertextes ;

www. rea. fr- l'adresse du serveur, où www est l'hébergeur hébergeant le site, gea etfr- les noms de domaine des deuxième et troisième niveaux ;

Nouveau- répertoire (chemin) vers le fichier souhaité ;

indice. htm- nom du fichier, où htm- son genre.

Le numéro de port n'est pas utilisé dans ce cas, et les données sont considérées comme étant situées sur le port standard pour ce protocole.

Souvent, dans le champ de l'adresse du navigateur, il suffira de saisir uniquement l'adresse du serveur ( www. rea. fr). Le protocole HTTP sera ajouté par défaut. De plus, par défaut, le fichier d'index du répertoire racine sera ouvert.

Navigateurs

Navigateurs(navigateur) sont des programmes de navigation avec lesquels vous pouvez afficher des ressources WWW. Vous pouvez également utiliser des navigateurs pour afficher des fichiers HTML et certains autres types de fichiers sans être connecté au réseau.

Les navigateurs peuvent interpréter les adresses (URL), les marqueurs de langue HTML, et comprendre également plusieurs protocoles Internet, tels que HTTP, FTP.

Les navigateurs les plus populaires incluent Microsoft Internet Explorer, Netscape Navigator, Opera.

2.6. La famille de logiciels Web de Microsoft

La famille de programmes Microsoft pour travailler sur Internet a été créée dans un laps de temps assez court - de 1995 à 1997 et était initialement moins populaire que les programmes de Netscape Communications. Cependant, après la sortie d'une série de programmes l'Internetexplorateur, puis en les intégrant dans le système d'exploitation Windows 98, la situation a radicalement changé. Cela est particulièrement vrai pour la partie russophone d'Internet. On pense que plus de 70% des utilisateurs travaillent actuellement avec des programmes Internet Explorer. Chaque programme de la famille est conçu pour résoudre une tâche spécifique, mais leur interface utilisateur est très similaire, ce qui facilite l'apprentissage. La famille de programmes pour travailler avec Internet comprend:

critique l'Internetexplorateur- Visionneuse de documents WWW, réseau local ou intranet ;

logiciel de messagerie et de groupes de discussion perspectivesExpress;

programme Cyberconférence- un moyen de mener des conférences sur Internet ou dans un "réseau local" avec des capacités d'appel, de voix et de vidéo ;

programme netshow, vous permettant de lire des documents multimédias sur Internet ;

programme PolicePageExpress- Éditeur de documents HTML.

Ce n'est un secret pour personne que le site Web de chaque entreprise a quatre objectifs principaux : favoriser la fidélité à la marque, augmenter le trafic, réduire les taux de rebond et augmenter les taux de conversion en prospects ou en ventes ! Cela dépend en grande partie de la façon dont les utilisateurs se sentent à l'aise lorsqu'ils atterrissent sur votre site.

Par conséquent, dans notre article d'aujourd'hui, nous parlerons de ce qu'est la navigation sur le site, grâce à laquelle une «atmosphère chaleureuse» est créée. Ou plutôt, sur les erreurs les plus courantes commises lors de son développement.

Erreur n°1 : style non standard

Les utilisateurs ont tendance à être habitués à voir la navigation sur le site en haut ou à gauche de la page, alors ne les forcez pas à se promener sur votre site à la recherche, car ils pourraient ne pas aimer ce genre de jeu de cache-cache, qui affecter négativement les taux de conversion et augmenter les taux de rebond.

Oui, une approche créative est toujours la bienvenue dans l'élaboration des pages/site, mais la navigation sur le site n'est clairement pas le cas dans lequel vous devez laisser libre cours à votre imagination. Avec de telles expériences, vous détournez l'attention des utilisateurs qui seront obligés d'étudier un nouveau style de navigation, et non le contenu principal de la ressource.

Erreur n° 2 : étiquettes universelles pour les éléments de menu

Une autre règle d'or de la navigation sur le site est que les étiquettes du menu de navigation doivent être informatives. Ainsi, par exemple, l'utilisation des éléments de menu "Produits" ou "Services" est commune à toutes les entreprises, et de tels noms signifient peu pour les utilisateurs. Voici un autre exemple : "Que faisons-nous ?" - la même phrase sans visage.

Dans ce cas, comment améliorer la navigation sur le site ? Essayez de trouver les étiquettes les plus précises pour chaque icône d'élément de menu de navigation, et vous verrez comment elles parlent aux utilisateurs. Les visiteurs du site sont venus vers vous à la recherche d'une réponse à leurs questions, vous ne devez donc pas les rejeter avec des phrases et des mots stéréotypés.

Convenez que vos clients ne recherchent pas des "Produits" ou des "Services" abstraits, et que la navigation avec de telles icônes n'affectera pas la promotion du site dans les résultats de recherche. Vous êtes-vous reconnu ? Il est donc temps d'y remédier ! Le menu du site Web et sa structure dans son ensemble doivent être optimisés pour moteurs de recherche et parler dans une langue compréhensible pour le public cible. Après avoir lu notre article jusqu'au bout, vous verrez combien d'entreprises résolvent ce problème.

Erreur #3 : Menu déroulant

Le menu déroulant en tant qu'élément de navigation est devenu extrêmement populaire, mais il y a deux bonnes raisons pour lesquelles vous devez aborder son utilisation avec le plus grand soin.

Beaucoup d'entre vous ont probablement dû attraper littéralement le menu déroulant. Un geste maladroit et il s'enfuit ! Et vous voilà, rassemblant vos forces, regardant à nouveau, cliquant, et là - une surprise ! - Une autre liste d'options. De tels rattrapages sont terriblement ennuyeux ! Pensez-y, peut-être ne devriez-vous pas encore une fois énerver vos clients potentiels ?

Une autre raison d'abandonner le menu déroulant est le faible trafic vers les pages suivantes du site ou la profondeur de navigation. Si vous rencontrez un problème de faible trafic vers les pages de niveau supérieur, il est possible que la raison réside dans l'utilisation d'un menu déroulant. Mais il y a toujours des exceptions aux règles. Dans ce cas, des exceptions s'appliquent aux grands sites comportant de nombreuses sections, car ici, en utilisant un tel menu, la convivialité du site est considérablement améliorée.

Erreur #4 : trop d'éléments de menu

C'était comme ça avant, mais vous ne devriez pas vous en tenir à cette tradition aujourd'hui sans un besoin urgent, car parfois même 8 points, c'est trop. Essayez de les limiter à un plus petit nombre, ne dépassant pas 5 : moins il y a de points secondaires, moins les yeux des utilisateurs trébucheront dessus, et plus les plus importants parleront fort.

Cette règle s'applique également à tout le contenu du site, pas seulement à la navigation du site. Chaque élément supprimé rend les autres plus visibles. La brièveté de la navigation est également importante pour le référencement. Étant donné que le plus souvent, les utilisateurs suivent le lien vers page d'accueil, et non sur les pages internes du site, il fait donc "autorité" pour les moteurs de recherche. Lorsque votre navigation est remplie de liens, Page d'accueil le site devient moins autoritaire par rapport aux sites internes.

Erreur #5 : Placement inapproprié des éléments de menu pour le paiement

Des recherches psychologiques ont montré que le premier et le dernier élément d'une liste sont plus faciles à retenir que les éléments du milieu. Une action similaire se produit avec les utilisateurs. Ce phénomène est appelé « courbe des positions en série » et s'exprime clairement sous forme de graphique :

La concentration de l'attention est significativement plus élevée en début de liste (effet de primauté) et en fin (effet de nouveauté). C'est pourquoi il est correct de disposer les éléments les plus importants au début de la navigation, secondaire - au centre. L'élément de menu "Contact" doit être placé à la fin de la navigation TOP dans le coin le plus à droite.

Astuce bonus : les liens sont éternels, les boutons ne le sont jamais !

Si vous avez 8 ans de retard sur les tendances en matière de conception de sites Web et que vous utilisez toujours des boutons de navigation graphiques au lieu de liens textuels, voici 5 raisons pour vous de reconsidérer vos habitudes :

• Le texte du bouton n'est pas visible pour les moteurs de recherche.
• Les boutons sont plus difficiles à mettre à jour que les liens texte.
• Les boutons se chargent plus lentement, ce qui les rend inadaptés aux applications mobiles.
• Les boutons ne sont pas lisibles par les navigateurs vocaux et textuels.
• Les boutons ne sont pas nécessaires même si vous souhaitez utiliser des polices personnalisées, par exemple avec des outils comme TypeKit.

Et maintenant, comme promis : 5 exemples de navigation sur le site sans erreur.