User Interfaces and experiences from cartoons | Subsign

Did you know Dexter from Dexter’s Laboratory used a smartwatch?

Or that The Jetsons were already using curved Smart TVs?

Cartoons were a part of our childhood, but if we look now, we can discover similarities with what’s trending today in UX/Product Design.

This was my intention when I started the IG series. At first it was just one cartoon, but I managed to reach a 6-part series (for now) covering Dexter, Jetsons, Wille E. Coyote, Dragon Ball Z, Johnny Quest and Batman.

Now older and (hopefully) wiser when I go back and watch an old cartoon, my mind automatically depicts a certain pattern or idea that it’s being used in the present day. For instance, it was funny and easy to observe that Dexter relied heavily on a Voice Assistant (Computer! Locate Dee Dee now!), or that he used layers of security clearance such as voice or face recognition (the cartoon equivalent of FaceID).

As you go through the show it was interesting to see other equivalents. In one episode you can see a virtual ToDo list on one of Dexter’s screens, and on another episode you can see him wearing a smartwatch equipped with a full color screen, physical buttons, location tracking and audio input (microphone).

With each show you can identify a certain pattern or technology, each looking like circling around a specific theme. For instance, when exploring The Jetsons the main theme could be that of a smart home. In the show’s episodes we can see a central hub that controls their home using roomba-like robots to clean the house, or asking Rosey (their robot assistant) to help out.

Moreover we can see The Jetsons enjoying their shows on flat curved smart TVs. How can we tell that they’re smart? Well, in another episode, George browses the newspaper on it. Even more interesting, they use video calling as a means of communication at home or at work predicting apps like Skype or Zoom. Imagine, this show was made in 1962 and predicted a lot of 2020 trends. Of course, The Jetsons also used smartwatches with both video and audio input, and some of those devices had controls similar to Apple Watch’s Digital Crown.

Other shows such as Dragon Ball Z or Johnny Quest highlighted AR & VR tech. The scouters in DBZ were used in battle in order for Saiyans to gain advantages against their opponents. Their headsets were using a transparent screen to display the UI. It had face & body recognition, map previews & location tracking. More importantly it has its own UI language and with help from the great Reddit community we now know that the UI notifies the user on all interface state changes (errors, warnings, loadings etc.).

On the other side, in Jonny Quest their VR devices and software are represented as Questworld. To access this VR world, Jonny and his friends use a headset and a central hub. Controlling Questworld is done via a series of keyboard inputs and voice commands. In Questworld users have their own 3D avatar where they can explore the world and communicate via a Voice Assistant called Iris (funny because it’s Siri backwards). There is also a portable version of the hardware where the image is projected from the laptop to the visor. It can be used while being remote or on the move. I wonder if this was the inspiration for Oculus Quest. The recurrent use of Questworld throughout the series is that of game simulation where users can train for different scenarios. Users can download or activate various items such as vehicles or weapons.

As much as Sci-Fi Jonny Quest was, there are other shows where technology was a bit more down to earth. For instance in Batman — The Animated Series you can observe certain particularites of UX Design in the Batcomputer’s interface. Batman interacts with his computer using keyboards, panels and switches. Each button has a clear label and it highlights when pressed. Batman can access the newspaper archive and he can display the content on multiple screens/windows just like in MacOS or Windows.

Moreover, Batman also has an AI assistant nicknamed “Computer” and can interpret full sentences. To use it, each of Batman’s sentences start with “Computer!” just like you would say “Alexa!” or “Hey Siri!” or “Ok Google!”. Moreover, Batman has several peripherals integrated with his computer (examples: phone, printer, 3D scanner, VR headset) and some can sync with his vehicles like the Batmobile. In terms of UI, Batcomputer’s interface is text based when it comes to commands and navigation (with actual blinking “cursor”) and can display full visuals as it relies on both 2D and 3D data visualization (renderings, vectorized sketches, map views etc.)

With this shows I’m just scratching the surface, UX similarities span a large palette of cartoons if you put your mind to it — for instance even in Looney Tunes we can see Will E. Coyote acting as a Product Designer: he sketches, he prototypes, he learns and iterates. Imagine what can we find out from shows like Swat Katz, Flinstones, Simpsons and many more.

Curious to see all the insights? Head up to @uxrecipe on Instagram, dive into each carousel breakdown and discover how animators and producers thought interfaces should look like before UX was more than a trend.

Alecsandru is an independent UX & Product Design consultant with 9 years of experience that helps start-ups and software companies shape the right products for their users & customers. In his spare time, he works at his side project — UX Recipe — a collective of Instagram design posts, Youtube design videos and a design process & estimation app.

Originally published at https://subsign.co on August 31, 2020.

subsign is an awarded digital agency. We create marketing strategies and content that bring real business results.