Le design d’interface vu par le cinéma de science-fiction

Le cinéma fantastique compte son lot d’UI (User Interfaces) futuristes plus ou moins réussies. Au milieu des nombreux tableaux de bords incroyables et leurs “big red buttons” figurent cependant de très belles réussites en terme de design d’écrans. Découvrir ou revoir les scènes qui donnent vie à ces interfaces parfois ergonomiques, d’autres fois graphiques ou même les deux à la fois, constitue une jolie mine d’inspiration. On y découvre parfois de vraies idées de génies qui peuvent de surcroît apparaître comme des anticipations plausibles de ce à quoi ressembleront nos futurs écrans.

J’ai donc voulu dresser une liste des films qui m’ont personnellement beaucoup plu, de façon à me rappeler de les revoir un jour de page blanche ou de ciel noir. La voici :

(note : j’essaierai de mettre à jour cette liste au fur et à mesure de mes nouvelles découvertes ou de mes “farfouillages” cérébraux).

Minority Report (2002)

Je commence sciemment par celui-ci pour deux raisons :

  1. C’est un classique de la réussite en terme d’anticipation aussi bien du point de vue du design que de la technologie
  2. Les interfaces de ce film m’avaient déjà marquées par leur réalisme à l’époque de sa sortie, alors même que je ne nourrissait pas encore l’ambition de devenir moi-même designer.

Dans ce film, beaucoup auront étés frappés par la justesse de l’anticipation d’une façon globale (si on excepte cette très vague histoire de prémonition du crime). Du côté des interfaces, la plus célèbre reste ce grand écran de contrôle dont Tom Cruise fait gigoter les diverses informations qui lui sont rapportés par les 3 personnes qui somnolent dans un drôle de bassin éclairé. Avant d’être esthétique, c’est surtout un outil très ergonomique imaginé à l’époque. Rappelons le contexte, nous sommes au début des années 2000 et les écrans tactiles (ou plutôt écrans “pressoir”) n’étaient pas encore exceptionnellement rapides et efficaces. Pourtant tous les terminaux du film, proposent des interfaces à la fois fluides et dynamiques. Bref. en 2002, on se voyait déjà dans ce futur tactile, sans latence tant que l’on avait une paire de gantelets adaptés pas loin. À ce sujet, je me rappelle, il y a aujourd’hui quelques années de ça, lorsque j’ai travaillé pour la première fois l’UI d’une table tactile Microsoft, je me suis dit “Wow, ça y est c’est Minority Report les gens!”. La référence est forte.

Si nos terminaux ne sont pas tous signés Nokia comme l’entendait le placement publicitaire de l’époque, on peut voir sur la photo ci-dessous que le monsieur à droite avait par contre déjà sa propre paire de Google Glass, une grosse décennie avant tout le monde. C’est ce qu’on appelle de la rétention technologique ça, non ?

Bref, nous n’y sommes pas encore sur tout, mais il est clair que les designers de l’époque ne s’étaient pas trop plantés.

Seul sur Mars (2015)

Si j’ai adoré ce film, c’est aussi parce que j’ai apprécié la qualité du travail réalisé sur les interfaces qui parcourent les équipement de Matt, le cosmonaute perdu sur la planète rouge. Sans en faire des caisses, les écrans que l’on découvre tout au long du film sont d’une part crédibles, mais surtout jolis et au demeurant, semblent plutôt ergonomiques. Graphiquement, ils sont harmonieux d’un terminal à l’autre (de l’écran de contrôle au boitier de porte en passant par l’interface vidéo). À la fois lisibles, épurées et contrastées comme il le faut, on peut apprécier le rendu graphique général et souligner le beau boulot des designers. Je vous tire mon scaphandre cher(e)s ami(e)s.

Note : en me baladant sur le net, j’ai aperçu que Geoffrey Dorne avait recensé dans un article de blog Focus sur les interfaces de « Seul sur Mars » un certain nombre d’écrans du film. Voilà qui ravira celles et ceux qui veulent en voir encore un peu plus.

Her (2013) :

Un film à voir de toute urgence si vous ne l’avez pas encore visionné. L’homme qui a un gros béguin pour son système d’exploitation n’est pas à blâmer. Que ce soit par son design visuel ou sonore, l’OS ne pouvait que séduire notre cher Théodore héros de cette histoire d’amour inédite.

Au sujet de l’UI à proprement parler, l’effet de flottement des éléments qu’elle propose (sur l’ordinateur ci-dessus par exemple) est assez intéressant. Notre œil a l’impression de voir flotter les divers éléments affichés dans une sorte de dalle de verre lumineuse. Basés sur des aplats de couleurs, de la profondeur et sur une lumière projetée, c’est une approche originale qui n’est pas totalement sans rappeler (dans une certaine mesure), le material design imaginé par Google depuis la version 5.0 de l’OS Android en 2014.

Her est une belle démonstration de l‘intérêt de la démarche centrée sur l’utilisateur (UX), ainsi que de la puissance du design émotionnel. Ici, c’est la personnalisation que lui renvoie le système qui séduit notre héros. L’homme à la chemise saumon est sujet de tellement d’empathie de la part de sa machine, qu’il en devient attaché à outrance. Sans tomber dans l’ambition d’accoutumer nos utilisateurs plus qu’ils ne le sont déjà à leurs écrans, on peut en tout cas en tirer la leçon de l’intérêt de travailler pour eux avant tout.

À lire au sujet de l’UI de Her : An Interview with Geoff McFetridge on the Interfaces from Her par Alissa Walker.

Avatar (2009)

Ok. Ce film est magnifique. Ce n’est pourtant pas mon exemple préféré en ce qui concerne le sujet de cet article. Les écrans sont en effet parfois un peu “farfelus” en comparaison avec d’autres films cités ici. Il faut tout de même reconnaître que ceci mis à part, le rendu est globalement très joli. Même si on a un peu l’impression que s’affichent par-ci, par-là des éléments un peu inutiles seulement présents pour “décorer”, le rendu est très élégant et pourra inspirer les assembleurs de pixels que nous sommes. Bref, ça clignote beaucoup pour pas grand chose, mais il y a tout de même graphiquement des éléments dignes d’intérêt à en retirer.

Ci-dessous une vidéo de Inc qui présente différentes interfaces du film :

Oblivion (2013)

Tom Cruise semble affectionner les films qui présentent de jolies interfaces. Oblivion est de ceux-là en tout cas. Le film a d’ailleurs tendance à avoir l’écran facile puisqu’il y en a quand même un peu partout et bien souvent au format “king-size”. Globalement, ils sont en tout cas très élégants. L’usage des animations est très fréquent. Les lignes fines et les éléments 3D prennent ainsi vie sur des fonds assez foncés qui garantissent le contraste. Peu de couleurs d’ailleurs puisque les teintes sont assez limitées. On retrouve souvent ce fond bleu nuit et ces éléments plus clairs par-dessus. C’est d’ailleurs pour ça que le rendu final est si joli.

Les photos d’Oblivion que vous voyez ici sont issues de Interface Love qui recense un très grand nombre d’UI présentes au cinéma dans divers films. Une ressource d’inspiration géniale du coup pour celles et ceux qui veulent en voir encore plus (ça valait le coup d’écrire cet article pour tomber dessus).

Profitez également de cette superbe vidéo de GMUNK qui rassemble différents plans du film montrant ces différentes interfaces, ainsi que de cet article complet sur l’UI du film (merci Maxine Ficheux pour ces lien).

Iron Man (2008)

Voilà un film que je vais regarder pour le design de ses interfaces (je ne l’ai jamais vu, étant moins fan de ce genre de films). Je rajouterai un petit compte-rendu de l’UI à la sauce Iron Man après visionnage, comme fait plus haut. J’enchainerai sans doute d’ailleurs avec Avengers (sorti en 2012) !

Et si vous en voulez encore plus, découvrez ou redécouvrez sur le même sujet la conférence de Raphaël Yharrassarry à Paris Web en 2014 : Science-fiction & interaction !


Voilà pour ce premier tour d’horizon des films aux jolis UI qui me venaient à l’esprit. Il y en a beaucoup d’autres qui mériteraient d’être dans cette liste. Vous pouvez me les proposer sur twitter via mon compte : Damien Legendre

À bientôt !