Advency quick access

Go to :

Back
Design - Inspiration

Science fiction and interface design: influences and inspirations

Dashboard, action buttons, augmented reality headsets, smartphones, gestural interfaces, connected objects... A majority of the ways of interacting on the digital domain seems to have been conceived by being inspired by science fiction cinema, literature but also painting...

 

Film Her (2013) : le design émotionnel
Published on 29 April 2022, updated on 30 April 2022

Science fiction as a source of inspiration

When we imagine the creation of a website or an application, we always look for more fluidity in the user's path and we optimize its navigation experience (UX) by purging the interface of unnecessary and complex elements. However, it is funny to notice that cinema has a lot of futuristic user interfaces, sometimes crazy, which do not always reflect the best practices in real life, in other cases they can become a real laboratory of ideas and a source of inspiration without limit;

The gap and influences between SF and interface design

On the big screen, we are used to seeing complex interfaces, in big pixels, under back*, in black and green and elements that flash everywhere in an anxiety-provoking way. We mustn't click on the big red flashing button and yet we only see it. In series, it is recurrent to see graphically ugly and unrealistic hacking scenes: a loading bar from an old time to schematize the progress of a file transfer, super complex calculations, a coder under pressure who types frantically an incomprehensible computer jargon... Graphic creation level = 0.  

URL de Vidéo distante

If we put aside the endless aesthetic but ultra-complex dashboards and their big, flashing, scary red buttons, we can also see some interesting trends in terms of screen design. Analyzing these cinematic scenes gives us a whole field of inspiration and ideas to create new ergonomic and graphic interfaces. These imagined interfaces (usable or not in real life), give us good ideas in terms of design.  

Some examples of interface design seen on a big screen  

Minority Report (2002) : start of a strong trend

This cult movie featured a user interface that was at the origin of strong trends in terms of user interface and network usage. Gestures such as the swipe (the action of swiping sideways with one's finger) and the pinch (the action of pinching with two fingers) were strongly emphasized here.

Her (2013): emotional design

The film " Her " by Spike Jonze tells the love story between a man and a voice-activated operating system.Designer Geoff Mc Fetridge was asked to imagine how we might interact with our devices in the near future and chose to make heavy use of strong flat design. " Her " is a great example of the value of the user-centered approach (UX), as well as the impactful power of emotional design. The main actions are placed in the center of the screen. The interface is transparent.

Indeed, it is the very advanced customization offered by the system that seduces Joaquim Phoenix and makes him completely addicted to the platform. The more you customize an interface, the more the user becomes loyal. The floating effect of the displayed elements, the flat colors, the depth, the projected light, is an approach that has many similarities with the material design***.

Read about the "Her" UI: the interview with Alissa Walker (content in English)

Excerpt :" In this flat and colorful world, McFetridge began to consider the set of indicators in a frame and to think of the interface it contains as a work of art. He was inspired by James Turrell's vibrant colors and drew on Mark Rothko's painting technique, transforming the artist's signature (horizontal bands of bright color) into vertical columns, "more like a city than a sunset," he says. The columns of color then become a way to define hierarchy, pushing the task at hand to the center of the screen. You always come back to the middle, the middle is where everything your computer knows about you is.

Alone on Mars (2015) : aesthetics and ergonomics

The screens are aesthetic and ergonomic. Graphically, they are harmonious from one terminal to another, there is no break in the path (control screen, door box, video interface). The interfaces are legible, uncluttered and contrasted.

Testimonials and conferences on the subject

Etienne Mineur (Creative director and co-founder of Volumique, designer) :

You have to know that engineers and scientists working in computer science (mainly Americans) have all read a lot of SF in their youth (from the fifties to nowadays), they are for the most part very aware of the different concepts expressed by visionary authors like (for the most famous) Philip K Dick, Isaac Asimov or even William Gibson. These science fiction authors have had a great influence on the different technological inventions we use nowadays. William Gibson's CyberPunk has really shaped our present and maybe our near future. As early as 1984, with his first novel Neuromancer, he described a society completely interconnected with a virtual world, with its mafias, its politicians, its big companies, its hackers, its freaks, its computer bugs, its drifts... "

In Raphael Yharrasssary's conference "Science fiction and interface design ", the UX designer was interested in looking beyond the interface, analyzing the uses that arise from these scenarios and see how communication, learning evolve according to these futuristic or alien technologies.;&>

See the conference " Science fiction and interface design " by Raphael Yharrassarry (French) 

Definitions 

*DOS commands: In computing, batch processing is an automatic sequence of commands (processes) on a computer without the intervention of an operator.

**Flat design is a style of graphic interface design characterized by its minimalism. It is based on the use of simple shapes, bright colors and typography.

***Material design is a visual and interactive language created by Google. It allows to design a graphical interface (Design system). It is inspired by real objects, paper and ink and differs from the Flat Design;

Sources

Accessibility