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

Profile picture of Coren Feldman

{date}

{#hash1}

{#hash2}

Illustrations by {name}

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

9 min read

3D visual of a polygon head and various graphs

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. 

Get our latest stories delivered straight to your inbox →

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.