bureau

It means “desk” or “work table” in french : how metaphoric for a blog discussing what my work's about. Get the RSS feed.

i

I'm Thibaut Sailly, an independant interface designer based in Paris. Say hello on twitter or by email at bonjour ✉ tsailly ◦ net.

Topics

Archives

© 2010-2014 Thibaut Sailly · Powered by Movable Type · RSS

Croquis d'interface

english version available

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.

un écran de laptop couvert de traces de doigts
Concevoir des interfaces tactiles, c'est aussi toucher son écran

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.

aperçu de l'ensemble des diapositives composant le prototype montré en exemple dans cet article
Diapositives composant le prototype montré en exemple

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

Les bénéfices

Inconvénients

Quelques conseils

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.

« past present »