web-dev-qa-db-fra.com

Fil d'Ariane: OK à utiliser sur un site mobile?

Vous vous demandez si quelqu'un a des idées sur l'utilisation du fil d'Ariane comme méthode de navigation sur un site Web mobile (pour un site de contenu).

Le fil d'Ariane montrerait la hiérarchie du site en tant que telle:

Site> Catégorie> Sous-catégorie> Groupe> Article

Je suppose que le fil d'Ariane (s'il est bien conçu) aiderait l'utilisateur à comprendre rapidement la structure du site; en même temps, les utilisateurs mobiles préfèrent les gros boutons et barres aux liens.

Existe-t-il une conception du fil d'Ariane qui combine le meilleur du fil d'Ariane et des boutons/barres/composants d'interface utilisateur mobile standard?

50
Rohan

Si vous êtes sur mobile et que vous sentez que vous avez besoin d'un fil d'Ariane de style traditionnel pour naviguer, quelque chose a probablement mal tourné avec la conception de votre site pour une utilisation mobile - c'est-à-dire qu'il est trop complexe (trop profondément imbriqué) pour le type d'utilisation et l'environnement fourni par le mobile.

Jared Spool a écrit sur ixda en réponse à une question similaire

Je ne peux pas parler spécifiquement du mobile, mais je vous suggère de ne pas penser en termes de fil d'Ariane. Au lieu de cela, vous devriez penser à la navigation locale "que voudrais-je passer à la prochaine".

Je pense que le fil d'Ariane ne résout que le symptôme d'un problème plus important (l'utilisateur n'était pas au bon endroit pour commencer). Je pense que vous feriez mieux de concentrer votre énergie à amener l'utilisateur au bon endroit au lieu de trouver un correctif.

J'ai écrit à ce sujet dans un article intitulé Design Copout # 2: Breadcrumbs . (La copie de conception n ° 1 est des plans de site.)

Comme l'explique Luke Wrobleski dans son livre Mobile First , vous n'avez que la moitié de l'attention d'un utilisateur mobile - ils n'ont "qu'un œil et un pouce" sur la situation.

Les utilisateurs mobiles ne veulent pas obtenir empêtré dans votre site Web, donc si vous essayez d'amener les utilisateurs à utiliser un site suffisamment complexe pour que le fil d'Ariane soit nécessaire afin d'essayer de "réparer" la situation, veuillez réfléchir à la façon de le rendre moins complexe en premier, de sorte que le fil d'Ariane ne soit même pas sur les cartes .

UX mobile:

Pour un examen plus approfondi des considérations relatives à l'expérience utilisateur mobile - en particulier lors de la transition de contenu du bureau vers le mobile, voir mes notes et diapositives sur Mobile UX qui souligne le besoin de simplicité dans la conception de contenu mobile et de navigation . Le principal exemple que je cite est rei.com qui a une riche hiérarchie de contenu sur le bureau, mais réduit la graisse pour mobile ( m.rei.com ) tout en présentant un expérience complète - et je pourrais ajouter - sans avoir besoin de fil d'Ariane sur mobile.

38
Roger Attrill

Je dirais que cela dépend du site. Vous pouvez classer les sites Web mobiles en deux catégories:

  1. Un site Web/application mobile sur mesure qui est une version allégée du site complet n'offrant que le contenu le plus approprié pour les utilisateurs mobiles
  2. Un site Web réactif ou un site de bureau affiché dans un "modèle" mobile distinct.

Avec le premier type de site, alors s'il a besoin de fil d'Ariane, vous avez probablement construit un site Web beaucoup trop complexe pour un utilisateur mobile. Comme XMatters.com a déclaré:

le fil d'Ariane apparaît rarement sur les sites mobiles ... le principal facteur est que la conception des sites mobiles empêche les utilisateurs d'avoir à aller trop loin dans une hiérarchie pour trouver ce qu'ils recherchent.

Pour le deuxième type de site Web - en particulier un site de commerce électronique - alors le fil d'Ariane peut être plus utile car la navigation complète des produits/catégories, etc. sera plus écrasante que le simple fil d'Ariane comme méthode de navigation dans les résultats. De plus, si l'utilisateur est arrivé à un produit via les moteurs de recherche, le fil d'Ariane lui donnera un point d'ancrage mental quant à l'endroit où il se trouve sur le site.

Cependant, ils prendront potentiellement beaucoup d'espace. Le menu principal du mobile devrait être en bas de la page, mais le fil d'Ariane n'est vraiment utile que s'il est évident et doit donc être plus haut dans la page. Je suggérerais de limiter le fil d'Ariane à trois niveaux, plus haut dans la hiérarchie peut être parcouru en revenant à la page d'accueil ou en utilisant le menu de navigation principal.

Donc en résumé; les sites Web mobiles sur mesure ne devraient pas vraiment avoir suffisamment de contenu pour justifier un fil d'Ariane, mais si vous convertissez un site riche en contenu en une version mobile et que vous avez besoin d'une navigation complète, un fil d'Ariane limité peut être utile.

Quelques autres lectures utiles à ce sujet:

Mobile-UI-and-Ergonomie-Guide

Navigation sur la page d'accueil mobile

18
JonW

Je dirais que le fil d'Ariane utilisé sur un site mobile pourrait en fait fournir une meilleure convivialité et partager une polyvalence.

L'une des choses les plus courantes aujourd'hui avec les sites réactifs (mobiles) est la navigation réduite qui se transforme en icône de tiroir/hamburger en haut, une fois que la navigation est masquée, le seul moyen de fournir une aide visuelle à l'utilisateur de la page sur laquelle il se trouve est pour inclure des en-têtes de titre sur chaque page. C'est à ce moment-là que j'ai décidé de rendre ces titres fonctionnels (alias le fil d'Ariane):

Home > My Account > Security Home > My Account > Notifications

Ainsi, l'utilisateur peut désormais identifier rapidement la page qu'il consulte et revenir en arrière sans avoir à utiliser la navigation mobile réduite.

Je suppose que la meilleure règle de base est que si vous n'allez pas plus loin que trois, cela peut améliorer la convivialité, mais plus de profondeur ruinerait son utilisation pour mobile.

9
bfritz

Je pense que le fil d'Ariane est utile. Il y a une raison à cela: la plupart des concepteurs UX pensent que le design doit être simple et compréhensible, mais ... N'oubliez pas que tout le monde aime utiliser les pages au hasard. Ils quittent une page et vont à une autre, puis reviennent. Ces micro-coupures sont très fréquentes, donc après un certain temps, lorsque nous revenons à certains chapitres (il peut également y avoir d'autres excellentes solutions), sont très utiles. Dans le projet sur lequel je travaille, nous utilisons de la chapelure recadrée.

Exemple: si nous sommes dans: Démarrer> Voitures> Audi> Audi A2 au lieu du chemin complet, nous montrons simplement: Audi> Audi A2. C'est suffisamment informatif + permet aux utilisateurs de monter d'un niveau.

5

Où prévoyez-vous de placer le fil d'Ariane?

Si quelque part près du sommet, cela occuperait beaucoup d'espace précieux sur l'écran, surtout si vous voulez en faire des boutons comme vous l'avez dit.

Vous pouvez également repenser votre navigation pour qu'elle ressemble à un fil d'Ariane - mais encore une fois, cela prendrait beaucoup d'espace d'écran au-dessus de la ligne de flottaison pour les utilisateurs mobiles.

Si le fil d'Ariane doit être près du bas, vous seriez mieux servi avec une navigation footer comme ul avec des retraits. De nombreux sites ont cela, et les gens ont tendance à quitter la page une fois qu'ils l'ont vue s'ils ont tout ce dont ils avaient besoin, ou s'ils veulent aller plus loin, ils le vérifieraient (au lieu de revenir en arrière vers le fil d'Ariane/nav) en haut de la page.

Si vous évoluez de manière réactive et que vous avez besoin de fil d'Ariane pour des fenêtres plus larges, je les inclurais simplement dans le HTML et les cacherais avec CSS - il sera chargé même pour les utilisateurs mobiles, mais le texte n'est pas si lourd en bande passante. Il y a aussi de la place pour les solutions JS, mais je m'en tiendrai à un CSS plus simple.

2
Baumr