bureau

Croquis d'interface

A l'occasion d'un projet récent, j'ai bricolé un outil de croquis d'interface tactile qui m'a aidé à évaluer des idées d'organisation et de comportement. Cet article vous explique pourquoi et comment il a vu le jour, donne les bases de sa mise en place, détaille ses bénéfices et limitations, et finit par quelques conseils pratiques.

De plus en plus d'articles nous rappellent le rôle primordial joué par le temps et la cinématique dans la production de sens au sein des interfaces tactiles. Mais il reste aujourd'hui compliqué pour un designer de représenter rapidement, à l'état de «croquis», le comportement d'une interface, afin d'en évaluer la pertinence en la manipulant sur un smartphone ou une tablette.

Quelques outils sont aujourd'hui à notre disposition pour palier à cette difficulté : ils offrent la possibilité d'enchainer des écrans statiques les uns aux autres à l'aide de zones actives et d'animations pour visualiser un parcours. Par exemple : appuyer sur le bouton "menu" d'un écran d'accueil pour le faire glisser vers la droite avec un bel ease-out, pour dévoiler le dit menu dont les items s'affichent en fondu ligne après ligne.

Si ces outils nous permettent de manipuler des maquettes d'interface en situation, ils n'offrent qu'un nombre limité de comportements. On y retrouve en effet les plus courants, car ce sont les mêmes que les développeurs peuvent reproduire à moindre frais lorsqu'ils construisent l'application.

Pour les projets fortement contraints en temps et en ressources de développement, ces solutions sont donc très adaptées et vont permettre aux participants du projet de manipuler rapidement une maquette d'interface dans des conditions très proches de celles du réel. Mais lorsqu'on se confronte à un jeu de contraintes sortant des normes, et que l'on souhaite expérimenter d'autres modèles d'interaction pour y répondre, ces outils perdent malheureusement tout leur avantage.

Réquisitionner un développeur pour produire des croquis d'interactions qui seront pour la plupart abandonnés (c'est bien là leur vocation) est une possibilité, mais aussi un luxe que ne peuvent se permettre qu'un nombre finalement restreint d'entreprises. Pour les projets où ces ressources sont rares et précieuses, ce n'est malheureusement pas un confort possible en phase exploratoire. Est-ce une raison pour continuer à tenter d'expliquer à nos collègues ce que nous avons imaginé à l'aide de croquis sur le papier, de gesticulations et autres bruitages élaborés ? Probablement pas.

Origami (mis à disposition gracieusement par une de ces entreprises disposant de budgets importants, remercions-la) a paru très prometteur et séduisant à cet égard quand il est apparu. Mais aussi très intimidant. La courbe d'apprentissage pour passer de novice à confiant dans Quartz Composer est un peu raide, et ce temps de mise à niveau n'est pas souvent justifiable pour la réalisation d'esquisses.
Autre souci posé par Origami: les interactions sont faites à la souris, non au touché. Evaluer une interface tactile par sa manipulation directe, c'est découvrir les instants où les zones actives sont trop petites ou trop rapprochées, ou que le doigt qui agit cache des informations nécessaires à la réalisation d'une tâche - autant de détails importants qui pourraient passer inaperçus en utilisant le pointeur d'une souri. En revanche, pour affiner une animation et en livrer toutes ses caractéristiques aux développeurs, cet outil parait idéal. Mais si les qualités d'une animation sont importantes pour la réussite d'une interface, ce n'est pas le sujet ici : on parle de croquis et non de finition.

Alors que je cherchais comment produire économiquement des brouillons d'interface, Keynote sur iOS a fait un temps figure de bon candidat. Les documents pouvant être travaillés sur la version OSX et lus ensuite sur un iPhone ou un iPad, on retrouve ici l'idée de manipulation directe de l'interface. Mais il faut oublier les interactions allant au-delà du simple tap : tout contact avec l'écran déclenche le passage à la diapositive suivante quelle que soit la zone touchée sur l'écran. En plaçant le prototype sur l'appareil on se rapproche en effet beaucoup plus des conditions du réel, mais on donne aussi la fausse impression qu'il réagira correctement aux différentes sollicitations présentes dans un écran donné, alors qu'en fait il s'agit d'un prototype très scénarisé, passant uniquement d'une diapo à la suivante. C'est un peu gênant quand on souhaite utiliser des glissés horizontaux et des pincements, ou des parcours de liste en scrollant.
D'autre part, le transfert via iCloud et les interprétations possibles (et souvent imprévisibles) entre les deux versions du logiciel se sont avérées un peu lourdes à gérer pour de simples croquis.

Mais Keynote apportait un avantage consistant, celui de la gestion automatique de l'animation entre deux états donnés d'une interface. Quelque soit les formes, leurs couleurs, leurs orientations,... tant que les objets présents sont au même nombre dans les diapositives de départ et d'arrivée, la transition est gérée de façon fluide et relativement prévisible. C'est la bien nommée transition "Magic Move". Ne pouvant pas laisser de côté le gain de temps que cette transition permet, j'ai fini par céder sur deux fronts : la tenue en main de l'appareil cible et la propreté de l'écran de mon ordinateur. Les avantages offerts - rapidité d'exécution et possibilité de générer un livrable compréhensible - compensent il me semble les pertes.

Partant d'un document vierge, il m'a fallu un peu moins d'une heure et demie pour réaliser ce prototype composé d'une quinzaine de diapos qui accompagne cet article. Keynote vous permet ensuite d'exporter une vidéo que vous pouvez partager à vos collègues, et annoter en référençant le timecode.

Comment ça marche ?

Tout se passe dans Keynote, donc avoir un Mac à disposition vous sera certainement utile. De toutes les transitions entre diapos offertes dans ce logiciel, il y en a une sur laquelle tout repose : le Magic Move. Elle porte bien son nom, car la plupart du temps, c'est bien ce qui se passe : on construit un état de départ, un état d'arrivée, on applique cette transition, et magie, ça marche tout seul. Ca permet de gagner du temps par rapport à d'autres solutions permettant d'éditer une timeline, car justement, il n'y a pas de timeline à éditer. Ce qui permet de passer plus de temps à compliquer les constructions et d'arriver dans un laps de temps acceptable avec quelque chose d'assez élaboré pour que ça se rapproche d'une interface tactile animée relativement fidèle.

Comment s'y prendre

• Poser sur la première diapo un masque creux d'appareil, comme un cadre, de façon à ce qu'il soit à l'échelle 1 quand l'animation se joue. Le respect de cette échelle est primordial si vous souhaitez vous assurez que les écrans sont facilement manipulables.

  

• Placer sous cet appareil un calque correspondant à la taille d'écran de l'appareil. Mettre de côté ses caractéristiques (largeur, hauteur, positions en ordonnée et en abscisse) car elles pourront être utiles par la suite.
• Dupliquer cette diapo de base pour pouvoir la reprendre par la suite.
• Construire les éléments de base du premier écran.
• Dupliquer la diapo et modifier les éléments présents pour représenter le deuxième état de l'écran. Si des éléments nouveaux apparaissent dans ce deuxième écran, on peut tester la solution proposée par Keynote par défaut (en général il s'agit d'un fondu d'opacité), ou alors forcer un comportement en ajoutant ces nouveaux éléments dans le premier écran tout en les cachant : soit en jouant sur leur opacité, soit sur leur position en les plaçant hors de l'écran de l'appareil représenté.
• Autre alternative pour faire apparaître un objet, utiliser les actions de comportement dans la slide elle-même, une fois que la transition est terminée.
• Faites attention à l'ordre des calques et aux objets groupés, ils peuvent influer sur l'interprétation de la transition.
• Une fois les écrans finalisés, appliquer un masque blanc pour cacher ce qui dépasse permettra de donner plus de crédibilité à ce croquis. Le masque de l'appareil est alors au premier niveau, le cache juste en dessous, et ensuite on retrouve tous les autres éléments d'interface dans l'ordre qui conviendra en fonction de vos besoins.
• Il ne vous reste plus qu'à bien répéter l'enchainement des écrans avant de présenter pour apporter le plus de crédibilité possible à votre démonstration. Si vous arrivez à avoir le bon timing pendant votre démonstration, les personnes à qui vous montrez un prototype comme celui-là se demanderont si vous avez un écran tactile sur votre ordinateur. Le touché n'est bien entendu là que pour simuler l'interaction dans un esprit de prototypage, et c'est bien la barre espace du clavier qui fait avancer le diaporama.

Les bénéfices

• Tester rapidement l'organisation et le comportement d'un ou plusieurs écrans.
• Comparer plusieurs scénarios d'utilisation possibles.
• Communiquer une idée à des personnes capables de se projeter au-delà du manque de fidélité graphique ou cinématique. Le recueil de commentaires dans cette phase où rien n'est figé est un avantage considérable pour gagner du temps.
• Manipuler une interface, même en faisant semblant, permet de se rendre compte des problèmes d'échelle qui se présente lorsqu'on se confronte aux tailles des écrans et aux tailles des mains.
• Partager ces croquis à des personnes ne disposant pas de Keynote grâce aux exports vidéo.
• Après validation d'un tel zoning, le travail de développement peut commencer en parallèle du travail graphique.
• Ca marche aussi avec un vidéo-projecteur. On peut donc très bien utiliser ce document de travail comme livrable pour communiquer l'avancement du projet à un groupe important de personnes.
• Il est possible d'affiner ces croquis animés en insérant des maquettes statiques plus fidèles, en ajoutant des commentaires et des spécifications qui en font des livrables de grande valeur pour les chefs de projet et les développeurs.

Inconvénients

• Le travail (tailles, coordonnées, temps d'animation) n'est pas récupérable par les développeurs qui devront transposer le croquis dans la réalité. Par contre, cette technique permet de leur donner une bonne idée du résultat souhaité.
• La visualisation directe sur un appareil n'est pas possible.
• Les traces de doigt pourront s'accumuler sur votre écran. Mais on finit par s'y faire, vous verrez.
• L'absence d'interface dédiée pour assigner le z-index des éléments impose parfois une gestion laborieuse.
• Lorsqu'on modifie l'échelle d'un groupe comprenant un objet texte, la taille du texte ne se modifie pas et il faut l'éditer à la main.
• Il n'est pas possible de déplacer une image dans son masque lors d'une transition.
• Les animations peuvent être réglées jusqu'à un certain point. Les timings et les enchainements peuvent être vraiment brouillons à certains moments, et il faut parfois encore un peu d'imagination pour visualiser un résultat final. C'est sur ce point précis qu'une solution comme Origami est beaucoup plus efficace.
• La visualisation d'une bascule portrait / paysage de l'appareil cible peut être compliquée à gérer en fonction de la complexité des écrans.

Quelques conseils

• Le copié-collé entre deux diapos replace un objet aux même coordonnées que son origine. Il faut utiliser ça le plus possible pour gagner du temps.
• Appliquez une transition sur la première diapo, comme ça elle sera déjà présente au copié-collé.
• Si vous êtes débutants sur Keynote, prenez le temps de bien distinguer les animations entre deux diapos des animations qui ont lieu dans une même diapo.
• Préparer une diapo avec tous les éléments de base disponibles : l'appareil dans sa position souhaitée, un masque pour cacher ce qui va dépasser, les éléments d'interface les plus utilisés. La boite de Legos en quelque sorte.
• Déplacer les éléments avec le combo Shift+Flèche et Alt+Shift+Flèche permet de les déplacer rapidement et d'être sûr de retomber sur ses pattes quand on les remet en place, sans avoir à consulter les informations de coordonnées dans le panneau de droite.
• Quand on doit modifier fortement l'état de départ d'une animation par rapport à l'état d'arrivée de l'animation précédente, on peut passer par une transition automatique sans délai entre deux diapos pour rendre ce changement transparent à la lecture. C'est utile quand à un moment donné vous avez besoin de modifier des objets qui sont contenus dans un groupe. Vous pouvez faire une transition automatique sans délai entre une diapo où ces objets sont groupés et une diapo où ils sont dégroupés, puis travailler la transition vers une troisième diapo qui permettra faire changer l'état de ces objets. Dans le fichier exemple à télécharger, c'est ce qui se passe entre les diapo 7 et 8, ou 10 et 11.
• Il faut s'assurer que tous les éléments sont bien présents dans les diapos de départ et d'arrivée si on veut maîtriser leur comportement.
• Bien avoir en tête l'ordre de superposition des objets.

Conclusion

Avec quelques centaines de diapos au compteur, des collègues designers, développeurs ou chefs de projet ayant validé l'intérêt de cette technique, je me suis dit qu'elle était mûre pour être exposée et partagée ici. Je serais ravi d'avoir votre retour d'expérience et de voir comment cette idée pourrait être poussée un peu plus loin, ou si d'autres techniques plus rapides existent pour explorer rapidement une idée.

Allez-y, prenez le fichier exemple en main, dites moi ce que vous en pensez. Cette technique m'a appris une chose, c'est qu'il est important de visualiser une idée avant de solliciter le temps et les talents d'un développeur. On a beau être capable de visualiser mentalement, cette capacité ne va que jusqu'à un certain point et nombre de détails pourtant importants peuvent nous échapper.

Le masque d'iPhone utilisé dans la vidéo vient de chez Pixeden.

Si vous téléchargez le fichier exemple Keynote, vous aurez besoin de la fonte Blokk pour le lire correctement. Elle permet de produire des zones de texte neutres à moindre effort.

2014.09.03 : comme me l'a rappelé @louije, une session du dernier WWDC d'Apple était consacrée au prototypage d'applications tel qu'il est pratiqué en interne. J'avais vu passer l'annonce de cette session sur twitter dans la semaine qui la précédait, bien déçu de ne pas pouvoir y assister pour savoir si Keynote faisait partie de la formule. J'en ai oublié l'existence jusqu'à hier, et il se trouve qu'ils s'y prennent d'une façon assez similaire - si ce n'est avec beaucoup plus de talent. Prenez temps de la regarder, elle est bien plus didactique que ce que j'ai pu écrire ici. Leur méthode n'est pas exactement la même (ils passent par un terminal mobile alors que j'en fait l'économie), mais le principe directeur est identique : comment arriver le plus rapidement possible à décider si une idée vaut la peine d'être creusée et développée ou non.