Découvrez comment créer vos propres icônes en addition des standards "nombres, smileys, étoiles" et appliquer des palettes de couleurs pour personnaliser l'apparence de vos questions de type échelle de notation, NPS et CSat.
Utiliser vos propres galeries d'icônes et vos palettes de couleurs personnalisées vous permet de :
- Plonger vos répondants au coeur de votre univers de marque, avec des questionnaires "taillés" à votre image
- Augmenter le taux de réponse, en attirant l'attention de vos participants pour leur envie de répondre à votre questionnaire
- Obtenir un meilleur taux de questionnaire terminé, avec un engagement plus fort de vos répondants à terminer entièrement leurs réponses
Dans cet article, vous trouverez le détail des procédures pour :
- Importer des icônes personnalisés, pour une échelle de notation, NPS ou CSat
- Créer une palette de couleurs, pour des icônes standards ou personnalisés
- Personnaliser les couleurs de vos galeries d'icônes et activez-les dans un modèle de design
____________________________________________________________
1. Importer des icônes personnalisés, pour une échelle de notation, NPS ou CSat
Rendez-vous dans le menu Paramètres, puis dans le menu Design.
Ouvrez le sous-menu Galerie d'icônes.
Puis cliquez sur Ajouter une nouvelle galerie d'icônes.
1 : donnez un nom à votre galerie d'icônes
2 : sélectionner le nombre d'icônes que comportera votre galerie
3 : chargez vos fichiers d'icônes, soit de façon globale en sélectionnant plusieurs fichiers simultanément, soit un par un, dans l'ordre souhaité d'apparition
Liste des spécifications pour qu'un icône soit conforme :
Dimension : au format carré, sans restriction de taille (l'outil Skeepers adaptera les proportions automatiquement).
Fichier : au format .SVG, non colorisé, comportant un tag viewBow
Poids : pour permettre un affichage parfaitement fluide (sans temps de chargement des icônes) choisissez l'option 'optimisé pour le web" sur votre outil d'édition de fichiers .SVG.
Des marges doivent être incluses au sein de vos icônes pour un affichage optimal de vos échelles de notation. Libre à vous de définir la largeur de vos marges, selon l'affichage que vous souhaitez voir apparaître.
Une fois vos icônes importés, vous pouvez cliquer sur Enregistrer pour sauvegarder vos icônes personnalisés.
Dans le menu, apparaît votre galerie d'icônes personnalisés.
Vous pouvez, dupliquer, éditer et supprimer chacune de vos galeries.
Nous allons maintenant voir comment créer une palette de couleurs personnalisées, puis comment l'appliquer à votre galerie d'icônes.
____________________________________________________________
2. Créer une palette de couleurs, pour des icônes standards ou personnalisés
Un palette de couleurs vous permet d'appliquer vos propres couleurs à vos éléments de type échelle de notation, qu'il s'agisse d'icônes fournis par Skeepers ou de vos propres icônes.
Toujours dans le menu Design (au sein de vos paramètres), ouvrez cette fois-ci le sous-menu Palette de couleurs.
Cliquez sur Ajouter une palette.
Vous pouvez ici configurer votre nouvelle palette de couleurs.
1 : donnez un nom à votre palette
2 : choisissez le type de question pour lequel la palette sera adaptée : NPS, CSat, ou Echelle de notation
Pour personnaliser votre galerie d'icônes (précédemment configurée pour une échelle de notation), sélectionnez Echelle de notation.
3 : dans le cas d'une échelle de notation, vous devez définir un nombre d'icônes (pour le NPS et le CSat, le nombre d'icônes est déjà prédéfini).
4 : choisissez le type d'affichage : nombres, smileys, étoiles ou à personnaliser.
Sélectionnez Personnaliser, pour choisir vos icônes personnalisés.
Note : le principe est exactement le même si vous souhaitez personnaliser une galerie d'icônes standards fournie par Skeepers (nombres, étoiles, smileys).
Puis, sélectionnez une galerie d'icônes.
Ici nous utilisons la "Galerie Météo" précédemment créée.
Vous pouvez personnaliser votre palette, soit avec des couleurs définies globalement (par défaut), soit avec des couleurs personnalisées pour chaque icône.
Couleurs par défaut
C'est l'option de personnalisation rapide et efficace.
Choisissez une couleur d'arrière plan (couleur de vos icônes), puis une couleur de survol (la couleur qui s'affiche lorsque vous passer le curseur de votre souris sur un icône).
Vous pouvez appliquer un dégradé à vos icônes, en cliquant sur le bouton dédié et en sélectionnant une couleur de fin.
Note : avec les réglages ci-dessous votre échelle de notation comportera des icônes dont le premier icône sera de couleur #4424AF, puis progressivement un fondu sera appliqué jusqu'au dernier icône avec la couleur #795cdd.
Couleurs personnalisées
C'est l'option dédiée aux férus de la personnalisation ! La couleur de chaque icône et le survol sont personnalisables !
Pour chaque icône, choisissez une couleur d'arrière plan (couleur de votre icône), puis une couleur de survol (la couleur qui s'affiche lorsque vous passer le curseur de votre souris sur un icône).
Vous pouvez entrer les codes hexadécimaux des couleurs de votre charte graphique, ou sélectionner vos couleurs avec le nuancier.
L'aperçu vous permet de visualiser vos modifications en temps réel.
Une fois vos réglages terminés, cliquez sur Enregistrer pour sauvegarder votre palette.
Votre palette apparaît dans le menu dédié.
Vous pouvez créer autant de palettes que désirées, pour personnaliser sur mesure chacune de vos échelles de notation.
____________________________________________________________
3. Personnaliser les couleurs de vos galeries d'icônes et activez-les dans un modèle de design
Vous allez maintenant apprendre à :
- Définir vos icônes personnalisés au sein d'un élément échelle de notation, NPS, ou CSat, dans votre questionnaire.
- Appliquer une palette de couleurs personnalisées à vos icônes, depuis le menu Design de votre compte Skeepers.
A / Charger une galerie d'icônes personnalisés
Pour utiliser vos icônes personnalisés, ouvrez la campagne à modifier.
Par défaut votre échelle de notation affiche dans l'aperçu un des formats standards (étoiles, smileys ou nombre).
Pour modifier le type d'icônes, cliquez sur votre élément Echelle de notation pour l'éditer.
Puis dans la rubrique affichage, sélectionnez Personnaliser, pour utiliser vos propres icônes.
Puis choisissez la Galerie précédemment créée.
Enregistrez.
Dans l'aperçu, les étoiles de notation standards ont été remplacées par vos icônes personnalisés. Il ne reste qu'à appliquer une palette de couleurs.
B / Appliquer une palette de couleurs personnalisées à vos icônes
Pour utiliser une palette de couleurs personnalisée, nous allons éditer votre modèle de design.
👉 En savoir plus à propos de la création de modèle de design
Rendez-vous dans le menu Paramètres Design Modèles de design.
Puis cliquez sur Editer.
Le module de personnalisation s'ouvre.
Cliquez sur le menu Palette de couleurs pour l'ouvrir.
Puis ajoutez votre palette de couleur et validez.
Rappel : la palette créée précédemment, sera appliqué pour :
- Vos éléments : échelles de notation
- Qui comportent : 5 icônes
- Avec un affichage : icônes personnalisés
- Avec pour galerie d'icônes : Galerie Météo
N'oubliez donc pas de créer autant de palettes que de variantes nécessaires d'échelles de notation, question NPS ou CSat, puis de charger chaque palette pour l'appliquer dans l'édition de votre modèle de design.
Vous avez terminé !
Nous retournons dans l'édition de notre campagne, pour vérifier que la palette de couleurs a bien été appliquée à notre galerie d'icônes personnalisés.
La personnalisation est bien effective.
Il ne vous reste qu'a créer autant de galeries d'icônes et de palettes de couleurs que de nombre de questions que vous souhaitez personnaliser.