Les barres, boutons et popin sont configurables tant sur les règles de déclenchement (le visiteur se trouve sur une page spécifique, passe la souris sur un élément, est inactif, est un nouvel utilisateur…) que sur leur design et leur emplacement. Tous ces éléments sont à prendre en compte afin d’optimiser l’expérience utilisateur, maximiser l’engagement sur vos popin, barres et boutons et générer une maximum de réponse.
Quelles bonne pratiques suivre lors de la personnalisation de ces éléments?
- Différenciation et cohérence: il est important d’observer une continuité entre le design de votre page et celui de votre popin, barre ou bouton. L’élément doit attirer l’attention sans être agressif: vous pouvez par exemple utiliser les couleurs principales et secondaires de votre charte graphique.
- Taille et emplacement: afin d’optimiser le nombre de réponses collectées, et de maximiser les interactions sur vos boutons, barres et popin nous vous recommandons d’adapter leur taille et leur emplacement. Par exemple, privilégiez un affichage en marge pour des sollicitations en rapport avec les pages vues pendant navigation (cf cas pratique ci-dessous); et un affichage plein écran pour un questionnaire diffusé en fin de parcours.
Comment faire?
Grâce à des paramètres CSS avancés! Une fois que vous avez paramétré votre diffusion sur site web et sélectionné le type de conteneur (popin, barre latérale, bouton…), cliquez sur l’onglet “Paramètres avancés”:
Puis renseignez le code CSS pour les champs que vous souhaitez personnaliser. Le bouton “Aperçu” vous permet de prévisualiser votre design avant de valider.
Cas pratique:
Prenons l’exemple d’une enseigne de vente d’articles de sports d’hiver qui souhaite connaître les activités les plus pratiquées par ses visiteurs. Pour ce faire, l’entreprise va poser une question sous forme de popin aux visiteurs qui ont vu plus de trois pages produit et qui utilisent un ordinateur.
Voici ce que donne l’aperçu par défaut:
Nous voulons faire apparaître l’élément en taille réduite dans le coin inférieur droit pour solliciter le visiteur tout en lui permettant de poursuivre sa navigation. Dans ce cas de figure, nous prenons le parti d’enlever le logo qui sera déjà visible sur le site afin de ne pas surcharger la popin. Nous avons donc configuré les paramètres CCS comme suit:
Voici le résultat:
A vous de jouer!