Science-fiction et design d’interface : influences et inspirations
Tableau de bord, boutons d’action, casques de réalité augmentée, smartphones, interfaces gestuelles, objets connectés... Une majorité des façons d’interagir sur le domaine du digital semble avoir été conçue en s’inspirant du cinéma de science fiction , de la littérature mais aussi de la peinture…
La science fiction comme source d’inspiration
Lorsque l’on imagine la création d’un site ou d’une application, nous recherchons toujours plus de fluidité dans les parcours utilisateur et nous optimisons son expérience de navigation (UX) en épurant l’interface d’éléments inutiles et complexes. Cependant, il est amusant de remarquer, que le cinéma compte un grand nombre d’interfaces utilisateur futuristes parfois farfelues qui ne reflètent pas toujours les meilleures pratiques dans la vraie vie, dans d’autres cas elles peuvent devenir au contraire un vrai laboratoire à idées ainsi qu’une source d’inspiration sans borne.
Le décalage et les influences entre SF et design d’interface
Sur grand écran, nous sommes habitués à voir des interfaces complexes, en gros pixels, sous dos*, en noir & vert et des éléments qui clignotent partout de manière anxiogène. Il ne faut surtout pas cliquer sur le gros bouton rouge qui clignote et pourtant on ne voit que lui. Dans des séries, il est récurrent de voir des scènes de hacking graphiquement très laides et peu réalistes : une barre de chargement d’un ancien temps pour schématiser la progression d’un transfert de fichier, des calculs super complexes, un codeur sous pression qui tape de manière frénétique un jargon informatique incompréhensible... Niveau création graphique = 0.
Si l’on écarte les sempiternels tableaux de bords esthétiques mais ultra complexes et leurs gros boutons rouges clignotants et effrayants, on distingue aussi des tendances intéressantes en termes de design d’écrans. Analyser ces scènes cinématographiques insuffle tout un champ d’inspiration et d’idées pour créer de nouvelles interfaces ergonomiques et graphiques. Ces interfaces imaginées (utilisables ou non dans le réel), nous transmettent de bonnes idées en termes de conception.
Quelques exemples design d’interface vu sur grand écran
Minority Report (2002) : amorce de tendance forte
Ce film culte mettait en avant une interface utilisateur qui a été à l’origine de tendances fortes en termes d’interface utilisateur et d’usage du réseau. Les gestes tels que le swipe (l'action de balayage latéral effectuée à l'aide de son doigt) et le pinch (action de pincer avec deux doigts) ont été ici fortement mis en avant.
Her (2013) : le design émotionnel
Le film « Her » de Spike Jonze raconte l’histoire d’amour entre un homme et un système d’exploitation à commande vocale. Le designer Geoff Mc Fetridge a été chargé d'imaginer comment nous pourrions interagir avec nos appareils dans un avenir proche et a choisi de beaucoup utiliser le flat-design**. « Her » est un bel exemple de l‘intérêt de la démarche centrée utilisateur (UX), ainsi que de la force d’impact du design émotionnel. Les actions principales sont placées au centre de l’écran. L’interface est transparente.
En effet, c’est la personnalisation très poussée proposée par le système qui séduit Joaquim Phoenix et le rend complètement addict à la plateforme. Plus on personnalise une interface plus l’utilisateur se fidélise. L’effet de flottement des éléments affichés, les aplats de couleurs, la profondeur, la lumière projetée, est une approche qui comporte beaucoup de similitudes avec le material design***.
A lire au sujet de l'UI de "Her" : l'interview d'Alissa Walker (contenu en anglais)
Extrait : « Dans ce monde plat et coloré, McFetridge a commencé à considérer l’ensemble des indicateurs dans un cadre et de penser l'interface qu'il contient comme une œuvre d'art. Il a été inspiré par les couleurs éclatantes de James Turrell et s’est inspiré de la technique picturale de Mark Rothko, transformant la signature de l'artiste (bandes de couleurs vives horizontales) en colonnes verticales, "plus comme une ville qu'un coucher de soleil", dit-il. Les colonnes de couleur deviennent alors un moyen de définir la hiérarchie, poussant la tâche à accomplir au centre de l'écran. "Vous revenez toujours au milieu, au milieu se trouve tout ce que votre ordinateur sait de vous."
Seul sur Mars (2015) : esthétisme et ergonomie
Les écrans sont esthétiques et ergonomiques. Graphiquement, ils sont harmonieux d’un terminal à l’autre, il n’y a pas de coupure dans le parcours (écran de contrôle, boitier de porte, interface vidéo). Les interfaces sont lisibles, épurées et contrastées.
Voir le Focus sur les interfaces de « Seul sur Mars »
Témoignages et conférences sur le sujet
Etienne Mineur (Directeur de création et cofondateur de Volumique, designer) :
« Il faut savoir que les ingénieurs et scientifiques travaillant dans l’informatique (principalement les Américains) ont tous beaucoup lu de la SF dans leur jeunesse (des années cinquante à nos jours), ils sont pour la plupart très au fait des différents concepts énoncés par des auteurs visionnaires comme (pour les plus connus) Philip K Dick, Isaac Asimov ou même William Gibson. Ces auteurs de science fiction ont donc eu une grande influence sur les différentes inventions technologiques que nous utilisons de nos jours. Le CyberPunk de William Gibson a vraiment modelé notre présent et peut-être notre futur proche. Dès 1984, avec son premier roman Neuromancien, il décrivait une société complètement interconnectée avec un monde virtuel, avec ses mafias, ses hommes politiques, ses grandes sociétés, ses hackers, ses freaks, ses bugs informatiques, ses dérives… »
Dans la conférence de Raphael Yharrasssary « Science fiction et design d’interface », l’UX designer s’est intéressé à regarder au-delà de l'interface, en analysant les usages qui découlent de ces scénarios et voir comment la communication, l'apprentissage évoluent en fonction de ces technologies futuristes ou extraterrestres.
Voir la conférence « Science fiction et design d’interface » de Raphael Yharrassarry
Définitions
*Commandes DOS : En informatique, un traitement par lots (batch processing en anglais) est un enchaînement automatique de commandes (processus) sur un ordinateur sans intervention d'un opérateur.
**Flat design : Le flat design, ou design plat, est un style de design d'interface graphique caractérisé par son minimalisme. Il se fonde sur l'emploi de formes simples, d'aplats de couleurs vives et de jeux de typographie.
***Material design : Le Material design est un langage visuel et interactif créé par Google. Il permet de concevoir une interface graphique (Design system). Il s’inspire d’objets réels, le papier et l’encre et se distingue du Flat Design.
Sources
- Cité du Design exposition sur le thème « Comment la science-fiction et le design d'interface s'influencent mutuellement ? »
- Scifiinterfaces.com (contenu en anglais) site de références par Nathan Shedroff & Christopher Noessel, auteurs du livre Make it so.
- ilikeinterfaces.com (contenu en anglais) compile les interfaces-utilisateur dans les films, les mangas et les jeux vidéo.
- Bibliographie : Design et Science fiction