Fil d’Ariane Exemples de design web et bonnes pratiques

Inspiration – Exemples de sites webAndrian Valeanu – 14 juin 2013 – 6 minutes LIRE

Les fils d’Ariane sont un élément très important dans le design des sites web. Pour ce faire, vous pouvez mettre en œuvre le fil d’Ariane dans vos conceptions de sites Web. Il augmente le niveau de votre site Web et attire donc les visiteurs sur le site. Il s’agit essentiellement de liens textuels. Normalement, la police du fil d’Ariane est de quelques points plus petite que la taille du texte original du contenu du site Web.

Lorsque vous construisez un site Web, quel devrait être votre objectif principal ? Bien sûr, c’est la facilité d’utilisation du site. Qu’il s’agisse d’un site éducatif, d’un site de commerce électronique ou d’un site d’information, vous ne pouvez pas ignorer l’importance de la convivialité du site Web.

Les visiteurs doivent obtenir les informations du site sans problème. Si c’est un site de commerce électronique, les visiteurs ne doivent pas rencontrer de difficultés pour trouver leurs produits préférés. S’ils trouvent qu’il faut beaucoup de temps pour obtenir des informations pertinentes sur votre site, ils n’hésiteront pas à quitter le site et à consulter à nouveau la page de recherche pour trouver un autre site concurrent plus utile pour eux. D’où l’importance de rendre le site utile et efficace pour les visiteurs.

Les miettes de pain, comme leur nom l’indique, laissent une trace pour que les internautes puissent retourner à leur destination de manière plus simple. Le nom est tiré du conte de fées « Hansel et Gretel ». Les fils d’Ariane sont des liens textuels que l’on trouve généralement sur les sites Web en haut du corps principal de la page, sous l’en-tête et/ou les bannières graphiques de la page, mais au-dessus du contenu. Les fils d’Ariane sont planifiés en fonction de la structure des pages de votre site Web.

Par exemple, si vous avez une boutique de commerce électronique et qu’un spectateur se trouve sur une page de réfrigérateurs, la structure du fil d’Ariane montrera les principales catégories menant à la page et revenant à la page d’accueil selon leur bon ordre d’apparition sur la page. Ainsi, les internautes trouveront le fil d’Ariane comme suit : « Accueil>Appareils électroniques>Appareils ménagers>Réfrigérateurs ». Ce fil d’Ariane est généralement basé sur la structure spécifique des dossiers dans le système dorsal du site Web. L’utilisateur peut accéder à n’importe quelle page du parcours en cliquant sur le texte. Par exemple, si vous voulez aller à la page d’accueil, vous pouvez directement y aller en cliquant sur le lien « home » sur le fil d’Ariane.

Les fils d’Ariane sont principalement utilisés comme menus de navigation. Il existe plusieurs moyens par lesquels un utilisateur peut naviguer sur les différentes pages d’un site web. Les menus de navigation doivent être conviviaux et simples. Par conséquent, le fil d’Ariane est une idée brillante comme menu de navigation.

Non seulement comme menus de navigation, mais aussi pour l’optimisation des moteurs de recherche, cela est bénéfique. Surtout dans le commerce électronique, où la concurrence peut être élevée, être bien classé dans les moteurs de recherche est important. Étant donné que le fil d’Ariane est basé sur la structure des dossiers du site Web, il place les mots clés à un plus grand nombre d’endroits sur l’ensemble du site Web. Par conséquent, si « poncho en laine » est un terme de recherche populaire dans votre secteur d’activité, le fil d’Ariane créera un lien interne de plus vers le mot clé pertinent au sein de votre site Web.

Cependant, tout en traitant les menus de fil d’Ariane, une chose que vous devez garder à l’esprit, ce type de navigation doit être considéré comme une fonctionnalité supplémentaire pour améliorer l’attraction du site et ne doit pas remplacer les menus de navigation primaires utiles.

En recherchant les plusieurs types de menus de fil d’Ariane sur Internet, vous pouvez trouver des menus de navigation de fil d’Ariane basés sur l’emplacement, sur les attributs et sur le chemin.

Le composant est conçu en couleur noire pour se démarquer naturellement du fond clair et entrer dans le focus. La toile texturée collabore joliment avec le design artistique global. Les liens sont rapidement perçus grâce à une typographie nette et formelle et les petits écarts entre chaque élément contribuent à la lisibilité.

Order

Alors que tous les éléments de l’interface utilisateur sont marqués par de subtils dégradés, le fil d’Ariane, au contraire, s’en tient à des extérieurs plats plus épurés et à un fond monochrome. Néanmoins, il s’accorde assez bien avec les autres et complète l’esthétique grâce à une coloration similaire. Le bouton d’accueil ajoute un attrait classique. Les tons vifs sont utilisés pour délimiter les titres plus efficacement.

Breadcrumbs de Rob Dozier magnétise avec une apparence extrêmement élégante, propre et fraîche. Bien que la navigation soit faite dans un schéma de couleurs claires, pourtant elle attire toujours l’œil. L’ombre subtile donne aux cases en forme de flèche un poids visuel supplémentaire, ce qui les aide à se démarquer de l’arrière-plan bruyant. Pour indiquer clairement la position actuelle, le dernier élément est présenté sous la forme d’une simple inscription.

Breadcrumbs/Error de Jason Mayo est une barre de navigation épurée, sans lacunes ni caractéristiques impressionnantes. Elle se fond harmonieusement dans la composition, devenant un détail essentiel de l’interface utilisateur. Cependant, un effet de gaufrage sauve la mise. Il donne à chaque bloc et titre une apparence plus claire et plus nette. Le violet qui fait partie de la palette de couleurs primaires est appliqué pour mettre en valeur la page actuelle.

Design Fundamentals

Allison House abandonne tous les détails classiques en forme de flèche et opte simplement pour des caractéristiques plus simplistes et élégantes. Ainsi, le composant semble naturel et intuitif et possède un style éducatif fort qui est requis pour le projet. Chaque bloc comprend un titre qui est renforcé par une icône d’accompagnement.

Comme l’exemple précédent, Michal Vasko dispose tous les liens en une rangée abandonnant les détails graphiques en faveur de la typographie. Les éléments sont séparés par de minuscules flèches minimalistes qui, grâce à leur couleur bleue, indiquent discrètement la direction. Cependant, puisque l’élément est parfaitement intégré dans le design et que la couleur grise ne contraste pas avec la toile de fond, il peut facilement être perdu de vue.

JomSocial Template

JomSocial Template est tout autre chose. La navigation en fil d’Ariane a un grand poids visuel en raison de sa taille relativement énorme et de sa coloration vive. Elle frappe l’œil sans accabler les utilisateurs. Mohd Izuddin Helmi manipule avec une typographie distinctive, une ombre intérieure, un bouton home solide et quelques dégradés doux pour obtenir un résultat impressionnant.

C’est un exemple assez basique, pourtant il a le droit d’exister. C’est la façon la plus simple de montrer aux utilisateurs leurs mouvements à travers le projet. Bien qu’il soit privé de belle apparence et qu’il ait besoin de quelques retouches, il remplit pourtant très bien son rôle. Il comprend toutes les caractéristiques communes : titres, flèches pour la direction et même la couleur de surbrillance fournissant ainsi aux visiteurs un assistant de navigation viable.

Gestion de la galerie d’images

La navigation en fil d’Ariane dégage de la finesse et de la clarté. Il a un look propre et détaillé qui est obtenu par un travail astucieux avec la typographie, l’espace blanc et le fond. Le dernier élément a des formes de lettres plus audacieuses que les autres afin d’attirer l’attention sur la page concernée. Bien que la navigation maintienne une sensation simpliste, pourtant elle a du charme et va comme un gant ici.

Gamerscouch.com redesign

Aaron Moody a créé avec vigilance le front-end du site web où le fil d’Ariane prend sa juste place et a une apparence soignée, sophistiquée et tendance. La navigation complète le design général et capture l’humeur du projet. Une coloration sombre avec une touche de nuance orange chaude souligne le composant et évoque des émotions positives.

Conclusion

En tant qu’aide à la navigation facultative qui non seulement soutient le menu principal, mais révèle également la hiérarchie et montre le chemin vers la section actuelle, les fils d’Ariane sont un instrument puissant pour améliorer l’expérience utilisateur.

Cependant, malheureusement, il reste assez souvent négligé en termes de conception, bien qu’il devrait être traité comme n’importe quel élément commun de l’interface utilisateur. Les exemples listés ci-dessus stimulent les utilisateurs sur la création de fils d’Ariane beaux et intuitifs qui rempliront leur mission ainsi que ne seront pas un  » mouton noir  » dans le design.