J’ai depuis longtemps l’habitude de travailler avec la suite Adobe pour produire mes livrables. Classiquement, avec illustrator pour produire des Wireframes puis Indesign pour la partie spécification.

Mais depuis peu, j’expérimente un autre processus de production qui me paraît plus fluide et plus orienté expérience utilisateur dans le sens où les outils prennent moins d’importance et la production donc l’évolution est plus fluide.

Ce processus de production se base sur Sketch 3, Dropbox et Invision.
– Sketch 3 est un logiciel spécialisé dans la conception d’interfaces utilisateurs. Il existe uniquement sur mac OS. Il ne fait que ça et le fait bien.
– Dropbox, le bien connu service de « cloud »
– InVision est un service en ligne qui permet de créer des maquettes cliquables à partir de copies d’écran, de les partager et d’avoir des commentaires dessus.

Pourquoi ces 3 là et pas d’autres ? Simplement parce qu’ils constituent une chaîne bien intégrée. Je crée dans Sketch, j’enregistre sur Dropbox, InVision récupère les fichiers et crée ou met à jour automatiquement les écrans. Je vais rentrer plus dans le détail.

Sketch, une rapide prise en main

Contrairement à certains, la prise en main Sketch est assez rapide. Il reprend en effet le principe des plans de travail que l’on a dans illustrator où chaque plan de travail va correspondre à un écran. L’interface est construite en respectant le guidelines mac OS X, donc franchement la phase d’apprentissage est assez courte, dans mon cas en deux heures, j’arrivai à produire ce que je voulais.

Fenêtre principale de Sketch

Il faut voir que Sketch intègre par défaut des modèles d’interfaces, pour concevoir pour le Web et pour mobile. Il est aussi très facile de récupérer d’autres modèles propres et gratuits pour la grande majorité. La communauté autour de ce logiciel est très active. Par exemple, si vous voulez concevoir une interface pour l’Apple Watch, il y a déjà des modèles.

Dans mon cas, j’avais à concevoir une application professionnelle avec une interface Web. J’ai donc pris un modèle « bootstrap » pour réaliser les wireframes. En quelques clics les principaux éléments étaient posés, avec la même facilité que j’aurai pu le faire avec Balsamiq.

Le temps de comprendre comment fonctionnent les symboles et je plaçais le même header sur tous les écrans. Encore une fois ça reprend un fonctionnement à la illustrator. Il est possible, crée des symboles à partir des éléments de base. Toutes les instances du symbole sont liées, quand on en modifie une, cela modifie toutes les autres.

On ne fait pas forcément attention aux pages en commençant mais on s’aperçoit de leurs présences. Les pages permettent d’organiser en dossier les plans de travail. C’est à mon avis pertinent sur les gros projets afin d’organiser, de regrouper les écrans qui vont ensemble, par exemple, par rubriques dans le cas d’un site Web.

Gérer les grilles dans Sketch

Il y a bien sur dans Sketch, tout un système de grilles et de règles qui permet de construire rapidement une interface ordonnée et lisible, même pour les plus novice. Il est aussi possible d’ajouter des plug-in pour certaines fonctions.

Dropbox

Une fois que votre fichier est prêt, il suffit de l’enregistrer dans le dossier dropbox. Le dossier va être créé une fois que vous aurez connecté InVision avec Dropbox. InVision le récupère et crée les copies d’écran sur la base des plans de travail.

Connection à DropBox

Si vous mettez à jour vos fichiers, les écrans sont mis à jour. Il faut toutefois garder les mêmes noms de plans de travail.

Dépot InVision dans DropBox

Si vous ne voulez pas passer par Dropbox, il est aussi possible de synchroniser à la main ou avec un logiciel spécifique.

InVision

Un projet InVision

Une fois dans InVision, il faut construire la maquette cliquable. C’est relativement simple, il faut déterminer des zones cliquables et les lier avec les pages de destinations. Il est aussi possible de créer des modèles de zones d’interactions par exemple pour les menus. Comme ça, il est possible de les répliquer par la suite sur tous les autres écrans rapidement.

Ajouter une zone cliquable.

Des paramètres peuvent être ajoutés en fonction des besoins. Par exemple, pour faire une interface sur mobile vous pouvez déterminer les parties de l’écran, en haut et en bas, qui sont fixes pour la barre de titre et la barre d’actions. Il faut prévoir l’écran sur toute sa longueur et cela permet donc de donner l’impression de défilement.

La contrainte reste qu’il faut souvent prévoir beaucoup d’écrans dans le sens où il n’est pas possible de superposer deux écrans et donc il n’est pas possible de faire des effets de « recouvrement » d’un écran par autre facilement. Par exemple, pour une fenêtre de dialogue qui viendrait s’afficher par-dessus plusieurs écrans principaux, il faut prévoir tous les cas ou tricher en floutant le fond.

Pour faire des animations un peu complexes ou spécifiques à un endroit de l’écran, il faut ruser un peu, par exemple en prévoyant un gif animé de l’écran animé qui s’affichera avant de passer automatiquement à l’écran final. Le résultat n’est pas toujours optimal car il faut compter le temps de chargement du gif.

Toujours est il, une fois la maquette cliquable finalisée, vous pouvez la partager. Les options de partages sont nombreuses et assez complètes, voir un peu complexe, mais globalement ça fonctionne bien et couvre les usages courant.

La maquette cliquable permet de faire pas mal de choses. Par exemple, vous pouvez en faire un raccourci sur un iPad ou un iPhone et ça donne l’impression d’une vraie application.

Les commentaires dans InVision

Ce qui intéressant aussi c’est la gestion des commentaires. Chaque utilisateur peut laisser ses commentaires dans la maquette à un endroit précis dans l’écran, et les autres peuvent continuer la discussion. C’est particulièrement pertinent dans un cadre professionnel. Par contre dans la pratique, les utilisateurs n’ont pas l’habitude de ce mode fonctionnement. Je ne pense que ce soit l’outil qui pose problème mais plus que ce n’est pas dans leurs habitudes. Déjà on leur demande leurs avis mais en plus il faut le faire en ligne et il est possible de discuter celui des autres et donc de collaborer ! Ça fait beaucoup d’un coup.

Donc j’aurai tendance, dans un premier temps à utiliser cette maquette dans un cadre « modéré » avec donc un observateur qui va accompagner l’utilisateur dans la découverte de la maquette et l’encourager à commenter, comme ça peut se faire dans le cadre de tests utilisateurs.

Au final,

Le principal inconvénient de cette chaîne de production c’est qu’elle n’est pas (encore) partager par tous. Dans le cadre de cette application par exemple, je travaillais de concert avec un visual designer qui n’a pas eu le temps de trouver ses marques sur Sketch et donc qui a dû produire la version finale avec Illustrator. Rien de dramatique, mais travailler sur le même fichier aurait encore accéléré le processus.

Les maquettes réalisées avec InVision restent quand même très statiques, c’est un bien pour un mal, ça évite de se perdre dans des détails et mais ça oblige à produire beaucoup d’écran si on veut rentrer dans les détails.

À l’inverse, le processus de conception devient très fluide et peut être maîtrisé en un temps limité. La présence de modèle permet d’arriver à un résultat très propre rapidement et donc l’intégration dans InVision permet de faire des cycles rapides de conceptions et de validations.

Pour compléter,

InVision n’est pas le seul service pour faire des maquettes, on peut aussi utiliser un service comme Marvel, mais je ne l’ai pas encore utilisé pour de vrai.

Par la suite, je pense qu’il faudra affiner l’aspect « animation » et là il faut encore que j’explore des outils comme Framer !