Partage de prototypes papier avec Adobe XD

Cet article a été écrit il y a plus d'un an : son contenu peut être dépassé.

Lorsque je travaille sur des interfaces utilisateurs, je passe quasiment systématiquement par une phase de prototypage papier. Cela m’aide à dégrossir le zoning de l’interface, à tester des concepts, à organiser ma réflexion. Et surtout, c’est rapide.

Je prends un crayon, je dessine rapidement des zones, j’efface ce qui ne me plait pas, je rajoute ce qui manque, j’annote avec des post-its : c’est simple, rapide, efficace. En quelques heures, j’ai plusieurs écrans qui me permettent de valider (ou non) la direction prise là où j’y aurais surement passé plusieurs jours avec des outils comme Axure ou Balsamiq.

Néanmoins, la méthode pose quelques problèmes. D’une part, lorsqu’on travaille à distance, ce n’est pas pratique pour le partage. Il faut alors tout scanner mais on perd l’interactivité. On peut faire une présentation PowerPoint avec les scans et les annoter pour décrire les éléments et interactions. C’est mieux mais pas optimal et on perd, mine de rien, pas mal de temps à le faire alors qu’on veux aller vite (ce ne sont que des premiers jets, après tout).

D’autre part, l’interaction avec le client/l’utilisateur est compliquée. C’est toujours assez laborieux de faire se projeter quelqu’un sur du maquettage (indépendamment de la méthode utilisée), ça l’est d’autant plus sur du maquettage papier où on abstrait en plus la machine. Et même en étant bien organisé, il arrive toujours un moment où on ne sait plus vraiment quel page on doit donner à l’utilisateur après son action simulée.

Bref, pas génial pour le partage.

Après quelques mois d’utilisation d’Adobe XD pour du maquettage, je me suis dit qu’il y avait surement quelque chose à faire avec pour mon prototypage papier. Pour ceux qui ne connaissent pas, Adobe Xd est un outil de création d’interfaces utilisateur doublé de fonctionnalités de prototypage. Ce sont ces fonctionnalités là qui vont nous intéresser.

L’idée est toute bête : je scanne mes prototypes papiers et je les inclus dans Adobe XD. J’utilise un plan de travail par feuille scannée et, après un petit passage par la case redimensionnement, j’ai mes différents écrans dedans. Je peux ensuite utiliser les fonctionnalités de partage en ligne du cloud d’AdobeXd et annoter directement dessus via commentaire.

Pour tout ce qui est popup et autre fenêtre modale, on peut les scanner à part et les ajouter comme un calque supplémentaire par dessus l’écran de base. Il est possible aussi, si besoin, de ne redessiner qu’une zone de l’écran et de la remplacer via les calques sans tout refaire à chaque fois (par exemple, pour simuler des tris).

Pour les interactions, je rajoute des rectangles transparents au dessus des zones cliquables. Ce sont ensuite sur ces rectangles que je vais ajouter les actions sur l’écran de prototypage. Et hop, en deux temps trois mouvement, j’ai mes enchaînements d’écrans que je peux toujours partager via le cloud AdobeXd.

Outre le partage, j’ai pu noter que ça simplifiait les interactions clients/utilisateurs. Parce que le prototype est accessible et manipulable avec une souris pour le desktop ou depuis le smartphone pour du proto mobile, l’immersion est meilleure et plus fluide.

Pour aller un peu plus loin, on peut également ajouter quelques petites zones de couleur avec une forte transparence pour signifier les sélections d’éléments, mettre en avant une zone (notification par exemple) ou pour améliorer des cases à cocher/bouton radio sans avoir à redessiner deux écrans.

Là, on est clairement dans de la micro amélioration et quand on va trop loin sur ce niveau de détail, c’est peut-être qu’il faut passer à l’étape suivante et quitter le prototypage papier.

D’ailleurs, je trouve ce mode de fonctionnement intéressant pour la suite. Dans une logique itérative, après le prototypage papier, on peut progressivement améliorer l’écran tout en restant sur le même fichier et en gardant les interactions. On peut passer d’un écran en cours de raffinement à un écran papier, ça permet de garder les interactions et valider au fur et à mesure que les échanges sont toujours corrects.

Quelques points que j’ai noté et auxquels il faut prêter attention :

• Le crayon papier se scanne très mal : il vaut mieux privilégier un feutre noir ou prévoir une remise au propre avec un feutre noir.
• La vectorisation, ça ne sert à rien : on passe son temps à essayer de configurer l’outil pour essayer de faire un rendu un peu plus propre. Au final, les lignes sont coupées et les textes sont peu lisibles, inutile de perdre du temps avec ça.
• Bien respecter les dimensions et les formats. Sur prototype papier, on n’est pas à un alignement prêt mais il faut garder les mêmes ratios partout sinon, ça fait trop de choses qui bougent quand les écrans s’enchaînent, ce qui est perturbant.
• Ne pas hésiter à refaire des zones. Il arrive parfois qu’on se rende compte que l’on a oublié un lien dans le header ou un bouton sur la toolbar et qu’on a déjà réalisé 4 écrans papiers avec cette erreur. Là, on ne s’embête pas : on refait uniquement la zone sur papier, on scanne, on découpe et on copie colle sur les autres plans. On est sur du prototype Lo-Fi papier, on peut se permettre d’être un peu brute.

Je l’ai fait avec Adobe Xd mais ce doit être aussi possible avec Invision ou autre outil du même genre. L’avantage de XD, c’est que l’on a tout au même endroit, c’est rapide.