Designing a *functional* futuristic user interface
Are you a fan of the floating blue graphics that Tony Stark casually flips through in Ironman? Do you drool over those futuristic screens that Tom Cruise uses in Minority Report, or pretty much any interface that crops up in sci-fi films these days?
Designing a FUI that is actually functional within a real product—while maintaining that sexy aesthetic—is like a holy grail in UX. As a user experience designer at tech startup Domo, I learned a few things while trying to make an FFUI. (That’s a functional futuristic user interface—trying to make it a thing.)
I. FUIs and HUDs are about power and mastery
In movies, when characters use FUIs and HUDs they are perceived as hyper-intelligent and powerful. Navigating a complex UI and synthesizing large amounts of data is almost a superhuman ability. These characters often embody an ideal future world where human intelligence has accelerated or been scientifically enhanced.
But the current reality is that these characters are fictional, and the interfaces they use are typically constructed after filming to match characters motions. While the UIs may look complex and advanced, they often aren’t practical or functional.
Describing the process of working on graphics for Ironman, John LePore said that “…we’ve had the opportunity to create an FUI underneath Robert Downey Jr.’s fingertips. He’s great at improvising and moving his hands around with certain gestures and interactions, which, ultimately, for us is a little bit challenging. But it ends up dictating how the interface itself is going to be laid out, because he’s already performed these actions.”
That being said, UX designers can still take cues from the FUIs and HUDs portrayed in film. There are visual elements and styles that can be used to create a powerful and functional interface.
II. Aesthetic
HUDs and FUIs tend to have very similar styles—with a few notable exceptions. (Looking at you 2001: A Space Odyssey.) The overall visual elements, typography, data visualizations, and motion contribute to a futuristic aesthetic. This palette is used repeatedly in films as a kind of visual shorthand that the audience interprets as high-tech, complex, and powerful.
III. Functionality
In film, every set piece, costume, FUI, and HUD is designed to support the story and characters. With our own dashboards, we should have a clear goal of what needs to be achieved, with each element and chart designed to support that objective.
Boredom vs Anxiety
When designing a data-heavy user interface, it’s important to strike a balance between boredom and anxiety. When an interface is too simple or dumbed-down, a user may feel bored and disengaged. When an interface is too complex and technical, users may become overwhelmed and anxious and choose not to engage with the visualizations at all.
If an interface strikes a balance between boredom and anxiety, the user enters a state of flow. Flow makes a user feel powerful, in control: like their intelligence is being augmented.
Screen size
One major element that can feel out of control is screen size. UIs should work on a variety of desktop sizes, tablets, and smart phones. Design needs to be modular and flexible while still showing the appropriate amount of data.
Function vs Aesthetic
Be mindful of the tension between building something that is functional, versus a product that only has the desired aesthetic. User interviews, user testing, and thoughtful onboarding can help keep the product functional, while maintaining a futuristic aesthetic.
Consistency vs Novelty
When designing multiple charts, graphs, and screens for an FUI, we will need to find balance between being consistent with data visualizations and visual novelty. Consistency can get boring; showing the same type of chart for similar sets of data can be visually dull if overused, but is quicker to digest and understand. Having different charts is visually stimulating, but takes more time for a user to read.
In summary, functional futuristic user interfaces should 1) help users feel powerful, 2) have an appealing aesthetic, and 3) maintain functionality. When designed with these principles, these interfaces can actually be useful, and not just for the movies.
Want more futuristic inspo? I’ve got a Pinterest board full of inspiring FUIs.
