Habiller les pages vides pour accompagner l'utilisateur à ses premières créations de contenu
Type
Cross apps behaviour
Devices
Mobile - Tablet - Desktop
Release
2018
Company
Open Digital Education
Roles
Product thinking
Sketching
Art direction
Interaction design
Framework specifications
Tools
Moqups
Adobe Illustrator
HTML5
SASS
Snap SVG
Le contexte
Les portails éducatifs ONE et NEO, dont une application mobile s'apprête à sortir
au moment où se dessine ce projet, font face au problème de pénurie de l’information que
l’on observe aux premières connexions des utilisateurs.
Il faut concevoir une meilleure expérience pour l’utilisateur dès son accueil,
lui fournir une meilleure compréhension des fonctionnalités mises à sa disposition.
Au delà de la problématique de création, que donner à voir à l’utilisateur
lorsque celui ci n’a pas accès à un contenu, ou l’a supprimé ?
On liste de nombreux cas et raisons différentes qui conduisent un utilisateur
à faire face à un écran vide. Identifier ces situations permet de saisir les
opportunités de garder l’attention de l’utilisateur, en l’incitant à créer du
contenu, ou bien, selon les cas d’usages, poursuivre sa navigation sur d’autres
applications du portail.
Le choix retenu est d'insérer des illustrations accompagnées d’un texte court et
légèrement humoristique. Cela renforce l’identité graphique du produit et lui confère un ton propre.
De nombreuses situations à prendre en compte
Dans grand nombre d’applications du portail, les interactions possibles diffèrent selon les profils.
Certains utilisateurs ne disposent que du droit de lecture alors que d’autres, des droits de
création ou d’édition.
Le texte, différent pour chaque application, doit guider vers le call-to-action.
Il ne peut donc être identique et devra être décliné selon ces situations.
Il devra aussi convenir aussi bien pour de jeunes enfants que des adultes, ainsi que pour
des personnes de cultures différentes, sachant que le portail est adopté dans plus d’une
vingtaine de pays. Ceci implique évidemment qu’il soit compatible avec le système
multilingue de la solution.
Les images quand à elles seront déclinées selon les applications,
mais aussi selon certains cas transverses comme une corbeille vide,
ou la survenue d’une erreur. Au total une trentaine d'illustrations
originales seront commandées.
Un autre point à prendre impérativement en compte est la multitudes
de thèmes habillant les portails. Pour éviter d’avoir à reproduire des
images aux couleurs harmonisées à chaque instance de la solution, nous
exigeons qu’elles soient produites au format vectoriel (svg) ce qui
permet d’en variabiliser les couleurs. De cette manière, les illustrations
héritent dynamiquement des couleurs principales du thème, et certains éléments
graphiques peuvent même être animés !
La méthode
Pour une collaboration au maximum de son efficacité, des ateliers sont organisés en interne.
Pour chaque situation nous imaginons et croquons les scénettes que nous
aimerions voir mises en images par l’illustratrice. Nous lui faisons régulièrement
parvenir nos croquis, ainsi que des listes de mots clés, concepts forts de la solution
(la collaboration, le réseau...) afin de lui fournir une base de travail et qu’elle ne
soit jamais en panne d’inspiration. Nous la briefons aussi sur la méthode d’exportation
à suivre pour que ses productions s’accordent à nos prérequis techniques.
À la réception de chaque nouveau lot, les entrants graphiques sont supervisés
techniquement afin de vérifier qu’ils soient compatible au processus d'intégration
et de déclinaison multithème.