Le webdesign et l‘illustration : le mariage parfait
l’illustration au service du message : le use case du parcours RGPD
Contexte
De la nécessité d’illustrer
Les nouvelles normes relatives à la mise en conformité RGPD (Règlement Général à la Protection des Données) nécessitent un gros travail de pédagogie qui sous tend un très grand volume de textes explicatifs, que ce soit dans les parcours d’inscription, de connexion ou dans l’espace personnel de l’utilisateur.
Nous avons pour mission d’accompagner l’utilisateur sur trois axes :
- l’informer sur les nouveaux outils mis à leur disposition
- l’accompagner dans le choix de ses consentements
- communiquer un message de réassurance positif
Compte tenu de la densité des informations à transmettre et dans un objectif de simplification des messages, nous avons fait le choix d’avoir recours à des illustrations, plus claires et plus engageantes.
Parti pris : Show , don’t tell !
Nous savons que les utilisateurs lisent peu et passent peu de temps sur une page web.
Prenons l’exemple de cet article, peu d’entre vous le liront dans son intégralité… Si je faisais le choix de ne pas mettre de visuels, je ne suis pas certaine de le lire en entier moi-même !
A travers le dessin, nous pouvons communiquer une idée de réassurance et de simplicité. En effet, les illustrations ne sont pas là pour “faire joli” mais sont bien un moyen de transmettre une émotion, un message…
Vous devez utiliser des illustrations quand :
- Vos utilisateurs sont frustrés ou ne savent pas quoi faire ensuite
- Une fonctionnalité est contournée, mal utilisée ou sous-utilisée
- Il y a trop de texte, le texte n’est pas lu ou pas compris
- Vous souhaitez une autre façon de communiquer directement à votre utilisateur
A ce propos, vous trouverez plus d’information dans cet article très complet :
Les contraintes
L’une des contraintes fondamentales auxquelles nous devons faire face est que l’exploitation des couleurs est réservée à l’identité des chaines du groupe.
D’un point de vue UI, pour mettre en forme notre message nous ne pouvons avoir recours qu’à une gamme restrictive de noirs et de blancs.
Le zoning
Nous avons fait le choix de séquencer le parcours pour permettre à l’utilisateur de mieux intégrer les différents messages et de lui faciliter l’interaction avec les formulaires déclaratifs.
L’architecture de la page présente une zone de texte explicatif sur deux ou trois lignes adossé à une zone de formulaire.
Méthode de travail
Réunir des références
Pour définir un contexte et affiner le besoin du client, les références sont indispensables. Elles permettent de comprendre au mieux le besoin du client.
Mon outil préféré pour trouver l’inspiration et échanger des idées est Pinterest.
Séduire à travers une métaphore
Dans notre cas, nous souhaitions informer, rassurer, apprendre et communiquer à nos utilisateurs un concept assez anxiogène : la gestion et l’utilisation de leurs données.
Nous voulons nous éloigner d’un ton austère, trop sérieux, trop “réel”, comme beaucoup d’illustrations qui ont pu naître à propos de ce sujet. On cherche à “séduire” l’utilisateur pour qu’il comprenne sans avoir recours à la lecture, qu’il soit guidé vers ce qu’il peut faire tout de suite. Séduire c’est convaincre par des voix irrationnelles, émotionnelles, sans avoir à dire.
“utiliser des métaphores pour livrer des idées compliquées d’une manière agréable et facile à comprendre”
Je vous conseille cet article pour aller plus loin sur ce sujet :
C’est dans cet objectif que nous nous sommes inspiré d’illustrations de magazines féminins, au traits fins et à la palette de couleurs vive. Adoucir l’aspect austère du formulaire par la rondeur, l’onirisme et la légèreté du trait, nous semblait suffisamment attractif pour rassurer l’utilisateur et lui donner à minima envie de continuer à s’inscrire, et au mieux accepter de partager ses données avec nous.
Des dessins préparatoires
Pour commencer le travail d’illustration, je préconise des dessins “moches”, rapides. ils permettent de réfléchir à l’idée, d’échanger, d’aller vite.
Le plus important est de trouver le ton, l’histoire et trouver un fil conducteur à la série d’illustrations. Ici nous mettons en scène l’utilisateur en action dans un environnement familier dans le but de lui montrer qu‘il garde toujours la main sur ses données.
tester des formes et des couleurs
Une fois le concept défini, l’ensemble des illustrations est créé dans Illustrator et Photopshop pour les textures et les ombres afin de définir le trait et la palette de couleur.
Pour trouver des palettes de couleur harmonieuses j’utilise Adobe Capture. Voici aussi deux sites qui proposent de beaux dégradés :
Tadam!
Après quelques heures de travail et d’échanges, voici le résultat :
La conception se fait l’environnement réel du zoning de l’UI afin de se rendre compte au plus près du rendu final.
Voici le lien vers “mon espace” de france.tv ou vous retrouverez les illustrations de vos consentements et de droit à l’oubli. Pensez à créer un compte ! 😋
Les 5 règles d’or de la conception d’illustrations pour un usage web et mobile
l’illustration est un vrai contenu, indispensable pour exprimer une idée complexe et accompagner l’utilisateur dans sa navigation, de plus les illustrations deviennent un nouveau moyen d’expression de la marque.
Voici les 5 règles d’or de conception d’illustration qui peuvent s’appliquer en général mais plus spécifiquement dans notre cas pour le webdesign :
- raconter une histoire, communiquer une idée complexe via une métaphore
- Illustrer une seule idée
- définir un style, trait, texture, composition facilement déclinable
- imaginer une composition “adaptative” qui s’adapte à en fonction de l’environnement d’affichage
- définir une palette de couleurs restreintes
Vers un déploiement plus ambitieux
Appréhendé dans un cadre restreint au départ, le recours à l’illustration ayant fait ses preuves, le concept va progressivement être déployé plus largement sur l’ensemble des services de France Télévisions :
- D’autres illustrations sur différents thèmes, comme la page 404 et tous les éléments transverses au services,
- des illustrations animées pour augmenter l’immersion de l’expérience.
- Pensez à clapper 50 fois 👏 cet article pour nous encourager à continuer.
- Pensez à vous abonner à :
