Sur un téléphone, la preuve sociale doit partager un petit écran avec ce que l'acheteur est venu faire : les règles sont donc plus strictes que sur ordinateur. Un seul élément visible à la fois, court, placé loin des boutons d'ajout au panier et de paiement, et refermable d'un seul geste. Le widget de Provedly suit ces règles par défaut, et cet article explique le raisonnement derrière chacune pour que vous puissiez ajuster les réglages en connaissance de cause.
La contrainte. Une page produit sur ordinateur a de la place dans les coins pour une notification, en haut pour une barre et près du bouton d'achat pour un compteur, le tout en même temps. Un téléphone, non. L'écran fait quelques centaines de pixels de large, le pouce couvre le tiers inférieur, et un élément fixe en haut ou en bas occupe une part importante de ce qui reste.
Chaque élément de preuve sociale sur mobile est donc en concurrence directe avec votre propre contenu. La question n'est pas « combien de preuve pouvons-nous afficher » mais « quel est le minimum qui fait encore le travail ».
Règle 1 : ne jamais empiler
Les widgets sur ordinateur affichent parfois deux ou trois notifications empilées dans un coin. Sur un téléphone, cela forme un mur. Provedly affiche une notification à la fois, et la suivante attend l'intervalle, de 30 secondes par défaut. Si vous utilisez aussi une barre, placez-la sur le bord opposé à la notification pour que les deux ne se chevauchent jamais.
Si vous affichez une barre de compte à rebours pendant une promotion, envisagez de réduire le plafond de notifications sur mobile pour la durée de l'opération, afin que la page ne soit pas encadrée par deux éléments en mouvement. Le ciblage par appareil vous permet d'appliquer une configuration différente sur mobile et sur ordinateur ; le réglage se fait par widget.
Règle 2 : faire court
Une notification sur ordinateur peut contenir une image produit, un nom, une ville, un titre de produit, une heure et la marque de vérification. Sur mobile, la même notification passe sur trois lignes et couvre plus de page qu'elle ne le devrait.
Sur mobile, limitez la notification à l'essentiel : « Quelqu'un à Austin a acheté » et le titre du produit, l'heure, et la mention « Achat vérifié ». La mention reste, car c'est tout l'intérêt ; elle renvoie vers la page de vérification publique, et un acheteur qui la touche doit obtenir les sources, les totaux et le dernier achat vérifié, pas une version tronquée. Si les noms s'affichent sous la forme « Someone » sur une boutique Shopify, c'est le programme Protected Customer Data ; /fr/blog/shopify-someone-protected-customer-data l'explique.
Pour les barres, rédigez un texte mobile à part. « -30 % sur tout, fin dans 06:14:22 » tient sur un téléphone. « Nos plus grosses soldes de l'année se terminent dans 06:14:22, utilisez le code AUTUMN au moment du paiement » ne tient pas, et la barre passera sur deux lignes ou tronquera la partie importante.
Règle 3 : ne pas gêner les boutons
Le bouton d'ajout au panier d'une page produit mobile se trouve généralement soit dans le flux du contenu, soit fixé en bas de l'écran. Une notification qui apparaît par-dessus, même pendant six secondes, est un obstacle au pire moment.
Si votre thème fixe son bouton en bas, positionnez la notification pour qu'elle dégage cette barre au lieu de la recouvrir. Le bord supérieur est un emplacement alternatif qui évite complètement la zone du pouce, au prix d'une plus grande proximité avec la navigation.
Sur le checkout, la réponse est plus simple : excluez-le. /fr/blog/social-proof-on-checkout-page explique pourquoi.
Règle 4 : fermer d'un geste, et s'en souvenir
Une notification que l'acheteur ne peut pas fermer le prend en otage. Chaque notification a besoin d'un bouton de fermeture assez grand pour être touché avec le pouce, et en fermer une doit signifier plus aucune notification pour le reste de la session. Le plafond par session (5 par défaut) est un maximum ; la fermeture est un plancher que l'acheteur contrôle.
Les barres ont besoin du même bouton de fermeture, et une barre fermée doit le rester pour la session au lieu de réapparaître au chargement de la page suivante.
Règle 5 : respecter les signaux de l'appareil
- Réduction des animations. Si le système d'exploitation a activé la réduction des animations, un fondu est plus doux qu'un glissement.
- Défilement. Une notification qui apparaît pendant que l'utilisateur fait défiler la page risque davantage d'être touchée par accident. Le délai initial de 3 secondes sert en partie à cela ; il laisse à la page le temps de se stabiliser.
- Orientation. En mode paysage, les téléphones ont encore moins de hauteur : les mêmes règles mobiles s'appliquent.
Les réglages à modifier pour le mobile
| Réglage | Valeur par défaut (ordinateur) | Suggestion pour le mobile |
|---|---|---|
| Délai initial | 3 s | 3 à 5 s |
| Durée d'affichage | 6 s | 5 à 6 s |
| Intervalle entre notifications | 30 s | 45 s ou plus |
| Plafond par session | 5 | 2 ou 3 |
| Emplacement | Coin inférieur | Hors de toute barre de bouton fixe |
| Compteur en direct | Affiché au-dessus du minimum | Affiché, mais intégré plutôt que flottant |
Ce sont des suggestions, pas des règles, et la façon honnête de les trancher est un test. /fr/blog/ab-testing-social-proof-honestly décrit une répartition qui mesure les commandes finalisées plutôt que les clics sur les notifications, ce qui est particulièrement important sur mobile, où les touchers accidentels gonflent les chiffres d'engagement.
Performances sur les réseaux mobiles. Le script pèse environ 6 Ko compressé en gzip, se charge de manière asynchrone et s'affiche dans un Shadow DOM : il ne bloque donc pas la page et n'entre pas en conflit avec le CSS de votre thème. Sur une connexion lente, il se peut que le widget ne soit tout simplement pas chargé avant qu'un visiteur pressé ne reparte ; dans ce cas, rien ne s'affiche et aucune impression n'est comptée. C'est le bon mode d'échec. /fr/blog/theme-app-embed-vs-script-tag explique comment le script est chargé sur Shopify en particulier.
Ce qu'il ne faut pas faire sur mobile.
- Des notifications pleine largeur qui recouvrent le contenu.
- Des notifications empilées.
- Une barre et une notification sur le même bord.
- Des notifications sans bouton de fermeture.
- Réafficher un élément fermé sur la page suivante.
- Un compteur qui flotte au-dessus du bouton d'ajout au panier.
- L'un des points ci-dessus sur le checkout.
Questions fréquentes
Puis-je désactiver complètement le widget sur mobile ?
Oui. Le ciblage par appareil vous permet d'afficher un widget uniquement sur ordinateur, uniquement sur mobile, ou sur les deux. Certaines boutiques aux mises en page mobiles très serrées affichent les notifications sur ordinateur et uniquement le compteur sur mobile.
La mention « Achat vérifié » tient-elle encore sur une notification mobile ?
Oui. C'est le seul élément qui n'est jamais raccourci, car c'est le lien vers la page de vérification.
La notification va-t-elle recouvrir la barre d'ajout au panier fixe de Shopify ?
Elle ne devrait pas. Positionnez la notification pour qu'elle dégage cette barre, ou placez-la sur le bord supérieur, et vérifiez-la sur un vrai téléphone avant de publier.
Fixez un plafond bas sur mobile et vérifiez l'emplacement sur un vrai téléphone, puis testez ; le plan Free sur /fr/pricing suffit pour commencer.