jhanacek.net

Design

HUD Design Considerations
HUD Design Considerations

John Hanacek

Background

As a designer of XR software I have worked with Heads Up Displays for Head Mounted Devices. Specifically during my time with BadVR I worked on applications for Microsoft HoloLens 2 and Meta Quest 2 that utilized Heads Up Display to show information and help users find strong wifi signals, and manage situational awareness of sensor networks. I also led a project in the Chariot Challenge creating a first responder decision support system called A1R (example below).

I learned hard lessons about the difference between designing real HUD systems for active use, and the stuff we see in movies. Let’s explore what makes a useful system and what to watch out for.

Designing A Useful HUD

To design an effective Heads Up Display (HUD) it is essential to know why the HUD exists, what it is trying to enable the user to have awareness of, and what the cost for distracting the user can be. Look to actual aircraft and real systems rather than movies, as the challenges of heads up displays for actual headset computers are magnified.

“Visual Complications”

Aka ‘Information vs chrome’

Look at movie example below from Iron Man. How many elements draw focus away from world in view and how many support focusing on the world? Note the large amounts of animation in extreme edges of the view.

⁠

⁠

Then consider the bottom example from the Iron Man VR game. Note the stability of the hud information and the emphasis on focusing out in the world. Notice that animations are used in central view more than the HUD itself.

⁠

Unlike a movie HUD, a real HUD is not primarily a visual element but rather an informative element helping a user pay attention in specific ways based on what their role or profile is.

In a movie, the HUD interface is trying to visually engage the audience and achieve storytelling. However, in a useful HUD the interface is there specifically for the user and any visual aspect should support what the user is trying to do, or what the system needs the user to know.

Relationship to user attention

Consider:

Who is looking?

Why?

Changes Over time, good and bad

⁠

Credit: Microsoft

Field of View ← Information density ÷ Device abilities

Example: Hololens 2 has a 0.8 x 0.5 meter FOV at 1 meter away with a .02 meter offset upward

Design for the actual field of view of the devices you are targeting.

Level of connection to world

Level of utility

Consider the heads up display of an F15 fighter jet. The Pilot must stay mindful of basic aviation, combat aspects and make strategy all while keeping their focus on the world of flying the aircraft. A HUD like this is not perhaps immediately ‘intuitive’ yet each element has a specific utility and is grouped logically with related aspects. One glance to a seasoned user will give them all the state they need to work the situation.

So consider what utility your HUD is providing, and consider making it worth it for a user to have it overlayed on their world. Let them improve their reading of it until it becomes a kind of perception that adds to reality (or your game world).

⁠

Example - A1R

Worked with a small team to create A1R for Magic Leap 1

⁠

The magic leap 1 has a 50degree field of view, so it was essential to bring enough information to the periphery while not cluttering the center of the view. Each type of information has a region, and repeatable areas to look. Eye tracking was utilized for hands-free selection, with timing used to avoid false positives.

⁠

⁠

Primary interaction modes: eye-gaze and controller

Move your eyes around the HUD ‘hot zones’ to access more information. Bottom left and right are personal and weather information (respectively), top left is messaging area (non-interactable in this system), and top right is a show/hide overlays button.

To show and hide the world-scale overlays look at the button on the top right and hold gaze there for one second. To change again, look away then come back and gaze for one second again.

To place a ‘sign post’ use the controller. Push the touchpad until the four icons appear, and while still pressing the touchpad move your finger to the desired icon, then press the trigger to place the marker.

Watch out!

Here Be HUD Dragons

Animated elements

Users are wearing your UI on their face!

This isn't a movie, it’s real life!

Recommendation: Dial animations to 0 and work up, don’t start with any.

⁠

⁠

Color

How will my UI work against unpredictable real world color?

What do colors mean culturally?

What colors are different headsets/screens best at rendering visible?

UI ”Chrome”

WTF is relevant to my task? How to show that in a minimally intrusive way?

Only show useful graphics

Consider why any shape is there

Try to enhance legibility of your core message, not show lots of frame.

⁠

⁠

Credit: Edwart Tufte

⁠

HUDoverview.pptx

⁠

Background

Designing A Useful HUD

“Visual Complications”

Relationship to user attention

Field of View ← Information density ÷ Device abilities

Level of connection to world

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

HUD Design ConsiderationsHUD Design Considerations

Background

Designing A Useful HUD

“Visual Complications”

Relationship to user attention

Field of View ← Information density ÷ Device abilities

Level of connection to world

Level of utility

Example - A1R

Watch out!

Animated elements

Color

UI ”Chrome”

HUD Design Considerations
HUD Design Considerations