Ergonomie : les prototypes

HCI — Coursera

J’ai suivi avec assiduité le cours Human‐Computer Interaction (Interactions Homme‐Machine) sur Coursera. Après deux mois, il vient de se terminer, et c’est l’occasion pour moi de faire un bilan.

Ce cours était proposé par l’université de Stanford, et donné par Scott Klemmer, professeur dans cette université. En termes de contenu, il était identique au cours donné en classe. Les «vrais» étudiants avaient des jalons plus rapprochés tout au long du projet et des séances de travaux dirigés.

Je voulais faire un billet pour mettre à plat ce que j’avais retenu de ce cours, mais également pour le mettre en perspective avec ce que je connais au quotidien. J’ai finalement décidé de découper ces retours en plusieurs billets, car le contenu est assez dense. Voici donc le premier d’une série, portant sur le prototypage.

Le prototypage: base de la conception

Le prototypage est l’outil de base pour concevoir des interfaces ergonomiques pour un produit. Les prototypes permettent de tester des concepts de manière concrète, et très en amont dans le processus de conception.

Scott Klemmer a abordé cet aspect très tôt dans son cours en nous montrant différents prototypes, et pas seulement dans le domaine de l’informatique.

Walter Dorwin Teague dans un prototype d’habitacle d’avion de ligne

En témoigne la photographie ci‐dessus, où Walter Dorwin Teague visite le prototype d’intérieur d’avion de ligne. Car non, ce n’est pas une photo d’un vrai avion, mais d’un intérieur reconstitué dans un hangar. Ce faux intérieur d’avion a permis de tester sur du concret la largeur des allées, la taille des coffres à bagages, la taille des sièges, leur espacement etc.

Dans le domaine du logiciel, les prototypes peuvent prendre plusieurs formes : en papier — avec moult post‐it — ou sous forme électronique en utilisant Pencil, Balsamiq Mockups, Justinmin, etc.

Paper prototyping by Simon Collison

Paper prototyping by Simon Collison

Pourquoi utiliser des prototypes ? La raison est simple: on peut faire de multiples itérations à moindre coût. Un prototype d’interface permet de tester un concept très rapidement, de faire des modifications en conséquence, et de converger vers une meilleure solution à faible coût.

Cela signifie qu’un prototype n’est pas au pixel près, qu’on doit pouvoir facilement le modifier pour explorer d’autres solutions, et qu’il ne doit pas coûter cher ni prendre du temps à réaliser. De plus, pour qu’un prototype soit efficace, il doit être réalisé dans un but précis. C’est-à-dire qu’il doit se focaliser sur la modélisation d’un aspect ou quelques aspects d’un produit.

Conséquence : une maquette de design n’est pas un prototype. C’est déjà le niveau d’après où on se pose des questions de couleurs, de pixels, de dégradés. Quand on en est à ce niveau de détail, c’est déjà trop tard pour réfléchir aux interactions de l’utilisateur avec l’interface.

Les prototypes: notre utilisation

Nous avons déjà mis en place le prototypage des interfaces graphiques avant de commencer un développement. Nous utilisons Pencil, qui a l’avantage d’être libre et gratuit.

C’est vrai que sa mise en place a permis de réduire le temps de conception de nos interfaces, en limitant les allers/retours après coup. Cet outil a, dans un premier temps, surtout mis en place pour limiter l’impact de ces allers‐retours à la fin de l’implémentation.

Itérations sur une même interface (exemple réel)

Itérations sur une même interface (exemple réel)

Nous nous servons désormais des prototypes pour confronter différentes idées, choisir une version et l’améliorer. J’en ai encore eu l’exemple dernièrement (exemple ci‐dessus) : leur utilisation est extrêmement bénéfique. Elle permet de faire de multiples itérations très rapidement, et améliorer significativement la solution finalement choisie.

Les prototypes: ce qu’on peut améliorer

Les prototypes que nous utilisons aujourd’hui sont principalement statiques: on dessine une ou plusieurs interfaces, mais on ne prototype pas la manière de les utiliser. C’est un premier pas, mais je pense qu’on gagnerait à ajouter ces interactions.

Les logiciels tels que Pencil, Balsamiq et Justinmind permettent également de prototyper les interactions de l’utilisateurs. Ils sont capables d’exporter un modèle sous forme de PDF cliquable, avec lequel on interagit pour passer d’un écran à un autre. C’est très intéressant et ça permet de mieux modéliser et donc comprendre les actions de l’utilisateur.

Prototype interactif: un clic sur le bouton affiche le résultat

Prototype interactif: un clic sur le bouton affiche le résultat

Il nous reste donc quelques points sur lesquels on peut s’améliorer sur le sujet des prototypes. Mais globalement, les prototypes nous rendent déjà de grand services ! De votre côté, quelle utilisation en avez‐vous ?

Commentaires

9 Comments sur « Ergonomie : les prototypes »

  1. Franck dit :

    Ah ben nous, on fait des prototypes d’ergonomie sur papier, après la graphiste vient faire en sorte que ça soit joli, après la pub vient ajouter des cases de pub qui cassent le design, puis le SEO et le community manager viennent ajouter des plus, des likes et des pages intermédiaires qui cassent l’ergonomie, après on lance la version finale, après les clients se plaignent que c’est pas beau et incompréhensible, tout le monde dit «je vous l’avais bien dit» et part bouder.

    Je me demande parfois si ton approche est pas meilleure, et j’attends la suite. ^^

  2. Spica dit :

    Si seulement Gronavions pouvait lire ton post et voir ce qu’est (ou n’est pas) un prototype et son intérêt…

  3. Ghusse dit :

    @spica: Qui est ce monsieur ?

    @Franck: Il faudrait intégrer les problèmes de pub, et de SEO & autres avant le design, en les prototypant aussi.

    Pour la suite, ça viendra 🙂

  4. Spica dit :

    Un client qui fabrique des gronavions comme son nom l’indique. 😉

  5. Ghusse dit :

    Tu peux préciser, alors, ce qui est fait chez eux ? Et pourquoi tu penses qu’ils devraient lire ce post ?

  6. Spica dit :

    Non, je vais pas rentrer dans les détails. Mais en deux mots, on nous demande des prototypes pour aider à faire certains choix ergonomiques qui sont grosso‐modo des versions fonctionnelles de l’application (et qui explorent différentes pistes). En gros, on se retrouve à devoir développer l’appli plusieurs fois…

  7. Ghusse dit :

    Peut‐être pourrais‐tu proposer de faire des prototypes «wireframe», non ?

    Explorer plusieurs pistes, ce n’est pas forcément une mauvaise chose. Par contre, de développer deux fois puis choisir à la fin, ça, c’est coûteux et décourageant !

  8. Spica dit :

    Exactement. Mais ils ont besoin d’expérimenter vraiment la fonctionnalité pour arriver à se décider apparemment (enfin même pour les trucs sans prototypage, c’est la galère)… Mais bon, c’est pas très facile de négocier avec un client qui a beaucoup de poids. Bref…

Laisser un commentaire