Profile picture of Coren Feldman

9 min read

A look at how UX/UI design is portrayed in popular media

Interfaces in movies and TV shows tend to look unrealistic, but there’s a lesson to be learned from them.

3D visual of a polygon head and various graphs

Illustrations by {name}

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

My friends and I are all very opinionated when it comes to TV and movies. We found that, when we watch together, we pause too many times to point out acting or writing choices, plot holes, and trivia. We decided to introduce a rule to my apartment: Everyone only gets one pause. My pause is almost always spent on moments showcasing UI/UX.

Technology usually looks strange in popular media. It’s most of the way there, but usually a little off, landing somewhere in the uncanny valley of user experience.

As designers, it’s very difficult to turn off the part of our brains that sees a user interface and feels the need to break it down:

What could be improved?

Where’s the back button?

What functionality is missing?

So what is it about UI/UX in TV and movies that’s so weird? How is it used as a storytelling tool, and what can we as designers learn from it?

Why is TV and movie UI weird?

First, the obvious point. Not all UI in pop culture is designed by UI/UX designers. Whether it’s considered a low priority or just isn’t in the budget, it seems like it often gets left to someone else on the team in editing or production design.

On-screen technology doesn’t have to look like real-world technology, but when it doesn’t, it can take away from an otherwise impactful moment. When interfaces in movies and TV don’t follow modern design trends, we can either feel that they’re badly designed in the world of the story or that they’re simply unrealistic.

Another obstacle productions face is the difficulty of showing a phone on screen. If you’re too zoomed out, it’s hard to see what’s going on, and if you’re close enough to show the UI clearly, you might deal with depth-of-field issues that make the edge of the screen blurry.

This can work well for dramatic effect (as seen in the movie Eighth Grade, below), but it doesn’t always work for the purposes of the scene, especially if it’s important to see more of the frame around it.

Enter post-production. In order to show the UI necessary for the plot, productions will sometimes opt for superimposing the UI later, in order to keep the focus and brightness compatible with the rest of the frame and clear enough for the audience.

A common design choice is to make text very large on screen, prioritizing readability over UI. This achieves the goal of focusing on the important information, though it can come at the cost of taking the viewer out of the moment because they’re so distracted by the one element that’s unrealistically dominating the screen real estate.

Designing for technology in film is a very similar challenge to designing digital products. The balance between aesthetics and functionality ultimately boils down to what makes sense in the context.

While real websites and programs are feature-rich, in TV or movies, these same interfaces will be boiled down to their most basic and essential elements. Viewers will only get a few seconds to see the screen, and if the one thing the script needs to highlight isn’t immediately noticeable, the scene might not work.

Nowhere is this more visible than in hacking scenes. Putting aside Matrix-inspired walls of moving code, hacking scenes will usually show one, particularly important action that’s key to the scene, like gaining access to important files. In an episode of Castle there’s a moment when, to stop their location from being discovered, Castle and his hacking compatriot decide to launch a “cyber nuke” to scramble the computers of Beckett and her respective hacker.

The UI in the entire scene is not quite based on reality, to say the least, but what stood out to me was the confirmation button for launching this fictional cyber weapon. A giant screen appears with an illustration of a missile and an enormous button with the word “LAUNCH” written out in all-caps. In a real program, this wouldn’t look so cartoonish, and there would also have to be a close or cancel button. On the other hand, they definitely highlighted the important action in the scene.

Sounds in pop culture UI also tend to be a little exaggerated. A loading bar wouldn’t make little digital clicking noises the entire time it’s transferring files because, if you’re not trying to download top-secret documents while enemy operatives search the building for you, it would drive you crazy.

Designing for technology in film is a very similar challenge to designing digital products. The balance between aesthetics and functionality ultimately boils down to what makes sense in the context.

How does sci-fi imagine UI?

Science fiction is a reflection of where our technology stands today and a glimpse of what it might be tomorrow. Star Trek depicted touch screens and voice commands in the '60s, and Back to the Future 2 featured fingerprint scanners. But while concepts are sometimes well predicted, when it comes to design, sci-fi can be a hit or a miss.

Glass devices

A lot of futuristic design uses glass as electronic devices to give a sense of technological development. This works for two reasons: First, we don’t currently have the ability to see through devices without cables and microchips in the way, and, second, when it feels like content is jumping off the screen, it makes the technology feel more connected to the world around it.

In terms of UI, this is an extension of minimalistic design trends going back to early 1900s movements such as Bauhaus. In digital design, flat design started being used more and more as smartphones advanced, and was adopted widely after the launch of iOS 7 in 2013. Intuitively, it feels like the sleek futuristic designs we see in movies are what these design principles would look like down the line.

However, if it were possible to make this vision a reality, it’s likely that users would not enjoy seeing their hand behind the glass, and the semi-transparent screen might make it difficult or frustrating to use.

Dark themes

Space travel shows in particular have used dark themes for a very long time. Going back to the earliest incarnation of Star Trek in the '60s, almost all of the interfaces consist of colorful buttons on a black background. In this context, the dark background evokes space, while the simplicity of the design helps make it feel futuristic. With iPhones officially introducing dark mode and designers reimagining interfaces to comply with it, this was a great prediction of where design paradigms were moving towards.

Gesture-based UI

Interfaces that are entirely gesture-based feel cutting-edge because we still rely on buttons, icons, and tooltips. In a world where all navigation and features are accessed by gestures, there’s an implied level of connectivity between humans and machines that we don’t have yet. It definitely looks sleek and exciting, but, if you were to look at the way Tom Cruise interacts with computers in Minority Report, you’d see how needlessly complicated the hand gestures he uses are.

Realistically, any platform that limits itself to gestures will either require the user to remember too many movements or will offer a very limited number of ways through which you can interact with its programs. The reason buttons and icons are used so widely is that they’re a great way of letting the user know what their options are without having to teach them in onboarding or via tooltips.

Cut-off corners

Battlestar Galactica is where I use all my pauses to point out the UI. All of their screens, tablets, papers, clipboards, and even books look like someone just snipped off the corners with scissors. From a practical standpoint, this is annoying because it would definitely be more expensive and more work to do this than to just have normal corners. From a UI perspective, it’s a great example of a classic design principle: repeating elements. Making a design choice and sticking to it gives a cohesive feel to your product, and Battlestar Galactica definitely achieved it with the way they use these shapes.

Voice commands

Voice commands have been popular in science fiction for much longer than they have existed in real life. We use voice commands for our phones and other smart devices, but our virtual assistants don’t have anywhere near the range of actions and intelligence the ones depicted on screen do, and we don’t use them as often.