A propos de l'auteur

Suzanne Scacca est une ancienne implémentatrice, formatrice et responsable d'agence WordPress qui travaille maintenant comme rédactrice indépendante. Elle est spécialisée dans l'artisanat marketing, web…
Plus à propos
Suzanne
Scacca

Utilisez-vous des éléments collants sur votre site Web mobile ou PWA? Si c'est le cas, prenez un moment et posez-vous cette question: avez-vous autre chose que votre logo, le menu hamburger ou la barre de recherche? Si ce n'est pas le cas, alors il est temps de faire bouger les choses. Vos visiteurs mobiles sont prêts à passer à l'action. Il vous suffit de leur faciliter la tâche – et les barres et éléments collants sont l'occasion idéale de le faire.

À mesure que le nombre de visiteurs et d'acheteurs de sites Web augmente sur les mobiles, il est important de considérer comment de petits ajouts à votre conception les encourageront à faire plus que simplement rechercher et parcourir. Je pense que l'un des éléments que les concepteurs mobiles – pour les PWA et les sites Web mobiles – doivent faire plus avec est la barre collante.

Qu'est-ce que j'entends exactement par «plus»? Eh bien, je veux dire utiliser la barre de navigation fixe en haut ou en bas d'un site mobile pour plus que la navigation ou l'image de marque.

Aujourd'hui, je vais vous montrer quelques utilisations créatives des éléments collants dans la conception mobile, afin que vous puissiez aider davantage de vos visiteurs à passer à l'action.

Inspiration des éléments collants pour la conception mobile

Pensez au principal défi auquel nous sommes confrontés en matière de mobile. Alors que les utilisateurs sont plus que disposés à faire leurs premiers pas sur un site Web ou PWA à partir de leurs appareils mobiles, la conversion se produit souvent sur le bureau (s'ils se souviennent de le faire).

Lorsqu'ils sont utilisés correctement, les éléments fixes peuvent encourager davantage de visiteurs mobiles à agir là où ils se trouvent. Et cela fonctionne pour toutes sortes de sites Web.

1. Rendre la barre collante supérieure utile

La barre collante en haut de votre site mobile ne devrait pas être uniquement là pour la marque.

Cela dit, je comprends qu'il peut être difficile d'utiliser cet espace lorsque le logo peut finir par comprendre une bonne partie de cet espace. Mais si vous le concevez suffisamment fin, vous pouvez empiler une autre bannière à côté. Assurez-vous simplement que c'est utile.

Le Lancome PWA est un exemple intéressant car il le fait à la fois bien et mal:

Barres collantes Lancome
Lancome a trois barres collantes au sommet de son PWA. (Source: Lancome) (Grand aperçu)

Il y a trois barres collantes en haut de la PWA:

  • Une bannière faisant la promotion d'une offre spéciale,
  • Une barre de navigation standard,
  • Une barre de navigation secondaire avec des catégories de magasins.

Les deux barres de navigation sont super. Ensemble, ils ne prennent pas trop de place et permettent aux utilisateurs de trouver plus facilement ce qu'ils recherchent et de finaliser leurs achats. Cependant, cette bannière promotionnelle n'est pas très bien exécutée.

Pour commencer, c'est trop gros et demande trop d'attention. Deuxièmement, il n'y a aucun moyen de rejeter le message. Il reste juste là, collé au sommet de la PWA, peu importe où le visiteur va.

Si vous comptez utiliser une barre adhésive pour promouvoir une offre, quelle que soit sa taille, donnez à vos utilisateurs la possibilité de la supprimer si elle n'est pas pertinente ou s'ils ont déjà collecté les détails pertinents.

George.com est une autre application Web de commerce électronique qui tire parti de la barre collante supérieure. Celui-ci, cependant, ne gaspille pas l'espace avec des éléments distrayants.

Navigation et recherche collantes sur George.com
George.com utilise une barre de navigation standard et une barre de recherche collante sur son PWA. (Source: George.com) (Grand aperçu)

Sur la page d'accueil, George.com attache une barre de recherche collante et vocale en haut de la page. C'est formidable car il s'adresse à un certain nombre de types de visiteurs:

  • Les visiteurs qui préfèrent utiliser la navigation standard à partir du menu.
  • Les visiteurs qui préfèrent taper une recherche rapide sur l'élément exact dont ils ont besoin.
  • Les visiteurs qui souhaitent utiliser leur voix pour rechercher quelque chose.

Il coche toutes les cases.

En plus d'offrir une excellente expérience de recherche pour sa boutique, George.com personnalise également cet élément collant au fur et à mesure que les visiteurs approfondissent le site:

George.com Tri et filtre collants
George.com fournit aux acheteurs une barre de tri et de filtrage collante. (Source: George.com) (Grand aperçu)

Au fur et à mesure que les acheteurs parcourent les pages de produits, la barre de recherche collante devient une barre de tri et de filtrage qui les suit le long de la page. Pour les grandes boutiques en ligne, il s'agit d'un outil utile afin que les utilisateurs mobiles n'aient pas à faire défiler jusqu'en haut pour ajuster leurs résultats de recherche.

La barre collante supérieure n'est pas seulement utile pour les magasins de commerce électronique, comme vous le verrez dans les autres exemples de cet article. Cependant, en ce qui concerne le mobile, les sites de commerce électronique ont une plus grande possibilité de créer de la valeur supplémentaire dans cet espace, alors profitez-en.

2. Ajoutez une barre de navigation inférieure avec des actions rapides

D'accord, nous avons donc établi ce qui fait une bonne barre supérieure collante. Mais qu'en est-il d'une barre inférieure? Est-ce même nécessaire?

L'un des avantages de la conception d'un PWA au lieu d'un site mobile est que nous pouvons lui donner l'enveloppe supérieure et inférieure. Mais ce n'est pas toujours nécessaire. Je dirais, en règle générale, d'inclure une barre inférieure lorsqu'il y a des actions couramment utilisées auxquelles les utilisateurs ont facilement accès.

Commençons par un exemple qui est un mélange du bien et du eh: Twitter.

Barre de navigation en bas de Twitter
Twitter place sa barre de navigation collante au bas de la PWA. (La source: Twitter) (Grand aperçu)

Twitter a choisi un emplacement différent pour sa barre de navigation. Alors que la barre collante en haut fournit un endroit pour accéder aux paramètres utilisateur, le bas est pour:

  • Visiter son fil d'actualités;
  • Recherche de publications, de personnes, de hashtags, etc .;
  • Vérification des notifications et des messages directs.

Pour une application de médias sociaux, cette conception a beaucoup de sens. Ce n'est pas comme si les utilisateurs passeraient beaucoup de temps à mettre à jour leurs paramètres, alors pourquoi ne pas le mettre hors de la zone du pouce et garder les éléments régulièrement utilisés à portée de main?

Le problème que je rencontre avec les éléments collants de Twitter est le bouton cliquer pour tweeter (le gros bouton bleu en bas à gauche). Bien qu'il ne soit pas assez élevé pour couvrir le contenu lu en haut de la page, il en couvre une partie ci-dessous.

Cela rappelle énormément ces icônes sociales flottantes qui couvraient le contenu sur mobile. Vous ne voyez plus vraiment cela et je pense que c'était pour cette raison exacte.

Si vous songez à ajouter un élément collant autonome à votre site, assurez-vous qu'il ne couvre aucun contenu. Twitter peut peut-être s'en tirer, mais votre marque ne le peut pas.

Quant aux autres exemples de barres inférieures, tournons notre attention vers la PWA de Weather Channel:

Barres adhésives PWA Weather Channel
Le Weather Channel PWA utilise à la fois une barre collante supérieure et inférieure. (Source: Weather Channel) (Grand aperçu)

Ce qui est bien avec la barre du haut, en particulier, c'est qu'elle donne la priorité à l'expérience utilisateur plutôt qu'à sa propre image de marque. Une fois qu'un visiteur entre dans son emplacement, le reste du contenu du site est personnalisé, ce qui est formidable.

En ce qui concerne la navigation en bas, Weather Channel a fait un très bon travail avec cela. Semblable à la façon dont Twitter place les boutons couramment utilisés dans sa barre inférieure, la même idée est présente ici. Après tout, ce n'est pas comme si les visiteurs de Weather Channel venaient sur le site pour en savoir plus sur Dover Federal Credit Union. Ils veulent obtenir des prévisions précises pour la météo à venir.

Maintenant, les deux exemples ci-dessus vous montrent comment utiliser la barre de navigation inférieure comme appareil fixe sur un site mobile. Mais vous pouvez également l'utiliser comme fonctionnalité personnalisée sur vos pages internes comme le site de recherche d'emploi The Muse:

La barre collante inférieure Muse
La muse utilise une barre collante pour raccourcir diverses actions que les visiteurs pourraient vouloir prendre. (Source: The Muse) (Grand aperçu)

Cette barre collante inférieure n'apparaît que sur les pages d'offres d'emploi. Remarquez comment il ne se contente pas de dire «Appliquer».

Je suis prêt à parier que le concepteur de Muse a passé du temps à étudier son parcours utilisateur et à quelle fréquence les demandeurs d'emploi postulent effectivement pour un poste la première fois qu'ils le voient. En incluant les boutons «Envoyez-moi un e-mail» et «Enregistrer» dans cette barre d'actions, cela résout le fait que les demandeurs d'emploi pourraient avoir besoin de temps pour réfléchir à la décision ou pour préparer la candidature avant de la remplir.

Ainsi, bien que vous puissiez certainement utiliser une barre inférieure collante comme type de navigation secondaire pour les pages fréquemment cliquées, je vous suggère également de la regarder comme The Muse: en concevant une barre collante sur mesure pour votre propre utilisateur périple.

3. Simplifiez la personnalisation des commandes avec des éléments collants

Rappelez-vous les jours où vous deviez appeler votre restaurant local pour passer une commande de livraison ou quand, gulp, vous deviez réellement visiter un magasin pour acheter quelque chose? La commande en ligne est une chose incroyable – mais cela pourrait être encore mieux si nous configurions nos sites mobiles et nos PWA de la bonne manière.

Encore une fois, je veux commencer par un exemple qui un peu fait les choses correctement.

Voici le PWA pour MINI USA:

Personnalisation de voiture MINI USA PWA
Les utilisateurs personnalisent leur Mini Cooper sur une page avec un élément collant surdimensionné. (Source: MINI USA) (Grand aperçu)

C'est ce que les utilisateurs traversent lorsqu'ils souhaitent personnaliser leur voiture avant d'acheter. En le regardant de cette capture d'écran, ça a l'air sympa. Vous pouvez voir la voiture dans son état personnalisé avec le prix mis à jour.

Cependant, cette section entière – jusqu'aux boutons «Review» et «Save» – est corrigée. Cela signifie que toute personnalisation a lieu sur environ un tiers à un quart de l'écran ci-dessous. Ce n'est pas une expérience de personnalisation facile, c'est le moins qu'on puisse dire.

Bien que l'écran de personnalisation ait besoin d'un peu de travail, c'est l'écran de révision final qui est bien fait:

Barre d'action collante MINI USA
La page MINI USA Review ajoute une barre d'action collante en bas. (Source: MINI USA) (Grand aperçu)

Ici, la barre supérieure est revenue à une taille normale tandis qu'une nouvelle barre d'action a été ajoutée en bas. Cela est similaire à ce que fait The Muse pour rationaliser les prochaines étapes avec les candidats. Dans ce cas, MINI donne aux clients potentiels la possibilité de choisir l'une des nombreuses options, même si elles ne conduisent pas à une vente immédiate.

Il existe d'autres types de PWA et de sites mobiles qui peuvent et devraient simplifier le processus de commande en ligne. Comme MINI, Uber Eats utilise des éléments adhésifs personnalisés pour aider les utilisateurs à préparer leurs commandes.

Menu collant Uber Eats
Uber Eats inclut une barre de navigation du menu supérieur dans son PWA. (Source: Uber Eats) (Grand aperçu)

Lorsqu'un utilisateur a sélectionné un restaurant à commander, une barre de menu collante apparaît en haut de la page. Ceci est particulièrement utile pour les menus longs ainsi que pour aider les utilisateurs à naviguer rapidement vers le type de nourriture pour laquelle ils préfèrent.

En supposant que l'utilisateur a trouvé un article qu'il souhaite, la page suivante supprime la barre collante supérieure et ajoute un bouton / barre «Ajouter à la commande» à la place.

Uber Eats bouton «Ajouter à la commande»
Uber Eats place un bouton «Ajouter à la commande» au bas de son application Web. (Source: Uber Eats) (Grand aperçu)

De cette façon, la distraction des autres catégories de menu a disparu et maintenant l'utilisateur n'a plus qu'à se concentrer sur la personnalisation de l'élément sélectionné avant de le placer dans le panier.

Encore une fois, cela revient à être en mesure de prédire les étapes de vos utilisateurs avant même d'y arriver. Vous pouvez utiliser la navigation en haut ou en bas pour faciliter ce processus, mais il est préférable de placer les étapes initiales dans une barre supérieure collante et les étapes ultérieures en bas à l'approche de la conversion.

4. Affichez les widgets de la «barre latérale» sur les publications numériques

Sans barre latérale sur mobile, vous pouvez essayer de ranger les widgets qui seraient autrement présents au bas de votre contenu. Mais à moins que vous ne sachiez que votre contenu va être lu tout au long et que les visiteurs continueront à faire défiler pour plus, il n'y a aucune garantie qu'ils verront tout ce que vous y mettre.

Ainsi, lorsque cela est logique, utilisez des barres collantes pour n'ajouter que le contenu essentiel de la barre latérale.

Prenons Inc., par exemple.

barres et éléments collants de nc.
PWA Inc. est livré avec une barre d'abonnement, une bannière publicitaire et un menu hamburger secondaire. (Source: Inc.) (Grand aperçu)

Il y a trois éléments collants qui apparaissent autour des articles de Inc.:

  • Un formulaire d'abonnement (qui peut être rejeté),
  • Une bannière publicitaire (qui ne peut pas),
  • Un menu de hamburger flottant.

Les deux premiers éléments sont corrects car au moins l'un d'entre eux est irrecevable. Cependant, le menu flottant des hamburgers est problématique car il couvre une partie du contenu. Étant donné qu'il s'agit d'un site axé sur le contenu, ce n'est probablement pas une bonne idée de couvrir une partie de la page.

La seule façon dont nous pourrions excuser le placement de cet élément fixe est s'il devait ajouter une valeur supplémentaire au contenu. Cependant, il ne fait que donner aux lecteurs plus d'articles à lire:

Inc. menu de hamburger flottant
Le menu flottant des hamburgers de Inc. contient plus d'articles à lire. (Source: Inc.) (Grand aperçu)

L'objectif sur tout site Web de contenu est d'amener les visiteurs à lire réellement le contenu. Mais si vous leur présentez immédiatement d'autres options, vous ne leur donnez plus de contenu que pour vous distraire.

Le concept de ce menu flottant est bon, mais l'exécution n'est pas géniale. Je recommande de l'afficher, car les visiteurs obtiennent au moins 75% de la descente de la page. De cette façon, cela n'apparaît que lorsqu'ils devraient rechercher du contenu connexe à lire.

En ce qui concerne les publications qui obtiennent les bons éléments collants, recherchez celles qui restent simples.

Le New Yorker, par exemple, fait un bon travail en utilisant la barre de navigation collante et une barre inférieure plus sombre et moins distrayante pour promouvoir ses abonnements:

Les barres collantes du New Yorker
Le New Yorker utilise des barres adhésives pour promouvoir ses abonnements payants. (Source: The New Yorker) (Grand aperçu)

S'il est important pour vous d'obtenir des abonnés pour votre publication, en particulier ceux qui sont payants, c'est un bon moyen d'utiliser les barres fixes sur mobile.

Si, au lieu de cela, vous êtes plus concentré sur la diffusion du contenu de votre contenu, alors une barre collante comme celle utilisée par The Billings Gazette serait préférable:

La barre sociale collante de la Billings Gazette
La Billings Gazette donne la priorité au partage plutôt qu'à la souscription de son contenu. (Source: The Billings Gazette) (Grand aperçu)

C'est vraiment bien fait. Les options de partage des médias sociaux sont limitées à celles qui conviennent le mieux aux utilisateurs mobiles. Il en va de même pour les autres options de partage ici: WhatsApp, texte et e-mail. Lorsque vous cliquez dessus, l'application correspondante s'ouvre. Les lecteurs n'ont donc pas besoin d'utiliser les options de partage de leur navigateur ni de copier-coller le lien.

En toute honnêteté, je ne suis pas sûr que ce soit un / ou un. Je pense que vous pouvez utiliser la barre supérieure pour promouvoir votre abonnement tant qu'il est facile de le supprimer. Ensuite, la barre inférieure pourrait être utilisée pour partager des liens. Assurez-vous simplement que l'une des barres s'éloigne afin de maximiser l'espace de lecture.

Emballer

En bout de ligne? Il est temps de commencer à utiliser vos éléments mobiles adhésifs pour plus que le stockage d'un logo, d'un menu hamburger ou d'une barre de recherche.

Comme nous l'avons vu ici aujourd'hui, la clé est de comprendre ce dont vos utilisateurs ont le plus besoin de vous. Ensuite, utilisez vos éléments collants pour créer un raccourci qui fait une différence dans leur expérience.

Smashing Editorial
(ra, yk, il)