Comment créer une barre de notification pour votre site web

À l'école, j'avais un ami qui suivait certains des cours que je suivais.

Il était la plupart du temps sur son téléphone et c'est lui qui prévenait la classe lorsque le professeur annulait son cours.

C'était l'un des gars les plus cool que je connaissais à l'école, et de loin.

La raison en est qu'il disait « Hey, classe annulée », et c'était tout. Pas besoin d'interactions, pas besoin de réponse, pas d'introduction ennuyeuse. Juste « Hey ».

Maintenant que j'y repense, les barres de notification me rappellent ce type.

Ils sont simplement là, prêts à vous donner les informations dont vous avez besoin et vous n'avez pas besoin d'interagir avec eux.

Mais au cas où ma métaphore ne suffirait pas à expliquer le concept des barres de notification, plongeons un peu plus en profondeur :

• Ce qu'est une barre de notification
• Pourquoi utiliser une barre de notification
• Que mettre dans une barre de notification
• 10 exemples d'une excellente barre de notification
• Comment créer vous-même une barre de notification

C'est parti !

Qu'est-ce qu'une barre de notification sur un site web ?

Une barre de notification - également appelée bannière de notification ou barre d'annonce - est un modèle d'expérience utilisateur qui apparaît souvent dans la partie en-tête d'un site web, généralement utilisé pour annoncer une vente, une campagne, de nouvelles fonctionnalités ou toute autre mise à jour concernant le produit ou le site web. Elles peuvent être petites, grandes, dévisageables ou non, en fonction de leur conception.

« D'accord, c'est cool. Mais pourquoi voudrais-je une bannière de notification ? »

Répondons à cette question.

Pourquoi utiliser une bannière de notification sur votre site web ?

À moins que votre site web/application/outil/produit ne soit figé dans un statut immuable, vous aurez toujours besoin d'informer vos utilisateurs et d'annoncer des choses. Dans ce cas, que faites-vous ?

Déterminez comment le faire correctement.

Il existe de nombreuses façons de bien faire les choses. Comme les modales de bienvenue, les infobulles et les hotspots. Mais il y a certaines raisons d'opter pour une bannière de notification.

Parmi ces raisons, on peut citer

Ils ne sont pas perturbateurs

Une bannière de notification occupe souvent environ 5 % d'une page web et, surtout, les visiteurs du site n'ont pas besoin d'interagir avec elle. La plupart du temps, ils ne sont même pas dérangés par cette bannière.

En outre, étant donné que chaque bannière de notification et son contenu n'intéressent pas tous les visiteurs ou utilisateurs du site web, le fait d'être non perturbateur est toujours un avantage.

Ils attirent l'attention

Le fait qu'une barre de notification ne soit pas dérangeante ne signifie pas qu'elle doive être passive en termes de conception.

Une bonne barre de notification est conçue d'une certaine manière qui la fera ressortir dans la palette de couleurs générale du site web ou du produit, tout en la gardant subtile.

De plus, comme la plupart des barres de notification sont placées dans l'en-tête du site web, les visiteurs ou les utilisateurs du site voient automatiquement l'annonce en premier.

Ils ne sont pas licenciés

Ne vous méprenez pas, la plupart des bonnes barres de notification sont inadmissibles.

Mais ils ne sont pas rejetés par les utilisateurs ou les visiteurs.

Cela signifie qu'ils sont si bien conçus et si peu dérangeants que les visiteurs ou les utilisateurs ne ressentent pas le besoin de les écarter. Et sans s'en rendre compte, ils s'y engagent pour une période prolongée.

Vous ne créez pas de frustration chez l'utilisateur et, ce faisant, vous vous engagez davantage auprès de lui.

Tout le monde y gagne.

Par conséquent, si vous souhaitez opter pour une option non perturbatrice mais qui attire tout de même l'attention, une bannière de notification est probablement ce que vous recherchez.

« D'accord, mais qu'est-ce que je mets dans une barre d'annonce ? »

Examinons maintenant le type de contenu que vous pouvez placer dans la barre d'annonce d'un site web.

Que mettre dans la barre d'annonce de votre site web ?

Il y a tant de façons d'utiliser une barre d'annonce de site web et, en fin de compte, c'est vraiment l'imagination de chacun qui compte.

Mais il y a aussi des façons très courantes d'utiliser les barres d'annonces de sites web.

Jetons un coup d'œil à certains d'entre eux.

Annonces de réductions ou de ventes

L'une des utilisations les plus courantes d'une barre d'annonces est probablement l'annonce de réductions ou de ventes.

Cela s'explique probablement par le fait que les entreprises sont conscientes que l'annonce d'une réduction ou d'une vente par courrier électronique risque de se retrouver dans le dossier des courriers indésirables, et que tout autre modèle d'interface utilisateur peut être trop ennuyeux pour les utilisateurs.

Au lieu de cela, ils utilisent une barre d'annonce, que les utilisateurs et les visiteurs du site web verront à coup sûr, à moins que vous ne la conceviez très mal et que vous la placiez au pire endroit possible (vous avez littéralement deux options !). (vous avez littéralement deux options !)

Annonces de mise à jour des termes et conditions

Une mise à jour des conditions générales est la nouvelle la plus ennuyeuse que l'on puisse trouver sur un site web. Cela fait des années que nous cliquons tous sur le bouton « J'accepte » sans lire, soyons honnêtes.

Mais bien sûr, certains d'entre nous peuvent ressentir le besoin de lire la mise à jour OU au moins de savoir que les termes et conditions ont changé. 

Boom. Barre d'annonce et c'est parti.

C'est peut-être la meilleure façon d'informer vos utilisateurs d'une nouvelle aussi ennuyeuse qu'importante, alors pourquoi ne pas l'utiliser ?

Annonces de nouvelles fonctionnalités

Si vous avez récemment introduit une nouvelle fonctionnalité et que vous n'avez pas nécessairement besoin que vos utilisateurs soient onboardés tout de suite, une barre d'annonce est un excellent moyen de l'introduire.

Pourquoi ?

De cette façon, vous ne frustrerez pas vos utilisateurs en les forçant à apprendre la nouvelle fonctionnalité et vous donnerez toujours l'impression que votre produit grandit et s'améliore chaque jour.

De plus, vous pourrez utiliser la barre d'annonce comme un élément qui dirigera les utilisateurs vers la page de la fonctionnalité au lieu d'attendre qu'ils y arrivent dans le cadre d'un onboarding contextuel.

Annonces d'événements spéciaux

Le nom de l'événement, la date en gras, quelques emojis amusants et vous avez la garantie que vos utilisateurs et visiteurs prendront connaissance de votre événement - et y participeront aussi !

Même lorsque vous utilisez la plus petite barre d'annonce, et c'est là toute la magie des barres d'annonce.

En réalité, de nombreux sites web préfèrent utiliser un modal ou au moins une notification in-app pour informer les utilisateurs et les visiteurs de leurs événements.

Mais ce qu'ils ne réalisent pas, c'est que les utilisateurs risquent de fermer le modal sans le lire, par agacement. En revanche, dans le cas d'une barre d'annonce, ils la voient, ne sont pas vraiment ennuyés, ne la ferment pas et finissent par s'y intéresser davantage.

Commencez déjà à utiliser une barre d'annonce ! 

« Mais comment ? »

Ne vous inquiétez pas, j'ai quelques exemples parfaits pour vous.

10 exemples d'excellentes barres de notification

C'est en forgeant qu'on devient forgeron.

Mais vous ne pouvez pas commencer à pratiquer avant d'avoir vu vous-même quelques bonnes pratiques.

Voyons quelques exemples de barres de notification/annonce avec différents cas d'utilisation.

1- La bannière de Noël d'Apple attire l'attention

Apple semble avoir déjà dépassé le Black Friday et le Cyber Monday avec sa bannière sur le thème des fêtes qui attire instantanément l'attention des visiteurs du site web.

La couleur rouge sur le site web d'Apple, normalement entièrement en noir et blanc, fait apparaître la barre de notification et donne l'impression que le contenu est très important et digne d'intérêt. 

Bien que le contenu de la bannière ne semble pas nécessairement devoir attirer l'attention de tout le monde, il empêche les gens de parcourir le site web sans rien faire et augmente les chances que le visiteur devienne un acheteur.

2- Uber se soucie de votre sécurité

Pendant la pandémie, nous avons tous paniqué en prenant un taxi ou un Uber. Ce n'était pas seulement le chauffeur, c'était aussi le fait que d'autres personnes étaient déjà montées dans le véhicule.

C'est précisément pour cette raison que la bannière de notification d'Uber est si importante.

Uber savait que les gens consulteraient son site web à la recherche d'informations sur une mesure de sécurité. C'est pourquoi elle a choisi d'utiliser une bannière de notification, de la placer sur la page principale et de l'agrandir.

Ils ont vraiment compris la mission.

3- Nike reste simple mais dynamique

La conception minimaliste du site web de Nike est exactement ce dont tout site web de vente au détail a besoin. 

La barre de notification est également assortie au thème.

Nike utilise une barre de notification coulissante avec différentes annonces que les visiteurs du site Web doivent garder à l'esprit, comme les options de livraison gratuite, les remises et les coupons de réduction.

C'est une façon subtile et non distrayante d'annoncer les petits détails qui peuvent faciliter la journée d'un acheteur, et ils savent que les visiteurs pourront le voir puisque la barre est la seule chose dynamique sur le site web.

Un travail bien fait.

4- Bershka redéfinit la barre de notification

Comme dans le cas de Nike, nous sommes tous habitués à ce que les sites de vente au détail indiquent leurs conditions de livraison dans une barre de notification.

Nous venons également de voir des barres de notification coulissantes.

Mais ce que fait le site web de Bershka, c'est qu'il place la barre plus bas et maintient le même message encore et encore. Cela vous rappelle quelque chose ?

Un téléscripteur de nouvelles. Absolument génial.

5- ClickUp redirige vers le blog

ClickUp a de bonnes nouvelles.

Ils ont levé 400 millions de dollars dans le cadre de leur série C et collaborent désormais avec d'autres entreprises. Ils ont écrit un billet de blog à ce sujet. Ils veulent partager la nouvelle avec tout le monde. Mais ils sont conscients que certains pourraient s'en désintéresser.

Ils sont accompagnés d'une barre d'annonce.

C'est aussi simple que cela. En fin de compte, il s'agit d'une nouvelle passionnante et de chiffres importants. Mais les utilisateurs existants ne changeront pas soudainement juste parce qu'ils ont entendu la nouvelle. Un modal ou un slideout, c'est trop.

Bravo à ClickUp pour son succès et sa clairvoyance.

6- Slack annonce les nouvelles fonctionnalités par le biais d'une barre de notification

Il n'y a pas si longtemps, Slack a lancé de nouvelles fonctionnalités plutôt sympas, comme Huddle par exemple.

Pour présenter ses fonctionnalités, Slack propose sur sa page d'accueil une barre de notification bleue qui renvoie les visiteurs du site à un article de blog expliquant les fonctionnalités.

Bien que cela ne semble pas être une façon très stable de présenter des fonctionnalités à un client potentiel, ce que Slack fait, c'est amener les clients à un endroit où ils peuvent vraiment comprendre ce que ces fonctionnalités sont capables de faire en lisant.

N'oublions pas non plus le pouvoir des mots d'appel à l'action. Si quelqu'un dit « Allons-y », je le suis tout simplement. Vous savez donc que Slack sait ce qu'il fait 😎

7- La notification in-app d'Intercom pour les améliorations apparaît

La barre de notifications d'Intercom ressemble beaucoup à celle de Slack à première vue, mais laissez-moi vous prouver le contraire.

Tout d'abord, la barre de notification d'Intercom est une barre in-app qui utilise une couleur très inhabituelle compte tenu de la conception de leur outil.

Cela s'explique par le fait qu'ils ciblent directement leurs utilisateurs existants pour leur présenter leurs dernières améliorations et qu'ils font de leur mieux pour s'assurer que la bannière est remarquée. Les emoji et le style du texte y contribuent également.

Le CTA est également très engageant, et le lien renvoie les utilisateurs à une page de mise à jour contenant peu de détails, de sorte que les utilisateurs ne perdent pas beaucoup de temps.

8- La barre de notification amusante de Koan attire l'attention des visiteurs

De la même manière que ClickUp partageait les grandes nouvelles avec les visiteurs de son site web, Koan annonce également les grandes nouvelles par le biais d'une barre de notification sympathique.

Bien que la barre corresponde parfaitement à la palette de couleurs de la conception du site web, il est assez facile d'apercevoir ce qu'elle dit en raison de sa forme amusante. Là encore, il ne s'agit peut-être pas d'une nouvelle très intéressante pour tous les visiteurs du site.

L'utilisation d'une barre de notification a donc été la bonne décision pour Koan également.

9- Zapier annonce les soldes de fin d'année avec une barre de notification

La toute petite bannière de Zapier annonçant les soldes de fin d'année n'a peut-être pas l'air de grand-chose, mais lorsqu'il s'agit d'une annonce de soldes, vous savez que tout le monde la verra.

Il est également important de garder à l'esprit que Zapier utilise très probablement d'autres méthodes pour annoncer sa vente, mais c'est tout de même une excellente idée de l'annoncer avec une barre de notification, car sinon, avec un modal ou une infobulle, cela pourrait donner l'impression d'être vendeur.

10- Podcast.co profite de l'occasion pour dire quelque chose de gentil

Maintenant, écoutez bien.

Nous aimons tous voir une bonne bannière de vente ou une barre d'annonce de nouvelle fonctionnalité. Mais ce que nous voulons toujours voir, c'est...

Quelque chose de bien.

Podcast.co saisit l'occasion d'utiliser une barre de notification non pas pour vendre quelque chose ou inciter les utilisateurs à vérifier quelque chose. Il salue ses utilisateurs et leur souhaite une bonne année. C'est quelque chose que l'on ne trouve pas partout.

A vous Podcast.co 🥂

Comment créer une bannière de notification de site web en 3 étapes

Nous avons vu ce qu'est une bannière de notification, sa signification et sa pratique. Il est maintenant temps de la mettre en pratique.

« Attendez une seconde, dois-je coder ? »

La réponse est : absolument pas.

La solution d'onboarding sans code d'UserGuiding est tout ce dont vous avez besoin et, en fait, c'est l'une des solutions les plus faciles à mettre en œuvre. (Vous voulez l'essayer gratuitement ?)

Laissez-moi vous guider en 3 étapes.

1- Créer un guide sur UserGuiding

Commencez par vous rendre dans le tableau de bord de gestion UserGuiding et cliquez sur Guides.

Après avoir été dirigé vers la page des guides, cliquez sur le bouton « New Guide ».

Dans le menu qui apparaît une fois que vous avez cliqué sur le bouton, donnez un nom à votre guide, saisissez l'URL sur laquelle vous souhaitez utiliser la bannière d'annonce et, enfin, définissez un thème si vous en souhaitez un spécifique.

Cliquez ensuite sur « Start ».

2- Choisir un modal et le personnaliser

Une fois que vous avez terminé les réglages sur le tableau de bord, vous serez dirigé vers l'URL sur laquelle vous souhaitez utiliser la bannière d'annonce.

Vous y trouverez les modèles de modales que vous pouvez utiliser dans la barre latérale d'UserGuiding.

Parmi les modales que nous pouvons utiliser pour notre barre de notification, il y a une bannière de campagne, une bannière de vente incitative, une bannière d'inscription à un webinaire et une bannière d'annonce.

Après avoir choisi un modal de barre de notification, il est temps de le personnaliser.

Vous pouvez choisir l'emplacement de la bannière, l'existence d'une ombre en arrière-plan, le moment où la bannière apparaîtra, etc.

Après avoir enregistré votre progression, vous pouvez facilement prévisualiser votre bannière.

3- Sauvegarder et partir

Une fois que nous avons terminé la conception et les paramètres de la barre de notification, nous pouvons retourner au tableau de bord de gestion d'UserGuiding pour enregistrer et activer notre bannière.

Allez sur votre guide dans la liste des guides que vous avez créés où vous verrez un bouton indiquant que la bannière n'est pas encore active.

Pour mettre en place la bannière, nous allons aller dans « Settings ».

En cliquant simplement sur le bouton « Active », nous pouvons activer la bannière. Pour plus de paramètres et de personnalisation, utilisez les options ci-dessous.

Une fois que vous avez cliqué sur le bouton « Save », vos paramètres sont définis.

Pour placer la bannière sur votre site web, il vous suffit de cliquer sur le bouton « Publish changes ».

Et c'est parti !

👉 Commencez votre essai gratuit MAINTENANT 👈

Conclusion

Une barre de notification est un outil pratique pour de nombreuses occasions.

Après avoir vu des exemples et un guide simple sur la façon de les créer, vous pourrez maintenant créer vos propres barres de notification.

Informez vos visiteurs !