Les différentes notifications et nos conseils design

Les notifications apparaissent sur votre site ou votre application mobile pour engager vos visiteurs à engager la conversation avec vos répondants. Vous pouvez configurer la majorité d'entre elles grâce au notification builder d'iAdvize (plus de détails ici). Cet article vous présente chaque modèle disponible et son utilité, et vous dispense des conseils pour concevoir les notifications qui seront le mieux à même d'engager vos visiteurs

Les différents types de notifications 

La notification “classique”

En un mot : 

  • cette notification est la plus simple et la plus lisible, et donc la plus accessible
  • sa forme compacte et son apparence contrastée sont bien identifiables sur un site
  • elle laisse plus de place au contenu pour décrire l’expérience proposée aux visiteurs et souligner le bénéfice qu’elle peut leur apporter
  • c’est donc aussi celle qui a le meilleur taux de clic !

Usage : 

  • elle est à privilégier sur la version desktop d’un site
  • tout terrain, polyvalente, elle a sa place partout !
  • elle est toutefois très encombrante sur mobile 

La notification “messaging”

En un mot : 

  • cette notification reprend les codes des applications de messaging (WhatsApp, Messenger, etc) avec un avatar détaché du cadre.
  • son design est plus minimaliste, et son message plus simple et plus direct ne comprend pas de CTA (bouton Call To Action)

Usage : 

  • elle convient mieux à un site desktop
  • comme elle n’est pas aussi explicite que la notification “classique” sur l’expérience proposée, nous vous la conseillons en cas de public plus jeune et plus familier des codes, qui se doutera que ce bouton permet une conversation
  • étant plus épurée, elle convient mieux à des sites dont la maquette est simple, sur lesquelles elle pourra contraster

La notification “badge”

En un mot : 

  • cette notification prend la forme d’une simple icône (vous avez le choix entre 6 pictogrammes différents) sur un rond de couleur, ou d’un simple avatar
  • elle est donc beaucoup plus discrète que les notifications incluant du texte. 
  • pour cette raison, elle est aussi moins explicite

Usage : 

  • cette notification est avant tout pensée pour le mobile
  • elle peut éventuellement fonctionner sur un site à la maquette très épurée
  • dépourvue de message, elle correspond mieux à un public déjà familier du messaging

La notification “mini-badge” (en beta)

En un mot : 

  • cette notification est une version miniature de la notification badge, pensée pour être le moins intrusive possible dans la navigation des visiteurs, particulièrement sur mobile
  • pour se signaler malgré sa très petite taille, elle est animée : elle se déplie toutes les 10 secondes pour afficher un avatar et un bref message, pour une durée de 5 secondes, avant de se replier.

Usage : 

  • cette notification est donc avant tout pensée pour le mobile
  • elle peut à la rigueur fonctionner sur un site à la maquette très épurée, mais elle demeure très petite
  • nous vous conseillons de vous assurer qu’elle contraste suffisamment avec la maquette de votre site

L’invitation

En un mot : 

  • l’invitation n’est pas une notification à proprement parler, puisqu’elle s’affiche au-dessus de votre site et interrompt momentanément la navigation de vos visiteurs
  • c’est donc une solution d’engagement très visible, mais très intrusive
  • son affichage est limité à une seule fois pas session visiteur

Usage :

  • l’invitation correspond de moins en moins aux usages actuels du web, car les visiteurs apprécient peu de voir leur navigation entravée
  • elle peut néanmoins vous servir à engager les visiteurs les plus fragiles : abandon d’un devis, du tunnel d’engagement, etc.

Le bouton personnalisé

En un mot : 

  • comme son nom l’indique, le bouton personnalisé n’est pas une notification, mais un véritable bouton que vous pouvez intégrer “en dur” dans les pages de votre site web. Retrouvez nos recommandations au complet dans l’article qui lui est dédié.
  • vous pouvez donc lui donner l’apparence que vous souhaitez, en le codant vous-même, sans utiliser le notification builder d’iAdvize. 

Usage : 

  • le bouton personnalisé est très adapté si vous souhaitez proposer des conversations à vos visiteurs en toute discrétion, en complément des informations disponibles dans vos pages : faisant lui-même partie de la page, il ne perturbe en aucun cas la navigation
  • en revanche, pour la même raison, il est moins remarqué des visiteurs et son taux de clic peut être très faible. Nous vous recommandons donc de combiner son usage avec celui d’une véritable notification pour engager les visiteurs de deux façons différentes.
  • il est aussi très adapté sur mobile pour une parfaite adaptation à la maquette et à la navigation sur un petit écran

Le "conversation starter"

En un mot : 

  • Cette notification offre la possibilité à vos visiteurs d'engager une conversation avec des questions pré-enregistrées propres à vos produits, directement sous les interfaces de ces derniers. Elle est alors appelée "conversation starter" dans notre solution. Retrouvez comment l'intégrer dans l'article dédié (cet article est privé, vous devez être connecté pour y accéder).
  • Egalement, vous pouvez lui donner l'apparence que vous souhaitez via l'administration et définir le nombre de conversation starter.
  • Le conversation starter étant actuellement en bêta, adressez-vous à votre contact habituel pour l'activer.

Usage : 

  • Le conversation starter est très adapté pour répondre aux questions les plus posées par vos visiteurs pour vos produits. Il offre alors des compléments d'informations relatifs à ces derniers et ne perturbe en aucun cas la navigation. Au contraire il vient la personnaliser.

 

Nos conseils design

Anatomie d’une notification

Capture_d_e_cran_2022-10-19_a__12.07.10.png

1. en-tête

2. contenu texte

3. avatars

4. disponibilité

5. bouton CTA 

 

Son apparence

  • nous vous conseillons d’utiliser une typographie et une charte couleur similaires à celles de votre site : vos visiteurs doivent pouvoir comprendre que vous leur proposez un service et non une publicité pour une autre marque
  • assurez-vous néanmoins qu’elles restent visibles au sein de la page et se détachent suffisémment pour être vue des visiteurs ayant besoin d’aide

Votre choix d’avatar

  • iAdvize vous propose un choix par défaut d’avatars issus de photos libres de droit assez spontanées et qualitatives, mais les visiteurs peuvent les avoir déjà vues sur d’autres sites et douter de leur authenticité
  • l’idéal est donc d’utiliser une photo issue de votre univers de marque (par exemple, un vendeur ou une conseillère portant la tenue de votre magasin) qui caractérisera davantage vos conseillers et rassurera vos visiteurs
  • c’est encore mieux si vous pouvez choisir un avatar adapté à la catégorie de produit que consultent vos visiteurs (par exemple, une bricoleuse au rayon bricolage ou un jardinier au rayon jardin). 
  • vous pouvez aussi mettre en scène plusieurs avatars pour suggérer que plusieurs personnes différentes sont susceptibles de répondre à vos visiteurs
  • à l’inverse, si vous utilisez un bot, évitez absolument de lui donner un avatar humain pour que vos visiteurs ne soient pas déçus en découvrant sa véritable nature

Vos messages

  • l’en-tête de votre notification est votre “accroche” : vous pouvez utiliser une phrase dynamique et amicale pour attirer l’attention de vos visiteurs (ex : “besoin d’aide ?” “bonjour, on peut vous aider ?”)
  • dans le contenu, vous avez un peu plus de place pour préciser l’expérience proposée (ex : “nous vous aidons à finaliser votre commande”, “échangez avec un expert du rayon surf”, “nos vendeurs vous conseillent en vidéo depuis le magasin”), voire en souligner le bénéfice (ex : “nos conseillers vous conseillent en direct”, “les experts du rayon surf sont là pour vous”)
  • le bouton Call To Action (CTA) doit inclure un verbe d’action, soit très bref (ex : “dialoguer), soit le plus explicite possible si vous proposez une expérience inhabituelle (ex: “dialoguer en vidéo”)
  • les visiteurs apprécient de savoir ce qui les attend ! Aussi, nous vous recommandons la plus grande grande transparence possible sur l’expérience que vous leur proposez : les répondants sont-ils en direct, ce qui est très apprécié, ou y a-t-il un temps d’attente (ex : nos conseillers vous répondront en quelques minutes”) ? Est-ce un conseiller qui leur répondra directement, ou bien un bot susceptible de passer le relai à un humain ? Vos visiteurs devront-ils montrer leur visage, ou bien pourront-il couper la vidéo dans leur sens ? 
  • vous pouvez aussi profiter du notification builder pour contextualiser vos messagesselon vos campagnes et les besoins de vos visiteurs. Par exemple, un “que cherchez-vous ?” sur une page catégorie, et plutôt un “besoin d’aide”? sur les pages du tunnel d’achat où vos clients peuvent rencontrer des difficultés techniques. 

Cas particulier : sur mobile

Lorsque des visiteurs utilisent la version mobile de votre site, ils sont souvent plus pressés, et assurément sur un plus petit écran

  • vos notifications doivent donc se rendre présentes pour ceux qui apprécieraient de l’aide, mais en étant le moins intrusives possible dans la navigation de vos visiteurs.
  • pour cela, nous vous recommandons le badge, dont la petite taille convient bien à une navigation mobile
  • le mini-badge qui est la plus petite des notifications, est également adapté sur mobile. Flottant et animé, il sera tout de même bien visible de vos visiteurs, et bénéficiera d’un taux de clic plus élevé.
  • nous vous recommandons aussi le bouton personnalisé : celui-ci étant directement intégré dans les pages de votre site, il est très discret (au détriment du taux de clic) mais offre une expérience sans encombre à vos visiteurs.