Présentation d'Appearance Studio
Contenus de cette page
Présentation d'Appearance Studio
Appearance Studio est un nouvel éditeur visuel permettant de concevoir l'apparence et la présentation de vos interceptions numériques. Il vous permet de créer des mises en page adaptatives, d'appliquer le style de votre organisation et de configurer les options d'accessibilité et de traduction sans avoir à écrire de code CSS personnalisé.
Astuce: pour l'instant, vous ne pouvez utiliser le nouvel Appearance Studio que pour les nouvelles créations et celles dont l'apparence a été supprimée. Une procédure de migration sera mise en place ultérieurement pour les créatifs existants. Sélectionnez « Supprimer l'apparence » pour supprimer les paramètres d'apparence d'un créatif existant. Veuillez noter que les apparitions supprimées ne peuvent pas être récupérées !
Accéder à Appearance Studio
Vous pouvez utiliser Appearance Studio pour personnaliser vos interceptions guidées.
Remarque: pour l'instant, Appearance Studio n'est pas disponible pour les créations d'applications mobiles.
Dans votre interception guidée, cliquez sur « Ouvrir l'éditeur d'apparence ».
Vous pouvez choisir l'une des mises en page préconfigurées comme point de départ, ou cliquer sur « Commencer à zéro » pour partir d'une mise en page vierge.
Vous pouvez ensuite parcourir les différentes sections d'Appearance Studio :
- Création: Créez et personnalisez les composants de votre application réactive.
- Animation: définissez une animation pour déterminer comment votre interception s'affiche à l'écran.
- Accessibilité: assurez-vous que votre interception soit accessible aux technologies d'assistance.
- Traductions: ajoutez des traductions et définissez la manière dont la langue du visiteur est déterminée.
Onglet « Build »
L'onglet « Build » vous permet de créer la mise en page de votre création créative et de personnaliser ses différents éléments. Pour obtenir des instructions détaillées, consultez la section « Création de mises en page d'apparence ».
Onglet « Animation »
L'onglet « Animation » vous permet de personnaliser la manière dont votre intercept s'affiche à l'écran et la durée pendant laquelle elle reste visible pour les visiteurs.
Activez l'animation « Include » pour animer votre interception.
Astuce: lorsque cette option est désactivée, l'intercept s'affiche simplement sur la page.
Définissez le délai (en secondes) avant l'affichage de l'intercept après le chargement de la page.
Si vous le souhaitez, activez l'option « Définir une limite » pour fermer la boîte de dialogue. Lorsque cette option est activée, indiquez le nombre de secondes après lesquelles la fenêtre d'interception se ferme automatiquement.
Choisissez le type de transition:
- Aucune: pas de transition. L'interception apparaîtra soudainement sur la page.
- Fondu: l'intercept devient progressivement opaque.
- Diapositive: l'intercept à l'origine apparaît à l'écran.
En fonction du type de transition sélectionné, vous disposerez d'options supplémentaires à configurer :
Fond en dégradé: choisissez le fond en dégradé (parmi « clair », « moyen » et « foncé »). Ce paramètre assombrit le site web situé derrière l'interception.
Diapositive: sélectionnez une direction de défilement (en partant du bas, du haut, de la gauche ou de la droite). Vous pouvez, si vous le souhaitez, choisir un arrière-plan en fondu lorsque vous utilisez une animation de diapositive.
Cliquez sur « Aperçu de l'animation » pour tester l'animation dans la fenêtre d'aperçu.
Une fois que vous avez terminé, cliquez sur « Enregistrer l'apparence ».
Accessibilité
Qualtrics vous fournit les outils nécessaires pour garantir que vos enquêtes « intercept » soient inclusives et respectent les normes d'accessibilité du Web. Les technologies d'assistance, telles que les lecteurs d'écran, s'appuient sur des balises de texte masquées pour décrire le contenu visuel aux utilisateurs. Les interceptions Qualtrics utilisent deux étiquettes différentes qui seront lues par les technologies d'assistance :
- Texte alternatif (texte « alt »): Le texte alternatif est une description concise et claire du contenu d'une image.
- Étiquettes ARIA: les étiquettes ARIA sont des attributs ajoutés à des éléments interactifs (tels que des boutons) afin de fournir des informations supplémentaires sur l'action effectuée par l'élément.
Vous pouvez consulter les éléments prenant en charge les étiquettes d'accessibilité dans l' onglet « Accessibilité » d'Appearance Studio.
À partir de là, vous pouvez personnaliser tous les éléments qui utilisent du texte alternatif. Cela comprend notamment :
- Icône de fermeture (« X »)
- Icône de réduction (lorsqu'elle est associée à un bouton de commentaire)
- Images
- Connexion intégrée
Astuce: les éléments qui utilisent des étiquettes ARIA, tels que les boutons standard et le bouton « Commentaires », ne peuvent pas être personnalisés séparément. Le texte affiché sur le bouton sert d’étiquette ARIA et ce comportement ne peut pas être modifié. Comme le libellé provient du texte du bouton, le libellé ARIA peut être traduit lors de la traduction créative. Ces éléments continueront d'apparaître dans l'onglet « Accessibilité » de , mais seront en lecture seule. Il est possible de les modifier en éditant directement l'élément (ou ses traductions).
Traductions
Si vous déployez des messages d'interception destinés à un public international, vous pouvez traduire l'intégralité du texte de ces messages directement dans la section « Traductions » d'Appearance Studio.
Dans l'onglet « Traduction » , cliquez sur « Ajouter une langue ».
Sélectionnez la langue de base, qui est automatiquement déterminée en fonction du texte que vous avez initialement saisi dans l'onglet « Build ». Les champs non traduits afficheront le texte dans la langue par défaut.
Astuce: Vous souhaitez modifier la langue par défaut, mais la langue de votre choix n'apparaît pas parmi les options ? Ajoutez la langue en tant que traduction, puis enregistrez vos modifications. Vous pourrez ensuite rouvrir ce menu et sélectionner cette langue comme langue par défaut.
Sélectionnez la ou les langues de traduction que vous souhaitez ajouter à votre interception.
Cliquez sur Confirmer.
Pour traduire manuellement une langue, cliquez dessus dans la liste des langues disponibles.
Vous serez redirigé vers un éditeur Build où vous pourrez traduire chaque élément de votre interception. Cliquez sur un élément pour le modifier directement, ou utilisez le panneau latéral pour parcourir chaque élément traduisible. Pour obtenir de l'aide sur la mise en forme du texte, consultez la section « Personnalisation des éléments de texte ».
Astuce: le contenu d'une enquête intégrée est traduit directement dans l'enquête elle-même, et non dans Appearance Studio.
Pour manager les traductions en masse, cliquez sur « Télécharger le fichier de traduction ».
Astuce: l'importation d'un fichier CSV écrasera toutes les traductions ajoutées précédemment, à l'exception des champs laissés entièrement vides dans le fichier.
Ouvrez le fichier dans un tableur (comme Microsoft Excel) et ajoutez les traductions dans les colonnes correspondant à chaque langue. Veillez à enregistrer votre fichier au format CSV.
Cliquez sur « Télécharger le fichier de traduction » et sélectionnez le fichier enregistré sur votre ordinateur.
Astuce: consultez la section « Problèmes liés au téléchargement de fichiers CSV et TSV » pour obtenir des conseils de dépannage.
Dans la section « Options avancées », choisissez la manière dont vous souhaitez que Qualtrics détecte la langue à afficher aux visiteurs du site :
- Langue du navigateur: utiliser la langue du navigateur du visiteur pour déterminer la langue à afficher.
- Variable JavaScript globale: si votre site enregistre la langue du visiteur dans une variable JavaScript, indiquez cette variable pour déterminer la langue à afficher. Les valeurs des variables doivent contenir le code de langue correspondant.
Vérifiez chaque traduction en cliquant dessus et en effectuant l'évaluation du texte dans l'éditeur.
Chaque traduction doit être activée en réglant l'option « Visible » sur « Oui ».
Cliquer sur « Enregistrer l'apparence ».
C'est génial! Merci pour votre avis!
Merci pour votre avis!