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.
The futuristic appeal of voice commands is that the voice on the other end feels like a real person that you could have an almost human relationship with. In the movie Her, the artificial intelligence is so advanced that people feel comfortable talking to it out in the world, because for all intents and purposes, they’re basically talking to another person. In reality, using voice commands feels awkward and clunky because at the end of the day, we know we’re still just talking to ourselves.
How UI design advances the plot
As technology becomes a bigger part of our lives, pop culture incorporates it more into TV and movies. The portrayal of technology is a reflection of where we are and where we want to go.
Because modern tech can provide too easy a solution for plot points, a lot of TV shows choose to be vague about the time setting, such as Netflix’s Sex Education, or find an excuse for their phones not to work, like bad reception or low battery.
UI/UX being an important part of the plot is usually a sign of good writing, as the story reflects reality and contemporary culture. The plot is adapting to its surroundings and not trying to make them disappear. When technology is taken out of the picture, the story feels less based in reality and can make audiences disengage. On the other hand, when technology is used as an important part of the plot or character development, it can help further immerse us.
Breaking Bad has a moment in season one that showcases UI brilliantly. Walt’s son, Walt Jr., creates a website to help raise funds for his dad’s cancer treatment. The designers specifically chose to make the website look amateurish.
The cheesy, repeating background, bad coloring and use of Comic Sans make for terrible UI, but, if it were a polished design, we wouldn’t have felt the sympathy we did for Walt Jr. in that moment, knowing he probably spent hours making it himself.
Another good example of UI/UX being important to a plot is in the Community episode App Development and Condiments. A social rating app called MeowMeowBeenz takes the college campus by storm and creates a societal ecosystem where your worth is decided based on your ratings.
But while the app is tearing Greendale apart, its cartoonishly goofy design and sound effects (little “meow’s” play when you’re given a rating) highlight how ridiculous the commotion around it is. By giving the app a silly design, the production is cuing the audience in to what the characters only learn later: The idea that you can be given a number to determine your value is ridiculous.
Sometimes, user pain points are meant to create hurdles for the protagonists in a story. Many movies feature the hero trying to download an important file onto a thumb drive while under time constraints. We’re shown several close-up shots of the progress bars over tense music, as they manage to download the files just in the nick of time.
Anyone can relate to the uncertainty and impatience felt when waiting for a process to finish and staring at a slowly progressing bar, often with wildly fluctuating wait times.
In an episode of Buffy, Willow’s frustration over a loading bar even tempts her to use magic to make it finish faster, despite her addiction issues.
The prevalence of this trope in the media shows that, for the most part, we haven’t done enough to address this pain point. Some products will show animations or flip through different photos or illustrations to keep the user preoccupied during the loading period, but the majority–and most glaringly, the largest–of products still hasn’t updated this outmoded element.
What can we learn from the way designs are shown on screen?
On screen, it’s the clear calls-to-action and focus on key UI elements that helps create a narrative. The same applies to UX design. The user should always have a clear call-to-action and not get lost in a jungle of features. Leveraging user stories, we can create narratives around the way users navigate our platform and focus the hierarchy of information to optimize that flow.
When we’re introducing new features to our product, we need to carefully think about where they fit best. It can be tempting to put a lot of things on one page, or stick them in an overflow menu, but we need to make sure the screen is clean and that the actions are easy to find when the user needs them. The minimal amount of content shown in TV and movies stresses how much information people can digest in a small amount of time, which is usually how long users take to try to understand products.
What makes the portrayal of sci-fi technology so appealing is how little friction the users have with the products. It’s rare to see a character struggle to figure out how to use a platform or make a mistake.
These stories show the ideals we should strive for in our relationship with technology: We want technology to help us when we need it and disappear when we don’t. We want interfaces that are smooth, intuitive and convenient to help us get things done with the utmost ease.
As designers, we need to keep evolving, learning, and being empathetic to our user needs.
We can learn how to better ourselves from courses, competitors, communities - and even movies and TV.
