Heads Up! Designing Meaningful Car Windshield Displays

Eight design principles inspired by eight student projects on the future of car head-up 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:

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

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
BMW — This HUD not only displays the speed, but it also is a visualization of the hybrid motor’s status and activity. © Patricia Dobrindt, Simon Martin, Jakob Flemming

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

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

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

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

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

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.
We invite you to comment on our thoughts and on the designs.

Thanks to our students for their excellent work:

Christian Franke, Sebastian Prein, Lennart Ziburski

BMW (https://vimeo.com/120584602)
Patricia Dobrindt, Simon Martin, Jakob Flemming

Cécile Zahorka, Fabian Archner, Sebastian Kaim

Dominic Rödel, Laurids Düllmann, Phillip Steinacher

Mini (https://vimeo.com/119888575)
Kien Nguyen Canh, Moritz Kronberger

Mercedes-Benz (https://vimeo.com/121184435)
David Rehman, Michael Dietz, Thomas Petrach

Citroën (https://vimeo.com/121346315)
Marie Claire Leidinger, Jonathan Jonas, David Brandau

Constantin Eichstaedt, Steffen Gabel

Frank Rausch and Timm Kekeritz teach design of user interfaces at Fachhochschule Potsdam and at the Copenhagen Institute of Interaction Design.
They run Raureif, a Berlin-based design consultancy.

* Our brief to the students was to focus on the current and next generation of driver-centric head-up displays — meaning that we allowed no overly futuristic Iron Man holograms, no esoteric edge-use cases for niche markets. Instead, we asked for usable, realistic projections that convey the right amount of valuable information to the average driver on average roads. The only liberty we took: we assumed a slightly larger projection size than what’s currently on the market. While current HUDs feel iPhone-sized, our hypothetical size limitation was iPad-sized, or even larger for certain slim aspect ratios.

Raureif is a design consultancy — the industry experts for user interfaces on any screen. We also make nice apps for iOS.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store