Heads Up! Designing Meaningful Car Windshield Displays
We’re living in the future: modern cars are quickly moving towards the feature sets that spaceships had in science fiction shows. One of the most interesting developments in recent years is the appearance of head-up displays (HUD) in mass-produced cars. And while the technology is stunning, the UX and visual design don’t seem to be quite there.
We would like to show you a few HUD designs from the user interface design class that we taught this year at Fachhochschule Potsdam in Germany. In our weekly discussions and design critiques with the students, we have gained a tremendous amount of new insight and perspective on in-car UX design.
We’ll share the key findings and the design mockups in this article.
Based on our briefing*, 25 students created near-future concepts for eight specific models from these manufacturers: BMW, Citroën, Lexus, Mini, Mercedes-Benz, smart, Tesla, and Volkswagen.
Even though this list represents a wide range of styles and target groups, the basic parameters and needs of a human driving a car do not vary much. So a few patterns emerged that are common across brands and drivers:
1. Visualization > Numbers
Speed and speed limit are easier to recognize and understand when shown as a graph as opposed to in plain numbers.
smart — the speed is visualized relative to the current speed limit. © Cécile Zahorka, Fabian Archner, Sebastian Kaim
Citroën — the circle around the map is a visualization of the speed. When the two thick half-circles meet at the top, the speed limit has been reached. Video prototype: http://vimeo.com/121346315 © Marie Claire Leidinger, Jonathan Jonas, David Brandau
VW — The abstract graph represents the relationship between speed and speed limit. © Dominic Rödel, Laurids Düllmann, Phillip Steinacher
Lexus — the speed is visualized on a horizontal line. The speed limit stays at the line’s center. When going faster, the graph fades to yellow and the speed line gets thicker. © Christian Franke, Sebastian Prein, Lennart Ziburski
2. Redundant Information, Different Presentation
The HUD can contain information that’s redundant to the dashboard, but this information should take a different shape so that it’s optimized for the windshield.
Tesla — The Tesla HUD shows a simplified version of the dashboard’s speed meter. © Constantin Eichstaedt, Steffen Gabel
3. If It’s Not Indicating Something, It Shouldn’t Be There ( — Jony Ive)
Every time something is projected on the windshield, it has to be something that matters. Superfluous information or decoration clutters the view on the real world, distracts from the essential driving information and from driving itself, obviously.
smart — The navigation hint only appears just before making a turn. Permanent information (e.g. ETA) is intentionally left out of the HUD. © Cécile Zahorka, Fabian Archner, Sebastian Kaim
4. Blurred Can Still Be Legible
Especially on a HUD, everything must be designed for maximum contrast and clarity. An ideal HUD can be read even when it’s out of focus.
Mercedes-Benz (left), VW (right) — even if the UI is out of focus (blurred), the important information (driving too fast) is still discernible. © left: David Rehman, Michael Dietz, Thomas Petrach; ©right: Dominic Rödel, Laurids Düllmann, Phillip Steinacher
5. A Projection Is Not a Display
There is no way to project black, obviously. But there are more limitations to consider on a HUD, where the background is the real world behind glass, sometimes bathed in bright sunlight.
Mini — this concepts features a menu selection for navigation, phone, and music. This example illustrates the challenge of having a permanently projected menu on the windshield. © Kien Nguyen Canh, Moritz Kronberger
6. The Car Should Not Patronize the Driver
Our informal research shows that many people take it personally when the car tries to enforce the speed limit or other traffic rules with obtrusive warnings or blinking messages.
So, for example, it’s better when the HUD provides a smooth escalation from a gentle hint to a serious warning with increasing speed. It’s obtrusive or even offensive when there’s a hard threshold that doesn’t have any built-in speeding tolerance.
Mercedes — The more the driver exceeds the speed limit, the more red circles appear around the speed indicator. Video prototype: http://vimeo.com/121184435 © David Rehman, Michael Dietz, Thomas Petrach
7. Hardware Prototyping of HUDs Is Hard but Hackable
The complex mirror system that simulates projection distance and the special single-reflection windshield in consumer car HUDs are hard to prototype.
Our students came up with simple solutions that do not provide the illusion of depth like real HUDs, but still manage to simulate the projected qualities of graphics and text on glass in a convincing way.
A great prototyping hack to test reflection in front of moving images: Placing an iPad with the mirrored HUD mockup under a tilted MacBook screen that is showing a driving video from YouTube. © Raureif GmbH
An iPhone taped to the dashboard under the windshield. Great to validate font sizes, animation intensity, and peripheral vision. There are even some commercial apps (like Hudway or Sygic) that are based on this principle. Image: © Sygic.com
8. Most Icons Need Labels
Cryptic icons have a long tradition in car dashboards. “What does that red light with the triangle mean?” But in dynamic, software-generated UIs the localization of text is not an issue, so adding clear labels is perfectly feasible and can help flatten the learning curve.
A rare icon like the one for “Steinschlag” (rockfall) in the VW HUD would not be understandable without a label. Even the “low battery” icon in the Tesla HUD profits from a clear English caption. © left: Dominic Rödel, Laurids Düllmann, Phillip Steinacher; right: Constantin Eichstaedt, Steffen Gabel
Obviously, this little collection of random findings is just a fraction of the things to consider when designing a HUD. Since cars will be stuffed with more and more features aimed at the driver (car apps are on the horizon), we hope that car manufacturers don’t forget to polish the basics for confident and safe driving before adding further complexity.