Research into Sci-Fi Interfaces

Exploring UX/UI within films and how it translates to real-life needs and day to day constraints really fascinates me. This paved inspiration and served as the research for my thesis and my project on Blade Runners ‘Voight Kampff’ machine which I wrote about in a prior article.

Blade Runner 2049 Interface by Territory Studio

Looking back at sci-fi interfaces in films I noticed one thing there was a trend that they are commonly blue. I searched for a potential reason why for the trend, and came across an episode by the podcast series 99% Invisible Future Screens are Mostly Blue. In the episode, they discuss the research of Chris Noessel and Nathan Shedroff their findings into the matter documented in their book and website Make It So: Interaction Design Lessons From Science Fiction. Noessel’s hypothesis is that the colour blue is arguably rare in nature.

Noessel and Shedroff’s chart shows the predominant colour of screens used in Sci-Fi films

This led me to the initial question of ‘How do we create science-fiction interfaces that are “sc-fi” but also believable?’. Which, as mentioned before served as the inspiration behind my ‘Voight-Kampff’ project.

Taxonomy of Futures Diagram explores how we design for plausible futures and ‘near-future’ design. Explored Further in Speculative Everything by Speculative Designers Dunne, A. and Raby, F.

Representations of Science Fiction technologies like interfaces and designs tend to have this aesthetic of “sexy bullshit” they make certain elements of the interface prominent and easy to read, meanwhile the rest is just clutter or noise, without any clear explanation of how it operates.

This, however, works in the case of designing for Science-Fiction, especially for Film. Where the technology is only shown for a few seconds to a maximum of a couple of minutes on average, only enough is shown or explained so you understand what its purpose is without going into too much detail. Either, directly on the interface, through its usage, or it’s explained by a character.

“The most interesting lessons from sci-fi come when you assume, for the sake of argument, that everything is in sci-fi is there for a reason–even things that look like mistakes. There’s a word for this, apologetics, which usually refers to the act of attempting to close logical loopholes in theology.” -Nathan Shedroff

This led me to see if I could reproduce something similar to their graph so I rented out a few films from my university. Further, this would also then enable me to explore the different elements of these science fiction films and potentially categorise them — selecting for example different modes of transport between Science Fiction films. How they function, what their purpose is (are they for transport of people or cargo), and what are the interfaces within them.

I wanted to get a loose variety of films from around the same era leading up to the early two-thousands. From this, it would allow me a rough selection of different interfaces and styles as design tastes changed through the decades. They follow as such;

• Starship Troopers (1997)
• Alien (1979)
• Dark Star (1974)
• Stalker (1979)
• Blade Runner: The Final Cut (2007)
• District 9 (2009)
• Dune (1984)

Editing out sections where an interface was used or shown during a film.

I proceeded to then edit each film using Premiere Pro. I cut out the sections of the film where an interface was used or shown, keeping sections where a device was “booting” or starting up to give some further context on what the entire device looked like. After I went through and edited a film I then compiled it all into one clip so it had all the interfaces from one film in one segment.

However, throughout this process of editing entire films, I found it to be quite time-consuming taking hours to do so. This led to me limiting myself to editing films from a particular decade, rather than having a huge range of interfaces from different periods to choose from.

Alongside this, I opted for another method of taking screenshots of the interfaces wanting to recreate something similar to the chart Noessel and Shedroff had created I showed earlier. However, they noted that the test itself should be taken with a grain of salt as there are a number of problems regarding the results in the content and also the process. For example, the interfaces they looked at were screen-based and they adjusted the saturation of the compiled image to 100 percent to show clearly.

I decided to do this method using Processing, I ran the screenshots of the interfaces through processing and it would find the average colour of the screenshot and display it on the top left-hand corner of the screen as in the initial test.

Initial processing experiment showing the average colour used in the image being displayed on the top left-hand corner.

Wanting to iterate further, I created another prototype in which it would display the average colour in the screenshot in a sequence in order of when it was shown in the film.

This led to these ‘strips’ of colours being shown representing each film that I had taken screenshots for. However, it must be noted some images Processing had used had cases where the interfaces in the screenshot were smaller so the average colour was selected from the background scenery rather than the interface itself. As this was an experimental test I had not further edited the screenshots to be of just the interfaces, hence why some of the colours in a strip are occasionally darker or near to black.

Further developed prototype displaying the average colour of the screenshot shown as a ‘strip’,

Film Colour ‘Strips’.

Thank you!

For any further questions or insights into the project feel free to drop a comment or message me on LinkedIn. Alternatively, if you’d like to see any further work by me be sure to look at my Portfolio.