Un design fidèle à vos standards graphiques, allié à une accessibilité optimisée, est indispensable pour améliorer l'attractivité de vos questionnaires.
Concevoir un modèle de design pour un questionnaire nécessite toujours de choisir au préalable un thème parmi ceux proposés par Skeepers, sur lequel va s'appuyer votre modèle de design. Ces thèmes, avec leurs particularités propres, structurent votre design.
Découvrez dans cet article les spécificités respectives de chaque thème pour sélectionner celui qui convient le mieux à chacun de vos besoins sur la plateforme.
Lexique
Un thème est un élément indispensable à la création d’un modèle de design. Chaque thème regroupe les spécificités graphiques qui structurent l'apparence globale du questionnaire. Skeepers propose 6 thèmes classiques (Simple, Sagena, Egynn, November, Horizon et Avis Vérifiés) ainsi qu'un thème conversationnel (Talky).
Un modèle de design est un template permettant de personnaliser l'apparence de votre questionnaire. Basé sur un thème prédéfini par Skeepers et ajusté à vos standards graphiques, il est possible de définir un modèle par défaut qui s'applique automatiquement à toutes les nouvelles diffusions, tout en ayant la possibilité de créer plusieurs modèles secondaires pour des diffusions classiques et conversationnelles.
Une icône est un visuel utilisé pour l'affichage d'une échelle de notation personnalisée. Les icônes importées sur la plateforme doivent être au format SVG, avoir une extension .svg, inclure un tag viewBox et ne pas être colorisées. Une fois importées, elles sont regroupées dans la galerie d'icônes accessible par les paramètres du compte.
Une palette de couleurs permet d'appliquer des couleurs personnalisées à des éléments de questionnaire de type "échelle de notation", "NPS" et "CSAT", qu'ils soient représentés par des nombres, des étoiles, des smileys ou des icônes personnalisés.
Un favicon est une petite icône graphique affichée dans l'onglet du navigateur, servant à identifier visuellement votre questionnaire ou site web. Il contribue à l'identité de marque et renforce la reconnaissance auprès des utilisateurs.
Une balise HTML est un élément structurant le contenu du questionnaire. Elle organise les informations en sections logiques et délimitées sur lesquelles les styles CSS pourront être appliqués. En sachant la manipuler, il est ainsi possible de construire une barre de progression optimisée. Son utilisation nécessite des compétences techniques.
Une balise CSS est un élément qui définit le style et l'apparence des éléments HTML dans un questionnaire. Elle permet d'aller plus loin dans la personnalisation des aspects visuels tels que les couleurs, les polices, les espacements et les dimensions. Son utilisation nécessite des compétences techniques.
Un code de suivi est un identifiant unique ou un ensemble de balises intégré dans un élément du questionnaire, permettant de suivre les interactions, de collecter des données et d'analyser le comportement des répondants. Il est également possible d'appliquer de la personnalisation CSS à un code de suivi pour customiser un élément spécifique du questionnaire. Son utilisation nécessite des compétences techniques.
Présentation
Pour commencer à concevoir votre modèle de design, vous devez impérativement sélectionner l'un des thèmes proposés par Skeepers.
Ayant chacun leurs particularités, ils définissent la structure générale de votre design, que vous pourrez ensuite personnaliser selon vos besoins.
Thèmes pour diffusions classiques
Il existe 6 thèmes de design classique Skeepers, voici leurs spécificités respectives.
| Thème | Simple | Sagena | Egynn | November | Horizon | Avis Vérifiés |
|---|---|---|---|---|---|---|
| Aspect | ||||||
| Accessibilité | Accessible à tous | Accessible à tous | Accessible à tous | Accessible à tous | Accessible à tous | Accessible seulement si vous utilisez Avis Vérifiés |
| Barre de progression |
✓ Optionnel |
✓ Optionnel |
✓ Optionnel |
✓ Optionnel |
✓ Optionnel |
✓ Optionnel |
| Logo |
Logo personnalisable avec fichier image |
Logo personnalisable avec fichier image |
Logo personnalisable avec fichier image |
Logo personnalisable avec fichier image | Logo personnalisable avec fichier image | Logo personnalisable avec fichier image |
| Couleur de fond du logo |
Couleur de fond du logo personnalisable |
Couleur de fond du logo personnalisable |
Personnalisation non disponible |
Personnalisation non disponible | Personnalisation non disponible | Personnalisation non disponible |
| Arrière-plan du questionnaire |
Couleur de fond du questionnaire personnalisable |
Couleur de fond du questionnaire personnalisable |
Fond du questionnaire avec visuel personnalisable Floutage obligatoire |
Fond du questionnaire avec visuel personnalisable Pas de floutage disponible |
Fond du questionnaire avec visuel personnalisable Floutage optionnel |
Fond du questionnaire avec visuel personnalisable Floutage obligatoire |
| Couleur du titre du questionnaire |
Couleurs de fond et du titre de questionnaire personnalisables |
Couleurs de fond et du titre de questionnaire personnalisables |
Couleurs de fond et du titre de questionnaire personnalisables |
Couleurs de fond et du titre de questionnaire personnalisables |
Couleurs du titre de questionnaire personnalisables |
Couleurs de fond et du titre de questionnaire personnalisables |
| Mise en gras des questions |
Personnalisation non disponible |
Mise en gras des questions optionnelle |
Mise en gras des questions optionnelle |
Mise en gras des questions optionnelle | Mise en gras des questions optionnelle | Mise en gras des questions optionnelle |
| Couleur des questions |
Couleurs de fond et du texte des questions personnalisables |
Couleurs de fond et du texte des questions personnalisables |
Couleurs de fond et du texte des questions personnalisables |
Couleurs de fond et du texte des questions personnalisables | Couleurs de fond et du texte des questions personnalisables | Couleurs de fond et du texte des questions personnalisables |
| Couleur des réponses |
Personnalisation non disponible |
Couleurs de fond et du texte des réponses personnalisables |
Couleurs de fond et du texte des réponses personnalisables |
Couleurs de fond et du texte des réponses personnalisables | Couleurs de fond et du texte des réponses personnalisables | Couleurs de fond et du texte des réponses personnalisables |
| Couleur des boutons |
Couleurs de fond et du texte des boutons personnalisables |
Couleurs de fond et du texte des boutons personnalisables |
Couleurs de fond et du texte des boutons personnalisables |
Couleurs de fond et du texte des boutons personnalisables | Couleurs de fond et du texte des boutons personnalisables | Couleurs de fond et du texte des boutons personnalisables |
| Couleur de sélection des modalités de réponse |
Personnalisation non disponible |
Personnalisation non disponible |
Personnalisation non disponible |
Personnalisation non disponible | Couleur de sélection personnalisable | Personnalisation non disponible |
| Couleur de survol des boutons |
Personnalisation non disponible |
Personnalisation non disponible |
Personnalisation non disponible |
Couleur du texte au survol des boutons personnalisable | Couleur du texte au survol des boutons personnalisable | Couleur du texte au survol des boutons personnalisable |
| Couleur de la bordure des listes d'image |
Couleur de bordure des listes d'image personnalisable |
Couleur de bordure des listes d'image personnalisable |
Couleur de bordure des listes d'image personnalisable |
Couleur de bordure des listes d'image personnalisable | Couleur de bordure des listes d'image personnalisable | Couleur de bordure des listes d'image personnalisable |
| Position du label des champs du formulaire |
Personnalisation non disponible |
Personnalisation non disponible |
Personnalisation du placement du texte des questions de type "champ" (au-dessus ou directement à l'intérieur du champ) |
Personnalisation du placement du texte des questions de type "champ" (au-dessus ou directement à l'intérieur du champ) | Personnalisation du placement du texte des questions de type "champ" (au-dessus ou directement à l'intérieur du champ) | Personnalisation du placement du texte des questions de type "champ" (au-dessus ou directement à l'intérieur du champ) |
| Couleur du pied de page |
Couleurs de fond et du texte du pied de page personnalisables |
Couleurs de fond et du texte du pied de page personnalisables |
Couleurs de fond et du texte du pied de page personnalisables |
Couleurs de fond et du texte du pied de page personnalisables | Couleurs de fond et du texte du pied de page personnalisables | Couleurs de fond et du texte du pied de page personnalisables |
| Police personnalisable |
Personnalisation non disponible |
Personnalisation non disponible |
Personnalisation non disponible |
Police personnalisable (dont celle de la page où est intégrée le questionnaire en diffusion web) | Police personnalisable (dont celle de la page où est intégrée le questionnaire en diffusion web) | Police personnalisable (dont celle de la page où est intégrée le questionnaire en diffusion web) |
| Spécificités dans le défilement des questions |
Les questions d'une même page sont affichées groupées par défaut |
Les questions d'une même page sont affichées groupées par défaut |
Les questions d'une même page ne sont pas groupées par défaut, il faut faire défiler les questions avec le bouton ">" non personnalisable Les sous-questions n'apparaissent pas sur la même page mais sur des pages différenciées |
Les questions d'une même page ne sont pas groupées par défaut, il faut faire défiler les questions avec le bouton "---> Suivant" non personnalisable Les sous-questions apparaissent directement sous leurs questions "parentes" |
Les questions d'une même page ne sont pas groupées par défaut, il faut faire défiler les questions avec le bouton "Suivant >" non personnalisable |
Les questions d'une même page ne sont pas groupées par défaut, il faut faire défiler les questions avec le bouton "Suivant >" non personnalisable |
| Notes | Le bouton de soumission par défaut n'est pas affiché |
Il est possible d'ajouter une description au visuel utilisé pour le logo Le bouton de soumission par défaut n'est pas affiché |
Il est possible d'ajouter une description au visuel utilisé pour le logo Le bouton de soumission par défaut n'est pas affiché Les réponses sont réparties sur deux colonnes |
Il est possible d'ajouter une description au visuel utilisé pour le logo Le bouton de soumission par défaut n'est pas affiché |
Thème pour diffusions conversationnelles
Il existe aussi un thème de design conversationnel Skeepers, voici ses spécificités.
| Thème | Talky |
|---|---|
| Aspect | |
| Accessibilité | Accessible à tous |
| Conformité d'accessibilité | Pas de conformité d'accessibilité |
| Logo | Logo personnalisable avec fichier image |
| Image d'arrière-plan | Visuel d'arrière-plan du questionnaire personnalisable |
| Image de fond du chat | Visuel de fond du chat personnalisable |
| Couleur d'arrière-plan | Couleurs d'arrière-plan personnalisable si aucune image sélectionnée |
| Couleur de fond du chat | Couleurs de fond du chat personnalisable si aucune image sélectionnée |
| Couleur du titre du questionnaire | Couleurs de fond et du titre de questionnaire personnalisables |
| Mise en gras des questions | Mise en gras des questions optionnelle |
| Couleur des questions |
Couleurs de fond et du texte des questions personnalisables |
| Couleur des réponses |
Couleurs de fond et du texte des réponses personnalisables |
| Couleur des boutons |
Couleurs de fond et du texte des boutons personnalisables |
| Couleur d'arrière-plan | Couleurs de fond et du texte des boutons personnalisables |
| Couleur de fond du chat | Couleurs de fond et du texte des boutons personnalisables |
| Police personnalisable | Police personnalisable (dont celle de la page où est intégrée le questionnaire en diffusion web) |
Personnaliser le design d'un questionnaire
Bien que les thèmes imposent une structure d'affichage non modifiable pour le questionnaire, vous pouvez personnaliser le design en configurant les modèles de campagne, conçus à partir de la structure du thème sélectionné. Nous expliquons toutes les étapes et possibilités dans l'article Personnaliser l'apparence des questionnaires avec les modèles de design.
Si vous souhaitez approfondir la personnalisation de votre modèle de design avec des éléments qui ne sont pas proposés par Skeepers, vous pouvez enrichir votre design avec des balises HTML et CSS.
Accessibilité du design
À ce jour, seul le thème November est pleinement conforme à la norme RGAA. Les autres thèmes intègrent des améliorations en matière d’accessibilité, mais ne répondent pas encore à l’ensemble des critères RGAA.
Pour renforcer l'accessibilité, il est toujours possible d'utiliser du CSS personnalisé. Cependant, certaines limitations techniques peuvent restreindre une conformité totale à la norme RGAA. Cette mise à jour vise à garantir une conformité partielle, sans atteindre un niveau de conformité absolu à 100 %.
Si vous utilisez des balises CSS pour personnaliser les modèles de design de vos questionnaires, nous vous recommandons de vérifier leur affichage. En effet, la mise à jour des thèmes de Skeepers pour se conformer aux normes d’accessibilité peut éventuellement entrer en conflit avec certaines règles CSS que vous avez définies.
Qu'est-ce que la norme RGAA ?
La norme RGAA (Référentiel Général d’Amélioration de l’Accessibilité) est un cadre réglementaire français visant à garantir que les outils numériques, comme les sites web, applications ou questionnaires en ligne, soient accessibles à tous, y compris aux personnes en situation de handicap. Inspirée des standards internationaux WCAG (Web Content Accessibility Guidelines), la norme RGAA établit des critères précis pour améliorer l’expérience des utilisateurs ayant des besoins spécifiques.
Dans le cadre d’un questionnaire en ligne, cela signifie :
- Des contrastes optimisés : Les couleurs et les contrastes sont ajustés pour garantir une lisibilité maximale, notamment pour les personnes malvoyantes.
- Une navigation accessible au clavier : Les utilisateurs ne pouvant pas utiliser de souris peuvent répondre intégralement au questionnaire avec un clavier ou un dispositif alternatif.
- Des alternatives textuelles pour les médias : Les images, graphiques ou vidéos intégrés aux questionnaires incluent des descriptions textuelles compréhensibles par les lecteurs d’écran.
- Une structure claire : Les titres, questions et champs sont hiérarchisés correctement, ce qui facilite leur compréhension et leur navigation pour tous les utilisateurs, y compris ceux utilisant des technologies d’assistance.
La mise en conformité avec la norme RGAA dans vos questionnaires contribue à :
- Améliorer l’inclusivité en permettant à un plus large public de répondre, indépendamment de leurs limitations physiques ou cognitives.
- Renforcer la confiance de vos répondants, en leur offrant une expérience utilisateur fluide et adaptée.
- Respecter les exigences légales, particulièrement si vous êtes soumis à des obligations réglementaires concernant l’accessibilité numérique.
Cette mise à jour garantit que les modèles de design de questionnaires sont conformes aux bonnes pratiques d’accessibilité, sans compromis sur leur esthétique ou leur efficacité. Elle permet également de répondre aux attentes des répondants tout en renforçant l’impact de vos campagnes.
| Évènement | Comportement | Illustration |
|---|---|---|
| Lors du survol du placeholder d'une question | Affichage d'un encadré noir autour du placeholder | |
| Lors du clic sur le placeholder d'une question | Affichage d'un halo bleu autour du placeholder | |
|
Pour le thème Simple, lors de la saisie dans le placeholder d'une question |
La couleur du texte passe de gris à noir | |
| Lors de la saisie dans le placeholder d'une question avec le format correct | Affichage d'un halo vert autour du placeholder | |
| Lors de la saisie dans le placeholder d'une question avec un format incorrect | Affichage d'un halo rouge autour du placeholder et le titre de la question passe du noir au rouge | |
| Lors de l'affichage d'une matrice | ||
| Lors de l'affichage d'un ensemble de plusieurs questions | ||
| Lors du survol d'un élément de matrice | ||
| Lors du clic sur un élément de matrice | ||
| Lorsqu'un élément obligatoire d'une matrice à cases à cocher n'est pas sélectionné | Affichage d'une bordure rouge autour de l'élément de matrice et de la mention "The field is required" |
|
| Lorsqu'un élément obligatoire d'une matrice à échelle de notation n'est pas sélectionné |
Affichage de la mention "The field is required" |
|
Changements apportés au thème November depuis la mise en place de la norme RGAA
|
Thème avant la conformité RGAA (avant 2025) |
Thème depuis la conformité RGAA (après 2025) |
|
|---|---|---|
| Aspect | ||
| Barre de progression |
✓ Optionnel |
✓ Optionnel |
| Conformité d'accessibilité |
Pas de conformité Norme RGAA Conformité Norme ADA |
Conformité Norme RGAA Conformité Norme ADA |