Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I notice one thing common in HUD software, and that's the line-ish (thin line bordering, line pointing), semi-transparent UI they have. Even some icons are outlines of the actual thing. Haven't tried Google Glass, but the UI seems to be similar according to the pictures.

  • Where did it come from? What drove this type of UI design?
  • What's the UX behind it? Google uses it, so it has to be good.
  • If they are HUD, shouldn't they be a bit opaque to clearly see them? Wouldn't lines be almost invisible in contrast to the real world imagery?

I remember our systems design instructor did say "The UI should be transparent to the user, as if it weren't there." (UI should be intuitive and dead-easy), but this HUD UI took it literally.

Google Glass

Google Glass

Iron Man

Iron Man

Minority Report

enter image description here

Mass Effect

Mass Effect

Halo

Halo

Strike Vector

Strike Vector

share|improve this question
3  
"Google uses it, so it has to be good." - I wouldn't be so sure of this, by the way. Google does lots of good work in this area, to be sure, but they're not infallible. –  Hecksa Feb 24 at 10:06
    
@Hecksa I never said they always did the best, but they don't just roll out stuff and hope it works. There must be a reason (and a good reason) why they chose it as well. –  Joseph the Dreamer Feb 24 at 10:11

4 Answers 4

up vote 3 down vote accepted

Why Do Fake HUDs Use Wireframe?

Your examples from games and movies are imitating the original HUDs –those for military and (later) commercial aviation. My guess is they’re doing it merely as a matter of style. “Real” HUDs use thin-line wireframe symbology, so make-believe HUDs do just so they look authentic, without any serious consideration for usability.

Why Do Real HUDs Use Wireframe?

Aviation HUDs, such as those produced by Rockwell Collins, use wireframe because what’s happening (or could happen) out the window is almost always more important to notice than what you’re showing on the display. As aviation HUDs became more sophisticated, and showed more symbology, there were cases of HUDs “trapping” the pilots’ attention, leading pilots to not notice something important out the window literally right in front of their eyes (something like the ground getting really really close). The seminal research by Fisher, Haines, and Price (1980) demonstrated that HUDs can actually slow pilot’s reactions to out-the-window events, contrary to intuition. In their simulator study, a couple pilots landed their planes on top of another plane without even noticing it!

Among the solutions for this phenomenon was to minimize the visual clutter –make the symbology with as few pixels or phosphors as possible. That meant, among other things, going with thin faint lines. HUDs so designed improve reactions to out-the-window events.

Should All HUDs Use Wireframe?

So, should HUDs in non-aviation contexts use wireframe? In your examples from Mass Effect, Minority Report, and (I think) Iron Man, no. There is nothing happening behind the display the user has to watch out for. The wall is not going to lunge at the user. In fact, for usability purposes, the displays shouldn’t be transparent at all. They’d be easier to read it they weren’t. It’s only there to evoke a futuristic military ambiance. Also, I believe, sci-fi movie makers love HUDs because the audience can see what’s on the display and the character’s reaction to it at the same time. It’s for the audience’s benefit, not the character’s.

Google Glass is different. It’s intended to be used while you’re walking (or skiing, kayaking, or, dare I say, driving). As in the case of aviation, what’s happening beyond the display is usually more important than anything Glass is showing you. Knowing the length of the Brooklyn Bridge is not nearly as important as knowing you’re about to collide with it.

Both proper use, and non-use, of wireframe is an application of the same basic usability principle of proportional display: Making the most important information (real or digital) most obvious, even at the expense of less important information.

share|improve this answer

In instances like Augmented Reality seeing where you are going is more important than the program's notifications and feedback. Thin fonts and transparent backgrounds allow it to fade into the background when you aren't focusing on it, and allow you to focus on whatever you're working on. An anecdotal point, I know in games it's a pretty big competitive edge when the HUD doesn't count against screen space.

In response to that I believe it's applied in a cargo cult fashion where it looks pretty. Ex: Minority report, the wall is not important to look at. In Iron Man, it floats in the middle of the room, allowing for you to talk to a person through the screen, dubious cost/benefit, but at least there is one.

Of course in movies it provides benefit of showing the cool stuff the protagonist is doing, WHILE showing their face and conveying their emotion as they discover new information.

share|improve this answer

Where it came from? / What drives it?

It was in the late 60’s that researchers started to describe how and where people interacted with technology. However, it was not until the early 90’s the term augmented reality (AR) was coined, when airplane manufacturer Boeing started using augmented reality goggles to assist engineers in the airplane assembling process.

Wearable tech and HUDs promise users access to online resources always and everywhere. This flexibility makes possible a new kind of application — one that exploits the user’s surrounding context. This type of location aware computing allows us to link the real world that you see with a layer of virtual information. This trend has literally allowed us to move towards annotating the user's view of the physical world. Through optical or video-mixed see-through displays (i.e. Google Glass), the user views the electronic information in situ, attached to the physical world.

What's the UX behind it?

As mentioned, real objects or physical space are the foundational canvas for these interfaces, and UI is incorporated that add contextual data to deepen a person’s understanding of the subject. One key factor is that these experiences exploit the power of human vision and spatial cognition. The overall user experience goal is to allow the interfaces to show support information based on your current visual context.

Complex tasks such as assembly, maintenance, and surgery can be simplified by inserting additional and useful information with AR technology. Some complicated repair work could depend entirely on AR information to support while the work is being done.

If they are HUD, shouldn't they be a bit opaque to clearly see them? Wouldn't lines be almost invisible in contrast to the real world imagery?

In regards to the in-place movie HUD's you showcased, those are largely eye candy. Keep in mind that these fantasy interfaces are usually viewed as a way to communicate to the viewer that the actor in question is interacting with some form of information. Showing a screenshot of the actor working on a computer, or a shot from their rear is not as visually arresting, nor as "fantastically technical" looking.

A proper execution of a HUD would integrate some form of opaque background while interacting with the interface. In instances where the user needs to interact with something in the real world, the opaque nature would drop out, showcasing the user's real world context.

In real world instances, the information provided from an AR interface is secondary and supplementary.

On Google Glass, UI screens that are managing the device have completely opaque, black backgrounds. Most interaction with the actual device itself is handled this way to increase readability and usability. When you are interacting with the real world, the UI is largely nonexistent except for a few small visual queues. Glass also supports what they call Immersions, but these are largely reserved for when you want to take precedence over the timeline and display a UI outside of its context.

Typography is executed in extremely light weight font. This is due to the distance from your eye (your retina needs less line weight and density at these resolutions). The primary characteristic controlling visibility is the light balance of an interface item.

Sources:

The Visual Web User Interface Design in Augmented Reality Technology

Google Glass Design Principles

• I'm a Google Glass Explorer

share|improve this answer

For movies such as Iron Man or Minority Report, this UI basically just looks "cool". I'm pretty sure Tom Cruise would be able to interact with his device if it were opaque. And I'm not sure Gwyneth Paltrow can read her screen very efficiently.

For video games like Halo or Strike Vector, the HUD's transparency is a feature. It both provides useful information that needs to be accessible at any time, but the transparency prevents cluttering the viewport too much. The information is there when you need it, but doesn't get in the way.

Other example: the radar in PES.

enter image description here

It's amazing how even a little amount of transparency can help visualize what's happening behind and around.

For Google Glass, the information displayed is usually related to the context in which it's displayed. The visual elements that you can see through the transparent HUD are relevant.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.