Advency quick access
Retour
Design - Inspiration

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…

Film Her (2013) : le design émotionnel
Publié le 29 avril 2022, mis à jour le 30 avril 2022

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.  

URL de Vidéo distante

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 

Photo de profil de Émilie
Émilie
Chargée d'étude
Accessibilité