webleads-tracker

Partager

Récemment, j’ai participé à un workshop sur le dessin d’interfaces. Ce moment ludique et très instructif m’a semblé être important à aborder ici car il peut en intéresser plus d’un.
Donc si vous voulez en finir avec les gribouillis qui ne ressemblent à rien et que vous voulez enfin réussir à vous faire comprendre lors d’un RDV client c’est par ici que ça se passe ! 🙂

“Qu’est ce qu’un Sketch ?“

Il s’agit d’une esquisse faite en très peu de temps afin de poser sur papier (le plus souvent) une idée. Souvent utilisée par les artistes pour leurs ébauches.

“Quel rapport avec mon RDV client ?”


Lors d’un RDV client et que la discussion tourne autour des fonctionnalités d’une application web ou mobile (par exemple) et sa représentation graphique, il est souvent préférable de traduire sur papier les idées évoquées, tout comme un artiste le ferait avant de se lancer dans son chef d’œuvre.
On procède ainsi :

  1. On liste les fonctionnalités voulues (sur des post-it par exemple)
  2. Le graphiste les réorganise dans un espace défini (pour simuler l’emplacement sur l’écran de l’utilisateur final)
  3. Le graphiste fait son sketch en 5 min devant le client

Résultat, le client a en quelques instants une ébauche de son besoin et peut ainsi valider ou retravailler son idée initiale.
Le sketch devient alors un support pour amorcer la discussion des fonctionnalités à intégrer.

“Mais je ne sais pas dessiner !!”

Pas de soucis ! Voici quelques conseils :

 

  • Utilisez du papier à points ou quadrillé pour faire des lignes droites
  • Utilisez 3 feutres différents : noir, gris clair et un de couleur pastel. Le noir pour dessiner, le gris pour faire les ombres et la couleur pour montrer les boutons et actions activées.
  • N’essayez pas de fermer les rectangles. Faites parler votre côté artistique !
  • N’écrivez pas les textes, juste faites des traits.
  • Doublez la ligne du dessous pour les boutons, champs de formulaire et blocs pour donner du relief.
  • Mettez une ombre grise extérieure aux boutons et blocs, et intérieure pour les champs input.
  • Ne dessinez avec le feutre noir que les éléments importants de votre interface. Les éléments moins importants ou en arrière plan en gris clair.

“Est ce vraiment utile ?


Voyez par vous même… Le même site de la SNCF fait avant et après l’application de ces conseils dans le même laps de temps. Le résultat est assez flagrant. La compréhension de l’interface est bien mieux en appliquant les conseils donnés et ainsi je m’assure que le client et moi avons tous les deux la même compréhension de la proposition.

 

scan0178

 

 

 

 

 

 

 

 

 

“En fait c’est un wireframe ?!”


Un Sketch n’est absolument pas un Wireframe. Le premier n’a pas de valeur, il n’a pas pour but d’être conservé, mais juste d’aider à la réflexion sur les fonctionnalités souhaitées.
Contrairement aux wireframes, ou fil de fer, un client aura plus de facilité à s’exprimer sur un sketch, à dessiner par lui même dessus ce qu’il désire. Les wireframes quant à eux sont souvent perçus à tort par les clients comme la maquette finale alors qu’ils sont également un moyen de proposer une ergonomie, un enchaînement d’écrans, mais en aucun cas un design.

 

Et nous faisons cela sur tous nos projets agiles ! C’est aussi ça l’expertise Press’ Innov !


Partager