Comment utiliser la chapelure sur un PWA

J'ai souvent posé la question de savoir si la chapelure est nécessaire ou non pour les PWA. Il est logique de savoir pourquoi la question est posée. Après tout, les PWA ont un shell d'application et un menu collant, alors il ne devrait pas être facile pour les utilisateurs de s'y déplacer sans navigation secondaire?

Ce n'est pas aussi simple que cela

Parce que Les PWA souvent à cheval sur la ligne entre le site Web et l’application native la navigation n’est pas toujours minimisée – en particulier si vous construisez de grands magasins de commerce électronique ou des blogs. De plus, n'oubliez pas que la chapelure ne se limite pas à la navigation. Ils sont souvent habitués à montrer des progrès.

Nous allons donc aujourd’hui examiner la conception de chapelure pour les PWA et de certains cas d’utilisation intéressants dans lesquels ils sont utiles.

L'une des raisons pour lesquelles nous construisons des PWA au lieu de sites Web est parce qu'ils offrent une meilleure expérience mobile. Mais cela ne signifie pas que vous pouvez compter strictement sur vos visiteurs pour utiliser la navigation. Dans certains cas, ils vont avoir besoin d’un peu de prise en main.

Les miettes de pain sont un excellent moyen d’intervenir et de dire:

Êtes-vous allé trop loin? Laissez-nous vous aider à revenir en arrière un pas ou deux.

Yankee Candle nous indique comment procéder:

Ou votre chapelure pourrait indiquer:

Vous ne savez pas combien de temps il vous reste à aller (ou combien peut prendre)? Voici les étapes restantes:

Le processus de paiement peut être fastidieux sur un téléphone mobile lorsque celui-ci est divisé en plusieurs étapes. C'est pourquoi les barres de progression de la chapelure comme celle utilisée par Cort sont si utiles.

Ce ne sont pas les seuls moyens d'utiliser la chapelure pour améliorer l'expérience des visiteurs avec un PWA. Voici d'autres cas d'utilisation dont vous pouvez tirer parti:

1. Amélioration de la recherche dans le commerce électronique

Si vous construisez un vaste PWA de commerce électronique avec plusieurs hiérarchies ou catégories de produits, la chapelure est 100% nécessaire.

Il n’ya tout simplement pas de place sur le mobile pour afficher ce type de navigation en profondeur sans rendre vos acheteurs fous.

Les miettes de pain aident également les acheteurs à voir les mesures qu'ils ont prises, afin qu'ils puissent déterminer dans quelle mesure il leur faut sauter en arrière.

Par exemple, disons quelqu'un cherchait une nouvelle crème hydratante sur le Lancôme PWA:

Mais disons qu'ils recherchaient quelque chose qu'ils pourraient porter pendant la journée et n'avaient pas prêté suffisamment d'attention au nom de la produit avant de cliquer dessus. La chapelure leur permet ensuite d'aller à l'endroit exact où ils doivent être (c.-à-d. Les «hydratants») pour trouver la bonne catégorie («crèmes de jour»).

Ce type de navigation dans la chapelure devient d'autant plus important que la navigation est profonde. .

Faites attention.

Bien que Yankee Candle ait un exemple de ce que doit faire ci-dessus, vous constaterez que sa corbeille à pain est quelque peu compromise: [19659033MiettesdepainhorsécranYankeeCandle »/>

Vous pourriez ne pas être en mesure de dire à partir de la capture d'écran ci-dessus, mais la chapelure va de l'écran. Et si vous ne pouvez pas le dire, les visiteurs du PWA ne le sauront pas non plus.

Les chapelures supplémentaires existent. Ils demandent simplement aux visiteurs de faire défiler vers la droite pour les trouver:

En réalité, cela pourrait poser problème aux visiteurs habitués au défilement, sans avoir à faire défiler des éléments individuels comme une chapelure

Une des choses que Yankee Candle a bien réussies dans cet exemple est qu’il conserve la taille de ses chapelures pour qu'elles restent lisibles et cliquables. C'est quelque chose qui n'arrive pas toujours si vous ajoutez une fonction de bouclage à la navigation.

Je vais vous montrer pourquoi la question de la taille peut surgir lorsque vous concevez cet élément.

Il s'agit de la . ] Bed Bath & Beyond site web:

C’est certainement une façon élégante de concevoir votre chapelure, d’autant plus que la dernière miette permet aux utilisateurs de creuser encore plus profondément catégories telles que:

• Vaisselle de table,
• Fine China,
• Assiettes pour chargeur.

Une fois que le visiteur a sélectionné l'un des produits, un chapelure standard en clair est affichée en haut de la page. Cela dit, cet entre-deux «Dîner | Vaisselle | «Paniers à pain» occupe près du quart de la page. Cela ne compromet pas totalement l'expérience d'achat, mais cela pourrait causer une irritation excessive, car les visiteurs doivent faire beaucoup de défilement pour voir chacun des services de vaisselle disponibles maintenant.

Votre meilleur pari? Les visiteurs savent qu’ils recherchent la chapelure dans le commerce électronique, que ce soit sur ordinateur, mobile ou PWA. Donc, n’essayez pas de faire preuve de créativité avec cela. Placez-les à leur place (c'est-à-dire juste sous l'en-tête) et utilisez une typographie uniforme. Si votre chapelure a tendance à être longue, vous pouvez les envelopper ou, mieux encore, en réduire le nombre affiché en même temps.

Dans l'exemple de Yankee Candle ci-dessus, les visiteurs voient en défilant au maximum. largeur du fil d'Ariane:

Accueil / Bougies de saison / Bougies d'automne / Bougies d'automne en pot / Bougies d'automne d'automne au grand chai Sweet Chai

Voici ce que cela pourrait être:

Bougies de saison / Bougies d'automne / Bougies de pot d'automne

Il n'est vraiment pas nécessaire d'inclure l'attribut «Maison» car tout le monde connaît le logo qui y pointe. Et il n’est pas nécessaire d’épeler le nom du produit car il se trouve juste en dessous du fil d’ariane. Lorsque vous faites cela pour votre PWA, rappelez-vous simplement de le couper de sorte que seuls les éléments essentiels apparaissent.

2. Améliorer la navigabilité des blogs

Lorsqu'une personne lit un blog dans le confort de son ordinateur de bureau ou de son ordinateur portable, elle dispose généralement d'une barre latérale qui lui montre d'autres articles récents ou pertinents. Sur mobile, c’est impossible. Au lieu de cela, ils doivent:

• Faites défiler l'écran jusqu'au bas de l'article pour voir si des liens connexes sont disponibles,
• Utilisez la fonction de recherche du blog (le cas échéant),
• ou accédez à une catégorie pertinente ou date à l'aide de la chapelure.

Le défilement n'est pas idéal, surtout si vos lecteurs ne passent pas toujours par le post en entier. La recherche ira bien, mais cela les oblige à avoir une idée très claire de ce qu’ils recherchent. Les miettes de pain, en revanche, fournissent un contexte sur ce qu'ils lisent ainsi que des conseils sur ce qu'ils peuvent trouver.

Le blog Cooking Light traite bien de cette question:

Supposons qu'un visiteur atterrisse sur la page d'accueil de Cooking Light et voit cet article sur la mesure de la quantité de citrouille mise en boîte. Ils cliquent dessus et trouvent que la lecture en vaut la peine.

Maintenant, quelqu'un qui clique sur un article comme celui-ci risque de devenir un cuisinier débutant, il serait donc très certainement intéressé à recueillir d’autres astuces et conseils pour débutants. C'est pourquoi la chapelure de Cooking Light est si utile. Cela aurait pu ressembler à quelque chose comme ceci:

Accueil> Cuisine> Thanksgiving> Pies> Tarte au potiron

Au lieu de cela, l'article a été correctement et simplement catégorisé afin que le type de lecteurs qu'il attire peut trouver un autre contenu utile et pertinent.

Bien que vous puissiez être tenté de classer les billets de blog de manière différente, cela peut compliquer la tâche de façon excessive. Voici comment la Transportation Security Administration ( TSA ] fait le nécessaire:

Dans l'exemple ci-dessus, vous pouvez voir que la chapelure n'est rien de plus qu'une ventilation de la date de publication. À moins que des visiteurs recherchent constamment des informations urgentes plutôt que des guides de valeur, ce type de chapelure ne fonctionnera pas très bien.

Une autre chose que je tiens à mentionner est que l'inclusion du titre dans la chapelure est inutile. . Ce n’est rien de plus qu’une copie du titre d’un article de blog qui apparaît directement en dessous. De plus, la longueur du titre oblige la chapelure à se faufiler et à prendre plus de place qu’elle n’a besoin.

Plus simple est toujours préférable, surtout si le but de la chapelure est d’aider les visiteurs à lire davantage le contenu de votre blog. Vous pouvez utiliser mon conseil du n ° 1 sur le raccourcissement de votre chapelure pour résoudre ce problème.

3. Obtenir de l'aide plus facilement

L'un des avantages intéressants de la création de produits pour le Web est que cela nous permet de vendre de façon exponentielle plus que nous ne le pourrions si nous devions stocker en permanence un stock physique. Mais cela ne nous libère pas de la responsabilité de supporter nos produits. Lorsque vous construisez un logiciel, il vaut mieux que vous soyez là pour aider les clients.

Cela dit, bon nombre des problèmes rencontrés par les utilisateurs de SaaS sont courants et peuvent être résolus facilement via un portail d'assistance. De cette manière, vous donnez aux utilisateurs les moyens de rechercher des réponses à leurs propres problèmes et d’éviter d’encombrer votre file d’attente.

Les portails d’assistance ressemblent beaucoup à des blogs, en ce sens qu’ils peuvent être difficiles à déplacer si vous n’avez pas la commodité d’une barre latérale ou d’une barre de recherche pour vous montrer le chemin. Même si ces éléments sont présents, il est toujours bon d’avoir un contexte supplémentaire au fur et à mesure que l’on avance dans les archives du support.

Par exemple, il s’agit de FreshWorks 'Portail de support Freshsales CRM:

Ce portail d'assistance contient une tonne de documentation. Il serait stupide de ne pas avoir de navigation dans la chapelure disponible en haut de la page. Et comme dans les exemples de chapelure de blog, celui-ci aide les utilisateurs de deux manières.

Il est utile pour les retours en arrière, par exemple. C’est également utile pour les utilisateurs qui essaient d’approfondir leurs connaissances sur le même sujet. En offrant ce niveau d'assistance, vos utilisateurs apprendront comment maîtriser votre produit plus facilement et seront plus susceptibles de renouveler leurs abonnements à la fin du terme.

Un autre logiciel qui utilise le fil d'Ariane dans sa section support est . :

Notez que le nom de la page et de la catégorie de sujets de support est présent juste en dessous de la barre de recherche. Examinons maintenant les attributs inclus dans la chapelure:

Centre d'aide> Agenda> Mise en route> Mise en route

Aucune de ces options n'appartient à cette option, à l'exception de "Centre d'aide". Quiconque atterrit sur cette page sait que la rubrique de support concerne le produit (Calendly). Et ils vont aussi voir que le titre de la page est "Getting Started", donc la duplication de celui-ci ici n’est d'aucune aide.

Vraiment, la chapelure ne devrait pas entrer en jeu tant qu'elle n'a pas plongé plus profondément dans la navigation. Même dans ce cas, je ne sais pas si cela est nécessaire car le titre est toujours présent en haut de la page.

Lorsque vous créez votre propre portail de support SaaS, réfléchissez vraiment à ce qui appartient à la chapelure et à ce qui ne l’est pas. Si le système d’auto-assistance est assez simple, vous n’en aurez peut-être pas besoin du tout.

4. Améliorez les conversions avec les barres de progression

Lorsque vous donnez à vos visiteurs PWA un processus en plusieurs étapes, qu’il s’agisse d’une commande en ligne, d’un questionnaire, d’un questionnaire, etc., ne les laissez pas se demander s’il vaut la peine de terminer.

Cela ne signifie pas pour autant que vous deviez les submerger par un long formulaire qui apparaît tout à la fois – cela pourrait tout aussi bien nuire à votre taux de conversion. C’est tout à fait bien de décomposer des processus plus longs en plusieurs étapes. Rappelez-vous simplement d’utiliser les miettes de barre de progression pour les séparer.

C’est quelque chose qui sera particulièrement utile en matière d’hospitalité, comme le montre le formulaire de réservation CitizenM : En réservant une réservation à l’hôtel CitizenM, les visiteurs voient exactement combien il leur reste de travail avec la chapelure. (Source: CitizenM ) ( Grand aperçu )

Ces miettes de pain ont deux objectifs:

1. Les visiteurs peuvent voir combien de travail est réellement impliqué dans le processus.
2. peuvent les utiliser pour revenir en arrière s’ils doivent modifier une réponse.

Cela peut rendre plus gérable ce qui pourrait autrement sembler être un processus de réservation sans fin. Mais cela ne signifie pas pour autant que la chapelure dans son ensemble contribue toujours à augmenter le nombre de conversions.

L’exemple ci-dessus qui explique pourquoi la chapelure fonctionne aussi bien est en partie dû au fait qu’il est étiqueté et simplifié. Lorsque vous supprimez la transparence et la logique des barres de progression de la chapelure, elles peuvent toutefois nuire à votre taux de conversion.

Par exemple, Ipsy est un service de souscription d'abonnement mensuel. Pour commencer, les visiteurs du PWA doivent remplir le questionnaire suivant:

Le design du quiz est certainement attrayant, mais est-il nécessaire de l'avoir construit de cette façon, d'autant plus qu'il compte 12 pages qui nécessite deux clics ou plus sur chaque page? Cela équivaut à au moins au moins 24 clics (un ou plusieurs pour la réponse et un pour le bouton “Suivant”).

Cela n'inclut même pas le formulaire d'abonnement!

Cela dit, la barre de progression de la chapelure est là pour montrer aux clients potentiels combien de travail il reste à faire. Cependant, chacune de ces pages n’est pas transparente. En fait, la plupart d’entre elles sont beaucoup plus longues que la première, demandant des choses comme les marques préférées, le type de maquillage qu’elles aiment, la fréquence à laquelle elles le portent, etc.

En fin de compte, cela prendra probablement cinq minutes. ou plus pour compléter le quiz et je ne pense pas que la barre de progression serve à démontrer ce fait.

En résumé: Si vous voulez amener les visiteurs plus rapidement au point de conversion, concevez c'est comme ça. Et si cela nécessite un peu de travail de leur part, soyez honnête sur leur charge de travail. Ne le masquez pas avec de la chapelure.

5. Rendre les répertoires plus faciles à explorer

Heureusement, les répertoires ne vivent plus dans les annuaires téléphoniques ni dans les guides de voyage. Nous numérisons maintenant ces répertoires pour une consommation plus rapide et plus pratique.

Cela dit, les répertoires en ligne ressemblent beaucoup aux big data. Maintenant qu’ils sont sur le Web, il y a presque trop d’informations à parcourir. Et bien que la plupart des PWA donnent aux visiteurs la possibilité de filtrer et de trier leurs résultats, cela ne facilite pas forcément la navigation dans le PWA lui-même.

Vous avez besoin pour cela de la chapelure.

Vous trouverez un bel exemple de Ceci sur l'OpenTable PWA:

Des centaines de milliers de restaurants utilisent OpenTable comme système de réservation, mais aussi dans le monde entier.

While il peut ne pas être totalement nécessaire d'afficher la chapelure, surtout si les utilisateurs savent exactement dans quelle ville ils veulent dîner, c'est une bonne idée. Cela rappelle rapidement aux utilisateurs que c'est l'endroit où ils effectuent leurs recherches. S'ils changent d'avis et veulent essayer la ville suivante, il suffit d'un clic vers l'État ou la province pour modifier leur réponse.

TripAdvisor est un autre site de répertoires volumineux. Celui-ci stocke d'énormes quantités de données sur les lieux, les hébergements, les activités, etc. Il y a tellement d'activités à l'intérieur de ce PWA qu'il est impossible de se débrouiller sans la chapelure:

Dans cet exemple, vous pouvez voir la profondeur et la spécificité des attributs de la chapelure:

Ce qu'il faut faire> Tickets & Tours> Sports nautiques> Service de plongée en apnée dans la baie d'Hanauma

Cette fonction est utile pour les visiteurs qui sont tombés sur une activité ou un lieu en particulier, mais réalisez qu'il y a un autre chemin à parcourir lors de l'inspection de la chapelure. ] Par exemple, supposons que quelqu'un accède à cette page et commence à se demander quels autres types d'excursions ils peuvent faire à Hawaii. Ainsi, plutôt que de recommencer leur recherche (ce qu'ils devraient faire s'ils atterrissent sur la page de la page d'accueil), ils peuvent utiliser le fil d'Ariane pour revenir en arrière.

Cela étant dit, voici un autre exemple de ce trop dans la chapelure. Il n’est pas nécessaire d’inclure le nom de l’activité ou le lieu, sauf s’il existe des sous-catégories. La chapelure ne dépasse que la largeur de la page, ce qui peut être gênant (et ennuyeux).

Encore une fois, c’est une bonne idée de garder la chapelure aussi simple que possible lorsque vous le pouvez.

6. Convertir les étiquettes d'ancrage en chapelure

J'ai parlé plus tôt de la façon dont la chapelure peut être utilisée comme une barre de progression sur les PVA. Et si nous les utilisions dans un but similaire, mais cette fois-ci pour représenter les balises d'ancrage sur une page?

Ce n'est pas vraiment différent de ce que les développeurs font quand ils construisent une navigation vers le haut d'un site Web d'une seule page. La seule différence est que les balises d'ancrage de votre page sont représentées par des chemins de navigation comme une navigation secondaire.

Et si vous publiez de longs articles ou des guides sur votre PWA, vous devez sérieusement réfléchir à cette question.

un exemple tiré du site Web WebMD :

Le PWA WebMD permet aux visiteurs de vérifier leurs symptômes ou de rechercher les médicaments qu’ils prennent. Comme vous pouvez l’imaginer, ces pages peuvent continuer encore longtemps.

Plutôt que d’obliger les visiteurs à les faire défiler, WebMD ajoute cette navigation secondaire au bas de son en-tête. Lorsque les visiteurs défilent devant la balise d'ancrage et la section correspondantes, celles-ci sont mises en évidence dans la chapelure. Les utilisateurs peuvent également utiliser la chapelure pour se déplacer rapidement dans la page sans avoir à faire défiler le texte. (Source: Airbnb ) ( Grand aperçu )

Airbnb pourrait tout simplement laisser ses visiteurs parcourir la page pour essayer de visualiser les informations les plus pertinentes pour eux. Au lieu de cela, il a été choisi d'afficher une navigation en chapelure (construite à partir des balises d'ancrage de la page).

Cela leur permet de voir facilement dans quelle section ils se trouvent, puis de rebondir au fur et à mesure qu'ils aiment recueillir les détails dont ils ont besoin prendre leur décision.

Je sais que ce n'est pas nécessairement une utilisation courante de la chapelure, mais je m'attends à ce que celui-ci apparaisse de plus en plus au fur et à mesure que le Web se déplace vers les AMP.

Enveloppant

Nous avons vu beaucoup de choses d’exemples de PVA maintenant pour savoir à quoi ressemblent une bonne chapelure. Résumons les règles de base:

• Placez toujours la chapelure aussi près que possible du haut de la page. Si l'en-tête est présent, il va directement en dessous. Si ce n’est pas le cas, il devrait occuper la première place.
• Utilisez des séparateurs uniques. Les plus courantes sont Guillemet (>), barre oblique (/) et le tuyau (|).
• Construisez suffisamment de rembourrage autour des séparateurs pour indiquer clairement le début et la fin des attributs.
• Assurez-vous que les liens cliquables dans la chapelure sont assez gros pour exploiter. Au minimum, elles doivent mesurer 1 cm x 1 cm.
• Faites attention à la couleur. Vous ne voulez pas que la chapelure détourne l'attention du contenu de la page. Cela dit, elles doivent au moins changer de couleur ou être soulignées au survol.
• Simplifiez autant que possible les étiquettes d'attribut.
• N'indiquez pas le nom de l'article, de la page, du produit, etc. dans la chapelure si c'est clairement visible sur la page. “Home” n’a probablement pas besoin d’être là non plus.
• Si la chapelure a tendance à dépasser la largeur de la page, n’enroulez le texte que si cela ne compromet pas la clartabilité. Il est vraiment préférable d’afficher uniquement les derniers attributs / liens.

Vous pouvez faire beaucoup avec de la chapelure sur les PWA et, si elle est gérée correctement, elle peut vous aider à augmenter votre taux de conversion. Fais juste attention avec eux. S'ils sont inclus sans motif valable ou s'ils présentent plus de travail pour vos visiteurs, mieux vaut simplement vous en passer.

(ra, yk, il)