Making-of de conférence Paris-Web : Science fiction et interactions – Le bloc-notes, UX & Design d'expérience utilisateur

Je vous propose de revenir sur ma conférence et un peu avant pour vous expliquer comment et pourquoi je propose un sujet et comment je le prépare.

Proposer un sujet

Un beau jour de printemps, enfin plus probablement un soir après avoir couché les enfants, j’ai soumis mon sujet à ParisWeb. Pourquoi proposer un sujet ? Pour plusieurs raisons, déjà depuis 2009, ma stratégie commerciale (Oui, j’ai dit deux gros mots là) est d’améliorer ma notoriété en partageant mon expertise sur les sujets proches de l’ergonomie et l’UX (expérience utilisateur). Ne pouvant être en concurrence direct avec des agences ou des SSII armées de commerciaux, il fallait trouver d’autres moyens ; d’où aussi mon blog. ParisWeb à la particularité de rassembler plusieurs « populations » que je côtoie régulièrement (développeurs, graphistes, …) qui sont demandeurs de connaissances sur l’ergonomie et l’UX. Après, il y a aussi une réelle envie de partager et un réel plaisir de se confronter aux regards extérieurs, d’où les divers enseignements que je peux donner.

Toujours est il, il fallait trouver un sujet à proposer qui soit si possible retenu. Pour en avoir parlé avec les organisateurs, la proportion de sujets longs proposés est plus faible que ceux des sujets courts donc vous avez plus de chance d’être retenu. Mais évidemment, c’est plus compliqué de parler 40 minutes avec questions que 15 sans questions.

Pour trouver le sujet possible, il y a deux approches un peu différentes soit vous proposez un sujet très technique qui va avoir une réelle valeur en termes connaissances apportées comme je l’avais fait en 2011 sur les tests utilisateurs, soit vous abordez un thème plus classique mais avec un point de vue bien différent.

Je vous dis ça mais concrètement ça ne se passe pas comme ça pour moi. C’est plus comme trouver un sujet d’article pour ce blog, il faut trouver quelque chose dans l’air du temps et si possible un peu en avance. Dans le cas de cette conférence, ça fait un moment que l’on me bassine avec des images à la Minority report, ça fait un moment aussi que je regarde régulièrement le site scifiinterfaces.com et le livre des auteurs. Il y a quelque temps j’avais fait une conférence sur l’UX et l’innovation en illustrant avec quelques images de films. Puis toutes ces idées atteignent une masse critique qui accouche sur LE sujet à proposer.

À ce point-là, je rédige une petite bafouille en essayant d’expliquer mon sujet aux organisateurs. Puis quelque temps plus tard, généralement vers le mois juin, un peu avant l’ouverture des inscriptions, je reçois une réponse : « Votre sujet a été retenu. bla-bla… (et plein de truc super gentil que je ne lis pas parce que je suis trop content) ». Les grandes vacances passent, entre les enfants à gérer, le boulot qui arrive en vague à cette période (oui, les salariés se barrent en vacances et te laisse le taff) et je me retrouve début septembre. Là je vois passer un tweet genre « ParisWeb c’est dans X jours ». Et bordel de merde, je n’ai rien de préparé !

La préparation

Commence alors la vraie préparation du sujet. Je fais la liste des films, série, dessins animés,… à voir en plus de ceux que j’ai déjà-vu ou mis au chaud depuis que j’ai eu l’idée de ce sujet. Il faut que je les récupère par divers moyens…

Après commence une longue phase où il faut les regarder en analysant les moments où il y a des interactions et si ces interactions sont pertinentes pour ce que je veux montrer. Et ça, ça change beaucoup de chose quand vous regardez un film en vous focalisant sur les interactions. Mais à ce moment je n’ai pas encore une idée très précise de ce que je veux, donc il faut ratisser large, un peu trop sans doute…

Dans le même temps, je relis le livre « Make it So » de Nathan Shedroff et Christopher Noessel, pour y retrouver des idées et voir si je ne passe pas à côté de certains films clefs dans l’histoire de la science-fiction.

Après avoir un certain de maturation, les idées principales de ma présentation commence à prendre de la consistance sous la forme de « chapitres » mais rien n’est encore prés. À ce stade, je commence à dessiner un « storytelling » de ma conférence. Le but de c’est de raconter une histoire, de construire un rythme, de conduire vers une idée, de donner un fil directeur auquel l’auditeur pourra se rattacher.

Frise temporelle de la présentation

Pour ça, il y a plusieurs choses que j’essaye de faire. Un moyen que j’aime bien utilisé c’est de poser une question au début et d’en apporter la réponse à la fin. Il faut aussi avoir une idée de l’intensité de votre conférence de manière globale et de son évolution au cours de la présentation. Pour cette conférence, je devais passer en « introduction » le matin du premier jour, donc j’ai essayé de proposer quelque chose globalement facile d’accès, ludique, avec des pointes d’intensités qui sont données par les extraits de films.

Je voulais aborder plusieurs thèmes, j’ai donc fait des mini-chapitres. Pour chacun d’eux, l’intensité va augmenter et puis redescendre vers la conclusion. Là j’essaye de clore en rappelant l’idée ou l’enseignement principale de ce qu’on vient de voir.

Il faut travailler la durée, la présentation doit faire 40 minutes C’est un format classique assez confortable. Mais ça veut dire qu’il faut déjà un petit temps d’introduction où je me présente et ou je présente ce dont je vais parler et un temps de conclusion. Ça fait environ 35 minutes pour le reste à partager entre les différents mini-chapitres, avec des temps plus ou moins similaires pour garder le rythme, donc une dizaine de minutes maximum.

Finaliser

Maintenant, il n’y a plus qu’à faire le support de présentation ! (YakaFauKon comme on dit) ce n’est pas nécessairement le plus compliqué mais il faut trouver les illustrations qui vont bien, qui s’enchaînent correctement et qui font sens. Surtout ce que je vais raconter avec. En réalité, j’écris l’ensemble de ce que je vais raconter dans les notes pour toutes les pages. Même si le jour de la présentation, je ne vais sûrement pas lire et dire ce que j’ai écrit, ça me permet d’avoir une trame et de me souvenir de ce que je vais dire.

Une fois la première version faites, j’ai déroulé la présentation complètement à un ami développeur, ce qui m’a permis de vérifier si j’étais dans les temps, si la présentation dans son ensemble fonctionnait et de voir ce que je pouvais améliorer. Globalement, ça fonctionnait. J’ai modifié quelques éléments et refais la présentation à une deuxième personne avec un profil un peu moins geek, ce qui m’a permis d’affiner encore la présentation, de déplacer certains passages vers d’autres pour obtenir un contenu plus fluide. Puis je l’ai encore auto-déroulé pour moi-même plusieurs fois.

Au total, ça m’a pris près d’une dizaine de jours de travail pour faire l’ensemble de la présentation et m’assurer que j’arriverai à la dérouler correctement.

Le jour J.

Le jour J, j’essaye d’arriver toujours en avance pour vérifier que la technique marche et notamment que je peux brancher la sortie audio de mon mac pour diffuser le son. J’avais aussi prévenue à l’avance que j’avais besoin du son. Et à ParisWeb, je suis bien arrivé avec 20 minutes d’avances et tout marchait parfaitement du premier coup. (Oui, c’est des pros à ParisWeb !)

Perso, je ne stresse pas trop juste avant de commencer la présentation car le sujet est bien préparé. Je dirais que c’est comme un marathon, le plus dur ce n’est pas vraiment les 42 km, mais les 6 mois d’entraînements qui précèdent. Une fois sur la ligne de départ, c’est trop tard pour renoncer et une fois lancer, il faut bien arriver au bout.

Le résultat

Et bien vous pouvez le voir là :

Je me permets de rajouter une petite description des séquences vidéos.

Extrait du 1er épisode de Star trek. Le commandant est au centre de la passerelle du vaisseau. Les membres de l’équipage sont répartis autour de la salle, sur des pupitres avec des boutons, des lumières et quelques écrans. Le comandant s’adresse à 2 d’entre eux qui font quelques gestes et répondent.
2001, l’odyssée de l’espace. Au centre un écran affiche un schéma montrant la position du vaisseau par rapport à la piste d’atterrissage. À droite un levier permet de contrôler le vaisseau.
Starwars, Luke, allonger dans un fauteuil de dentiste se fait soigner la main coupée par Dark Vador. Un droïde médical touche différents endroit de sa main afin de vérifier son fonctionnement avant de refermer la trappe.
Elysium, Une jeune fille est placée sur une table d’auscultation. Sa mère active la machine médicale sur un écran à côté de la table. Une rampe lumineuse survol la fille, effectue le diagnostic et la soigne avec une douce lumière.
Dans le temple du 5e élément, 4 tables permettent de positionner les 4 pierres correspondant aux 4 éléments. Korben s’approche de l’une d’elle.
Toujours dans le temple, Korben souffle sur une pierre, elle s’active en s’ouvrant et en faisant apparaître une poudre brillante.
Matrix. Dans un dojo virtuel, les deux adversaires se battent. L’un d’eux accélère sa vitesse virtuelle pour battre l’autre.
Vidéo présentant les animations réalisées sur les interfaces du film les gardiens de la galaxie. Elles sont toujours mouvantes, complexes, comme vivantes.
Le voyage dans la lune. (film muet, fin de la présentation) Les scientifiques montent dans un obus pour être envoyé dans la lune à l’aide d’un canon.

La version page par page

Donc ci dessous, la version avec les pages et les commentaires que j’avais écrits pour chacune. Les commentaires sont brutes, comme je devrais les dire et donc pas vraiment dans un style littéraire !

Bonjour, je vais donc vous parler de science-fiction et d’interaction homme machine ! Le but était pour moi de comprendre comment ces interfaces sont imaginées et quels sont les enseignements qu’on peut en tirer.
Pour ceux qui ne me connaissent pas, je suis Raphaël Yharrassarry et je travaille comme ergonome, freelance depuis le dernier millénaire. Et je travaille notamment en conception d’expérience utilisateurs sur tous types d’interfaces pour tous publics.
À l’origine de cette présentation, je cherchais un exercice pour débuter un cours, ou une présentation, qui soit simple et accessible à tout le monde, pour se poser les bonnes questions avant de concevoir. Cette question c’est : Si vous aviez à concevoir le poste de pilotage d’une navette ? Comment feriez-vous ?
Une des pistes est de voir ce qui se fait dans les films de sciences-fictions en matière de poste de pilotage. À force de regarder des films de SF, j’ai aussi regardé les autres interfaces, comment se présentent les interfaces médicales, comment on fait la différence entre humain et machine, ce qui m’a naturellement conduit à faire une synthèse sous la forme d’un mini guidelines.
Mais pour commencer, regardons ce qui se fait en matière de poste pilotage dans les films ou les séries de science-fiction.
Donc au commencement, un des premiers films de science-fiction, c’est les mondes futurs qui datent de 1936. on avait des choses assez proches de la capsule de sous-marin avec assez peu d’interfaces, uniquement des cadrans et quasiment pas d’interactions.
Sur les films suivant, le poste de pilotage ressemble plus à une passerelle de bateau où le commandant donne des ordres à l’équipage qui les exécutent. C’est assez pratique au cinéma, car ça permet au spectateur de comprendre l’action, sans pour autant faire des effets spéciaux particuliers. Au centre, on a une représentation spatiale du positionnement du vaisseau dans l’espace.
Les contrôles sont pour l’essentiel mécanique sous la forme de boutons-poussoirs. L’interaction physique est à peine perceptible.
On retrouve le même principe de l’utilisation d’une interface vocale dans 2001 l’odyssée de l’espace. Là, l’ordinateur de bord, Hal, est un personnage à part entière. On note la présence d’un panneau de contrôle et d’écrans, mais celui-ci est assez peu utilisé par les acteurs. Encore une fois le dialogue est prépondérant,…
Malgré tout on voit aussi apparaître, des postes de pilotages avec des commandes de types levier ou joystick. Ces leviers sont souvent utilisés dans des phases critiques par exemple des atterrissages, soit des accélérations d’urgence.
Il faut voir qu’à la même époque, dans la vraie vie, il y a le programme Apollo qui est en cours, avec le 1er homme sur la lune en 1969. Et l’intérieur de la capsule Apollo, c’est ça !
Avec l’interface du module de guidage, qui est en réalité assez succincte, mais doit nécessiter une interaction complexe : saisie de séquence de chiffres dans le bon ordre.
On retrouve des éléments similaires par exemple dans Star wars, avec un nombre certain de leviers dans le faucon millenium.
Le poste de commande de l’étoile noire est aussi inspiré de ce qui faisait à l’époque, ou un peu avant dans les centrales électriques ou les industries. On trouve la même multitude de cadrans et de boutons que dans Appolo.
L’utilisation du levier permet de bien mettre en évidence une monté en puissance du rayon de l’étoile noir et du suspens !
Même si les effets ne sont pas ceux prévus ! Entre parenthèses, il faudra m’expliquer un jour, pourquoi les trucs explosent à plat dans l’espace et non dans tous les sens ?
Si on avance un peu dans le temps, on voit comment est constituée la navette endeavour en 1987, avec l’apparition de vrais écrans, la présence de joystick et toujours une quantité affolante de contrôle mécanique.
Au regard de ça, le poste de pilotage du long courrier dans le 5e éléments est relativement simple et élégant, avec uniquement des écrans et quelques joysticks. On retrouve un parti pris esthétique évident comme dans 2001, l’odyssée de l’espace.
On retrouve le côté complexe dans des films comme promotheus en 2012, mais avec un travail important de design graphique sur l’affichage des écrans. Et toujours une plus grande densité d’informations à l’écran.
Et dernièrement, dans les gardiens de l’espace, on est plus dans une configuration tout écran mais on retrouve les leviers. Ce qui nous amène à une dernière illustration.
Et enfin Space X, la capsule pour les voyages commerciaux dans l’espace. On observe donc essentiellement des écrans, avec un minimum de commande.
Ce qu’on observe ?
les interfaces proposées dans les films de sciences-fictions ne sont pas particulièrement futuristes, elles sont en phase avec leur époque.
l’usage d’un ordre vocal donné soit à un équipage soit à une machine à prédominer jusqu’aux années 70-80 et donc jusqu’à l’arrivé des ordinateurs « WIMP ». Depuis, on observe une prédominance des écrans, et des représentations graphiques.
les interfaces dites naturelles restent limitées et ne sont pas présentes pour piloter une navette.
Le joystick ou le levier sont des valeurs sûres !
Ce que je tire de ces observations, c’est que le réalisateur ne peut pas se permettre d’être trop futuriste. Le spectateur doit pouvoir comprendre ce qui se passe à l’écran, il faut donc rester dans les valeurs de références de l’utilisateur. Ce qui n’empêche pas certains réalisateurs comme Kubrik ou Besson d’avoir une approche esthétique plus épurée qui propose des choses différentes.
Un autre types d’interfaces intéressant à observer sont les interfaces médicales.
Le médecin ne disparaît pas dans les films de science-fiction, mais il est souvent remplacé par un robot plus ou moins humanoïde faisant office de médecin. C’est sans doute pour garder une relation « humaine » avec le patient, mais souvent assez froide.
On peut aussi regarder les différents affichages médicaux, certains sont relativement simples, souvent avec des courbes. Ces courbes sont immédiatement identifiées par les spectateurs comme étant les signes vitaux même si elles ne veulent pas dire grand-chose quand y regarde de plus près.
Notamment si vous êtes en hibernation ! Ce qui intéressant de voir là, c’est que l’interaction se fait directement sur le sarcophage d’hibernation, avec une interface tactile qui vient se placer sous la main de l’utilisateur.
Ces affichages médicaux présentent souvent une forte densité d’informations avec des indicateurs en mouvement, des courbes qui symbolisent la vie. Ça permet sans aucun doute d’en mettre plein la vue au spectateur, mais on sait très bien que l’usage ce type d’interface ne fonctionne pas.
Ces panneaux de contrôle par exemple, pour une « procédure d’urgence » présente de nombreuses informations, là ou visiblement il faudrait être beaucoup plus guidant et claire dans les informations à donner. Quoi que le gros bouton rouge en haut est très affordant et donne bien envie d’appuyer dessus, mais ça n’aura probablement pas l’effet souhaité !
Sur le même appareil médical, on retrouve une interface similaire alors que la patiente est dedans en train de se faire bouffer de l’intérieur par un alien. Certes c’est bien d’avoir une interface cohérente, mais là par exemple il y a de nombreuses icônes peu explicites qu’il faut sélectionner. Accessoirement si vous êtes blessé aux bras ou aux mains, comme on dit « pas de bras, pas chocolat » c’est mort…
Mais on trouve aussi des cas intéressants et plus réalistes en termes d’interface. Le diagnostic est automatique et les soins aussi ! L’interface n’offre qu’un retour d’action pour permettre de savoir quand se sera fini. Ça paraît bien plus logique, car ces dispositifs médicaux automatiques s’adressent à des non-médecins, sinon ils ne seraient pas automatiques !
La problématique de reconnaître un humain, et de les distinguer des robots ou des extraterrestres est une question assez courante.
On observe souvent l’utilisation de mesures biométriques comme les réactions de l’iris dans le test Voight-Kampff pour différencier les humains des répliquants. Mais ça ne marche pas toujours très bien.
Dans le cinquième élément, il y a un bel exemple. Pour rappel, le héros doit activer une arme qui va arrêter le mal absolu, à la condition que l’humanité en vaille encore le coup. Pour prouver cela, il y a plusieurs conditions à remplir.
1re conditions la mise en place d’une organisation pérenne sur une durée bien supérieure à la vie d’un humain.
Et que cette organisation soit capable de transmettre un savoir, une histoire ancienne afin d’être prête le jour j. Ça prouve donc un environnement culturel suffisant, pérenne, sans rupture brutale.
Cette même organisation sera capable d’expliquer le mode d’emploi de cette arme et dans une certaine mesure ça mise en œuvre. Il faut être capable de mettre en œuvre une procédure écrite, pour monter l’arme avant de l’activer.
Pour le montage, l’arme est construite de manière à tester la capacité symbolique, avec la compréhension des icônes terre, vent, fer, eau. C’est une capacité acquise vers 4 ou 5 ans. Mais elle facilite aussi sa mise en place en utilisant les mêmes symboles afin d’inciter à trouver la position de chaque pierre.
Et un détrompeur est présent sur chaque pierre, c’est-à-dire qu’un des angles est biseauté pour que l’utilisateur trouve le bon sens et ne puisse pas mettre la pierre dans le mauvais sens. Tout cela contribue à l’affordance de l’objet. C’est dire la capacité d’un objet à susciter son usage.
Dans la dernière phase, l’utilisateur doit comprendre une utilisation abstraite du langage pour activer chacune des pierres. Ce niveau d’abstraction est généralement acquis vers 10 à 12 ans … Ça permet aussi de vérifier au passage si l’environnement de l’arme est viable, avec la présence d’eau, d’air, d’oxygène pour le feu, de terre.
Et bien sûr un cinquième élément, qui est le plus dur à mettre œuvre, pour être humain, qui est l’amour ! Donc pour différencier l’humain, les conditions à remplir sont : un environnement culturel et social pérenne ; une capacité à suivre une procédure ; un niveau d’intelligence permettant de manipuler les symboles et le langage abstrait ; vivre dans un environnement sain pour un humain ; une capacité d’empathie envers les autres humains ou les non-humaine
Un autre exemple intéressant sur la différence humain/machine est visible dans un film comme Her. Dans un futur proche, Theodore fait l’acquisition d’un programme informatique intelligent. il fait la connaissance de ‘Samantha’ qui va donc évoluer au cours du film. Au début l’interface est très présente avec notamment l’écran.
Par la suite, l’interaction se centre sur le petit boîtier, qui comporte une caméra et un écran. Même si l’interaction est essentiellement vocale, le boîtier joue un rôle important dans l’histoire et au centre de plusieurs scènes.
Vers la fin du film, Samantha a un comportement de plus en plus humaine. le boîtier disparaît au profit de l’oreillette. l’interface est de moins en moins présente. Jusqu’au moment du dénouement… Non, je ne vous raconte pas la fin ! Ce qu’il faut retenir là, c’est plus « Samantha » est humaine, moins elle est présente physiquement à l’écran.
Ce qui m’amène sur ma dernière partie, ou je vous propose une synthèse sous la forme d’un mini guidelines. Donc dans les différents types d’interfaces on a : les contrôles mécaniques, classique parlant, une valeur sûre.
Les interfaces vocales, bien explicite, avec peu de moyens donc ça fonctionne bien au cinéma.
Les interfaces neuronales, où l’utilisateur commande directement à la machine, l’inconvénient, c’est qu’un gars qui pense ce n’est pas très visuel, donc c’est généralement associé à la réalité virtuelle.
C’est un bon exemple, qui correspond exactement à l’usage existant de la réalité virtuelle. C’est-à-dire former les gens à travailler dans des environnements dangereux. Que ce soit les pilotes d’avions, technicien dans les centrales nucléaires où militaires.
Les projections holographiques sont très utilisées pour montrer le terrain dans ça globalité, ou éventuellement pour les communications.
Les interfaces gestuelles, dites naturelles, paradoxalement c’est assez peu utilisé de manière systématique. On voit quelques interactions gestuelles notamment avec des projections holographiques, comme dans Iron man.
Enfin je vais m’attarder un peu sur les interfaces visuelles. Si vous concevez une interface pour extraterrestre, l’écran n’est jamais rectangulaire.
Il a nécessairement une forme plus ou moins bizarre.
Pour l’affichage, il faut privilégier les écrans transparents à la verticale, dès que possible.
Ça permet de bien voir l’acteur interagir, tout en ayant une idée de ce qui se passe à l’écran.
Densité d’information. En termes de densité d’information. Vous pouvez y aller ! Lâchez-vous, toutes les interfaces sont largement remplies d’images, de vidéos, de formules mathématiques ou de codes ! Ça pose une question intéressante, qui serait capable de travailler avec une telle quantité d’information ? On en voit, par exemple, les traders en salle des marchés, dans des processus de supervisions, … dans ces cas on observe qu’une minorité d’écrans sont attribués à l’interaction et les autres ne font qu’afficher de l’info. Donc oui, c’est conçu pour des vulcains, mais il y a sans doute des vulcains parmi nous !
Couleur. En termes de couleur, c’est assez limité, vous avez le droit au bleu, au vert, un peu de jaune est autorisé. Et le rouge uniquement quand on est dans l’urgence.
Pour la typographie, là encore pas trop le choix. Il faut écrire en majuscule, sans serif, avec une casse fixe, une forme assez carré en général.
Pas toujours lisible pour les humains.
Si vous présentez un peu de code, ou un truc qui y ressemble, c’est parfait !
Les icônes, vous pouvez y aller, pas besoin qu’elles soient très significatives, mais de préférence il faut les présenter en pack de dix !
Et le plus important, les interfaces doivent être animés avec rythmes qui leur donnent vie. Toujours en mouvement, toujours dynamique !
Pour en revenir, à la question initiale, Concevez l’interface vous permettant de piloter une navette spatiale ? Je pense qu’on va trouver la réponse dans le premier film de sciences-fictions, le voyage dans la lune. Personnellement, je ne suis pas pilotes d’avions, donc un poste de pilotage avec pleins d’informations, ça ne me conviendra pas. Une Interface simple avec un bouton démarrer/arrêter, un joystick ? Je ne suis pas non plus astrophysicien, donc je suis totalement incapable de prévoir la trajectoire optimale, ni même le moment du départ pour avoir le trajet le plus court entre deux planètes. Donc la solution, ce n’est sans doute simplement pas d’interfaces, et laisser à un système intelligent décider du moment du départ, de la trajectoire, etc … comme avec un canon…
Références : http://www.scifiinterfaces.com

Les retours

J’ai déjà eu quelques retours positifs durant ParisWeb et par la suite, ainsi que quelques améliorations possibles afin de rendre cette présentation plus attrayante encore. Je suis donc preneur de vos commentaires.