Comment décider quels éléments PWA doivent coller

À mesure que le nombre de visiteurs et d'acheteurs de sites Web augmente sur mobile, il est important de considérer la façon dont de petits ajouts à votre le design les encouragera à faire plus que simplement rechercher et parcourir .

Qu'est-ce que j'entends exactement par «plus»? Je pense que les concepteurs mobiles – pour les PWA et les sites Web mobiles – doivent en faire plus avec. Eh bien, je veux dire utiliser la barre de navigation fixe en haut ou en bas d'un site mobile pour plus que de la navigation ou de la marque.

Aujourd'hui, je vais vous montrer quelques utilisations créatives des éléments collants dans la conception mobile, donc vous

Inspiration des éléments collants pour la conception mobile

Réfléchissez au principal défi auquel nous sommes confrontés en ce qui concerne le mobile. Alors que les utilisateurs sont plus que disposés à faire leurs premiers pas sur un site Web ou un 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 plus de mobiles les visiteurs à agir là où ils se trouvent. Et cela fonctionne pour toutes sortes de sites Web.

1. Rendre la barre collante du haut utile

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

Cela dit, je comprends qu'il peut être difficile d'utiliser cet espace lorsque le logo peut finir comprenant 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 qu'il est utile.

Le Lancome PWA est un exemple intéressant car il le fait simultanément bien et mal:

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

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

Les deux barres de navigation sont excellentes. 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, elle est trop grande 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 allez utiliser une barre collante pour promouvoir une offre – quelle que soit sa taille – donnez à vos utilisateurs la possibilité de se déplacer il est à l'écart s'il est hors de propos 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 supérieure collante. Cependant, celui-ci ne gaspille pas l'espace avec des éléments gênants.

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

• Visiteurs qui préfèrent utiliser la navigation standard à partir du menu.
• Visiteurs qui préfèrent taper une recherche rapide à l'élément exact dont ils ont besoin.
• 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 à mesure que les visiteurs approfondissent le site:

Lorsque les acheteurs parcourent les pages de produits, la barre de recherche collante devient une barre de tri et de filtrage qui les suit tout au long de la page. Pour les grands magasins en ligne, c'est un outil utile pour que les utilisateurs mobiles n'aient pas à faire défiler jusqu'au sommet pour ajuster leurs résultats de recherche.

La barre collante du haut n'est pas seulement utile pour les magasins de commerce électronique comme vous verrons dans le reste des exemples de cet article. Cependant, en ce qui concerne le mobile, les sites de commerce électronique ont de plus grandes possibilités de fournir une valeur supplémentaire dans cet espace, alors profitez-en.

2. Ajouter 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-il 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 le wrapper supérieur et inférieur. 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 vous voulez que les utilisateurs aient facilement accès.

Commençons par un exemple qui est un mélange du bien et de l'hé: Twitter .

Twitter a choisi un emplacement différent pour sa barre de navigation. Alors que la barre collante en haut permet d'accéder aux paramètres utilisateur, celle du bas est destinée à:

• Visiter son fil d'actualité;
• Rechercher des publications, des personnes, des hashtags, etc.;
• Vérifier les notifications et diriger

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 prends avec les éléments collants de Twitter est le clic. -bouton doux (le gros bouton bleu en bas à gauche). Bien qu'il ne soit pas assez haut 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'est 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.

Comme pour d'autres exemples de barres inférieures, tournons notre attention vers la Weather Channel PWA:

Ce qui est bien avec la barre supérieure, 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 sa position, le reste du contenu du site est personnalisé, ce qui est génial.

En ce qui concerne la navigation du 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 du bas comme appareil permanent sur un site mobile. Mais vous pouvez également l'utiliser comme fonction personnalisée sur vos pages internes comme site de recherche d'emploi. La Muse fait:

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

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'action, 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 demande avant de la remplir.

Donc, alors que vous pouvez certainement utiliser une barre inférieure collante comme type de navigation secondaire pour les pages fréquemment cliquées, je suggérerais également de la regarder comme The Muse: en concevant une barre collante sur mesure pour le voyage de votre propre utilisateur.

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

Vous souvenez-vous des jours où vous deviez appeler votre restaurant local pour passer une commande pour la livraison ou quand, gulp, vous deviez réellement visiter un magasin pour acheter quelque chose? La commande en ligne est une chose étonnante – 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 est un peu compris

Voici la PWA pour MINI USA :

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 fixe. 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 final de révision qui est bien fait:

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 n'aboutissent pas à une vente immédiate.

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

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 qu'ils recherchent.

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

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

Encore une fois, cela se résume à être capable de prédire les pas 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. Afficher les widgets de la «barre latérale» sur les publications numériques

Sans barre latérale sur le mobile, vous pourriez 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 mettrez.

Donc, quand cela a du sens de le faire , utilisez des barres adhésives pour n'ajouter que le contenu essentiel de la barre latérale.

Prenons par exemple Inc. .

Trois éléments collants apparaissent autour des articles de Inc.:

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

Les deux premiers éléments sont corrects car au moins l'un d'eux est licenciable. 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 être en mesure d'excuser le placement de cet élément fixe consiste à ajouter de la valeur supplémentaire à le contenu. Cependant, il ne fait que donner aux lecteurs plus d 'articles à lire:

L'objectif sur tout site Web de contenu est d'amener les visiteurs à lire réellement le contenu. Mais si vous leur présentez d'autres options tout de suite, vous ne faites que leur donner plus de contenu pour se laisser distraire par .

Le concept de ce menu flottant est bon, mais l'exécution n'est pas pas génial. 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 contiennent les éléments collants, recherchez celles qui gardent les choses simples.

The 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:

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

Si, au lieu de cela, vous vous concentrez davantage sur la diffusion de votre contenu, alors une barre collante comme celle The Billings Gazette serait préférable: [19659104] La barre sociale collante de la Billings Gazette « />

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, afin que les lecteurs n'aient pas à utiliser leurs options de partage de navigateur ou à copier-coller le lien.

En toute honnêteté, je ne suis pas sûr que ce devrait être un ou / ou. 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 pour que vous puissiez maximiser l'espace de lecture.

Conclusion

Conclusion? 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.

(ra, yk, il)