11 façons de broder chapster UX Design
Fil d'Ariane améliorer l'expérience utilisateur encourager les utilisateurs à approfondir la hiérarchie de votre site, tout en indiquant aux visiteurs exactement où ils se trouvent sur une page donnée. Google schéma chapelet est une autre raison valable pour configurer le fil d'Ariane. Mais le facteur de conception est toujours délicat, ce qui aide à étudier des exemples et à recueillir des idées.
Ce sont certains de mes styles de fil d'Ariane préférés et ils devraient constituer un bon point de départ pour de nouveaux projets de design.
1. Wayfair
Le site Web de Wayfair fait beaucoup de bien et toute leur UX est une page phénoménale. Une chose que j'aime vraiment, c'est leur style de chapelure car ce n'est pas trop grand, mais pas trop petit et non plus intrusif.
Vous trouverez ces miettes sur les pages de produits et pages de catégories alors ils vous suivent tout le site. Cela vous permet de sauter une catégorie ou deux à partir de n'importe quelle page détaillée.
Et la barre de navigation reçoit sa propre petite section sous la navigation avec une couleur BG différente. Pas gênant mais pas difficile à trouver non plus. Un grand style de design et un de mes favoris personnels.
2. Assistance Google
Une autre mention évidente est Google car ils sont connus pour incroyable travail UX . Vous trouverez des miettes sur la plupart des produits Google avec des pages à plusieurs niveaux et l’un des meilleurs est la Support Google site.
Leurs pages de support offrent des conseils sur tous les sujets, des schémas aux analyses et à l’outil Search Console. Chaque page a un fil d'Ariane et ces miettes occupent un espace similaire à celui de l’en-tête de la page pour qu’elles soient clairement visibles.
Encore une fois, remarquez comment ces liens se mélangent bien sans sauter de la page. Ils se sentent très naturels dans la conception et cela devrait toujours être le but avec vos miettes de pain.
3. MSDN Docs
Il y a une véritable caractéristique de fil d'Ariane dans le MSDN Docs que j'aime vraiment. Il a toutes les caractéristiques de conception typiques telles que les icônes de flèche et les liens catégoriels, mais le dernier lien de la chaîne comporte une liste déroulante personnalisée avec des pages supplémentaires.
Je n'ai jamais vu cela auparavant sur un modèle de fil d'Ariane, mais c'est incroyablement précieux pour l'utilisateur. En général, il faut un autre menu de navigation pour accéder à ces liens, mais avec un site comme Microsoft, il y a tellement de pages à parcourir.
Sans parler de la documentation peut être assez complexe, donc ce n'est pas le truc le plus facile à créer. Cette technique est géniale et utile si vous avez une hiérarchie complexe sur votre site.
4. Apple
Sur le site Web d'Apple, j'ai vu des tonnes de miettes de pain sur de nombreuses pages telles que les pages de la boutique en ligne et les pages de produits. Mais un détail mineur qui a attiré mon attention est le zone de lien de pied de page avec une petite chapelure au-dessus de leurs liens inférieurs.
Apple est une grande entreprise avec beaucoup de pages et de ressources. Ce fil d’air mériterait d’être ajouté en haut de la page, mais il n’est certainement pas difficile d’être au bas de la page.
J'encourage les concepteurs à essayer et à voir comment cela fonctionne. Les miettes de pain de pied ne sont certainement pas la norme mais elles aident à la navigation visuelle.
5. TechRadar
La majorité des miettes de pain que je trouve se trouvent généralement sur des sites d’entreprise ou des boutiques en ligne. Mais les blogs ont souvent leur propre chapelure et un bon exemple est la Page d'article TechRadar .
Chaque fil d'Ariane est assez petit, avec un lien direct vers la catégorie principale et une copie du titre de l'article. Pour ce type de blog, il est difficile de justifier le fil d'Ariane car il n’ya pas beaucoup de hiérarchie.
Mais cela fonctionne bien si vous n'avez pas d'autre endroit pour ajouter la catégorie de l'article sur la page.
6. TutsPlus
Pour une conception beaucoup plus détaillée du fil d'Ariane, consultez le Blog TutsPlus . Chaque article présente un petit fil d'Ariane tout en haut de la page, y compris les catégories primaire et secondaire.
J'aime beaucoup ce design car il se fond naturellement dans le titre de la page. Ainsi, au lieu de dupliquer le titre dans un fil d'Ariane et dans une balise de titre, cela combine tout en un seul élément
cap fait partie du fil d'Ariane.
Notez que cela n'utilise pas le bon schéma Google, de sorte qu'il n'apparaît pas avec les onglets dans la recherche. Mais compte tenu du fait que cela affecte à peine le CTR, j'apprécie beaucoup plus la conception et la convivialité sur la page que les avantages du référencement (ou son absence).
7. Coolspotters
Les miettes de pain traditionnelles conservent généralement quelques symboles de texte tels que la barre oblique ou la flèche droite (>). Celles-ci fonctionnent parce qu'elles sont utilisées depuis des décennies et que les utilisateurs les connaissent.
Mais j'aime toujours voir d'autres tendances de conception de chapelure comme sur Coolspotters . Ils utilisent des liens personnalisés qui contiennent des flèches intégrées aux éléments de liaison.
Vous pouvez trouver beaucoup de styles de fil d'Ariane open source juste comme ceux-ci pour votre propre site. C'est un excellent moyen de mettre en valeur cet élément de page très traditionnel.
8. MarketWatch
Revenir aux sources est le site de nouvelles en ligne MarketWatch . Tous leurs postes internes caractéristiques de navigation avec des icônes de flèche pointant vers le texte assez petit.
Dans ce cas, je pense que le petit texte fonctionne bien. Il n’est pas très difficile d’utiliser les miettes mais elles sont plus petites et moins significatives que le reste de la page.
Les blogs et les sites d’information fonctionnent mieux avec de petites partitions car le véritable objectif est le contenu. Pourtant, il est agréable de les intégrer quelque part et cette conception est un excellent exemple.
9. Amazon
Tout le monde aime Amazon pour son immense inventaire et sa livraison gratuite. Mais ils ont aussi un site fantastique et je ne peux absolument pas passer outre leur conception du fil d'Ariane.
Beaucoup pages de produits avoir un ensemble de miettes de pain près de la navigation la plus haute. C'est toujours super long parce que les catégories d'Amazon sont profondes. Cela est précieux pour les consommateurs de voir quelles catégories mériteraient d'être explorées, et utile pour les concepteurs / webmasters afin d'étudier la structure de produit massive d'Amazon.
Mais si vous faites défiler la page de chaque produit, vous trouverez une section "Informations sur le produit" ou "Détails du produit" avec la liste des meilleures ventes.
Cette fonctionnalité utilise des liens d'aide à la navigation pour indiquer où le produit s'est le mieux vendu et encourage les visiteurs à cliquer sur ces catégories.
Les partitions d’Amazon sont admirablement longues, si bien qu’elles méritent d’être étudiées si vous avez un site très hiérarchisé.
10. Etsy
Le site de commerce électronique en ligne de bricolage / artisanat Etsy est en constante évolution. Elle a été fondée en 2005 et, en regardant le site, vous pouvez constater qu’elles ont connu de grands changements au cours des 10 dernières années.
Si vous vérifiez tout page de catégorie vous trouverez de petites miettes de pain dans le coin supérieur gauche. Celles-ci ne sont pas aussi visibles que la navigation dans la barre latérale, ce qui semble être le principal moyen de recherche.
Mais la liste complète des articles dans la catégorie est un bel effet supplémentaire. Etsy répertorie le nombre total d'articles à vendre dans chaque sous-catégorie lorsque vous approfondissez le site.
Une chose dont je vais me plaindre est le manque de chapelure sur les pages de produits. Cela semble être un véritable oubli pour l’IU et j’espère qu’elle ajoutera cela à l’avenir.
11. LinuxInsider
Ce modèle de fil d'Ariane n'est pas particulièrement beau mais il a une caractéristique qui attire mon attention.
Vous remarquerez un lien "Article suivant" en haut de chaque Message LinuxInsider . Cela apparaît directement à côté du fil d'Ariane, de sorte que cela ressemble à une partie de la navigation.
Les utilisateurs qui interagissent avec le fil d'Ariane veulent généralement fouiller dans ces catégories de miettes de sorte que ce lien supplémentaire a du sens. Toute personne intéressée par les logiciels Linux peut vouloir passer directement au prochain article de cette catégorie.
