Hud design

The response to our forum thread (Click here to Read) on the new UT HUD has been incredible. We have had so many great submissions that we felt it important to create a page that could act as a roadmap in going forward. Some general things to take in to consideration:

1. Overwhelmingly we feel the HUD breaks down into 3 columns with the left being for system / player messages, the center being the critical game information and the right behind weapons and specific game information. Out of them, the center zone is most critical and should be the most visible.

2. We were pretty split with chat on top and bottom but we mostly felt that they belong on the left side of the screen.

3. The health and armor should be centered bottom and go Health on left, Armor on right and most of us liked the icons for health/armor to be used as a separator between the numbers.

4. A vertical weapon bar, orientated closer to the bottom of the screen is the way to go.

Let’s dig in to a couple of the HUDs posted. Please understand, if your particular HUD isn’t shown here it only means it wasn’t far enough along in the direction we wanted to go. Some of the HUDs posted really moved to far towards an arcade heavy look or were too busy. We found something we liked in each of these HUDs and I’ve listed it as a “takeaway”. Anyone moving forward should try to incorporate this into their designs.

Finally, just because this is the direction we want to take the default HUDs of the game, let me again strongly encourage everyone doing mockups to keep them in mind for the marketplace. Hopefully it will be easy if you to create alternate HUDs.

Blip's HUD

Takeaway: Visual clarity of background elements.
Out of all of the HUDs, the border and backgrounds of all of the widgets here are exceptionally clean. Many of the HUDs had a lot of extra graphical bit that didn’t add anything to the design. There are some inconsistencies though, some of these widgets have harder edges, some have thick highlights.

Notes: My biggest note here about the emphasis of the information provided. For example, this is the AMP indicator:

It’s a whole lot of wasted space for such a critical bit of information. We do like the use of color to tie it together, but the text and the icon needs to be the focus here. Same with the upper scoring widget.

The K is invisible, I had to tell everyone looking at this on an 11 foot screen it was there, and we don’t feel that “K” reads as “kills” to a new player. Also by matching the clock size to the kills and placement, you de-emphasize everything. The leaderboard’s flat shading on the numbers makes it hard to read and the arrows don’t seem to make sense. Icons like that need to be immediately identifiably. Finally, the weapon bar serves no purpose.

Dementiurge HUD

Takeaway: The use of space with the critical information.
This HUD has the best use of the empty space (or lack thereof) around the critical number displays. Contrast this against Blip’s above where the numbers and information failed to fill their space. That said, be careful to make sure the widgets can support the information they display. For example, the spacing on the score widget is very tight and wouldn’t support "999".

See, the numbers fill the widget and are easy to read.

Notes: My biggest problem with this HUD is the visual noise. There is a lot of little information bits that do not seem to have an important purpose (the +5s) or that convey information, but don’t read well initially (the groupings). It also has a horizontal weapon bar which while we may support at some point, we don’t way to see mock ups for right now. Finally, some color to make the information pop as well as differentiate between say health and armor would be great.

HenrikRyosa's HUD

Takeaway: Reinforcing information through icons and colors.
The biggest takeaways from Henrik’s HUDs are his reuse of things like the weapon icons. We also like this paperdoll.

Notes: Overall the team didn’t like the feel of your widgets as we feel less is more. Also, like many of the HUDs, you leave you too much white space in the critical displays (health/ armor). For example:

In this display, your # height is 35 pixels surrounded by 45 pixels of dead space. That’s a lot of unused space and makes your information harder to read. Between all of your concepts, we really feel that a horz. Weapon bar, especially one in the bottom corner won’t work with 10+ weapons. One thing we did like however was the size/positioning of your chat portrait.

Maria's HUD

Takeaway: The simplicity of the information.
For the most part, Maria’s HUD is the simplest to read, using background plates only when needed not a lot of pointless bits.

Notes: However where you try to be creative in your layout, it gets confusing. Your weapon bar and health/armor read great but this:

This is hard to read. Simple changes like adding a “nd” to the “2nd” place indicator or some coloring might help. I do like how these widgets seem to connect but be careful of spacing as your name and score indicators look like they will be tight. You can’t fit 100 kills on that indicator. We also like the simple nature of your weapon bar.

Piemo's HUD

Takeaway: Clear vertical weapon bar.
By far the cleanest design for the weapon bar yet, but not perfect. The general consensus is that building the bar graphs into the background plate doesn’t read well.

Notes:

Let’s start here. This widget is a good example of unneeded noise that actually distracts more than it helps. The idea here I suspect is to help make each message stand on its own. The end result though is just this big block up in the corner. I think it would be much better served if you lose the background and use slight color variations to split up the different messages. Also, the symbols on the ends don’t read at all.

And your leaderboard widget needs to emphasis on score.

Sly's HUD

Takeaway: Great leaderboard and great use of coloring.
Utilizing the Gold/Sliver/Bronze coloring in the leaderboard is very smart and it’s continued elsewhere (health/armor icons, 5 minute warning, etc). Be careful though, the orange in the armor and boots should match the orange in the shield display.

Notes: You had one of my favorite weapon bars that took the simplicity of Maria’s but had better grouping but the art is a little rough. And the numbers that are associated with the group needs to be visible on groups not active. Also, we don’t really want to show non-critical information on the HUD (even though the current one does). So I’d remove the deaths.

General Thoughts

A lot of these HUDs don’t take size of data into account.

For examples:

and

Both would fail displaying “469”. These need to be taken into consideration.

Judicious color use.

and

Looking at these 2 examples, the one on the left is much easier to read. While the one on the right forces the eye to work more. Use of color should have a purpose and help accent the information. Also, be consistent. Most of the information on Dementiurge’s HUD is white, so at least the numbers for his powerups should be white as well unless the color really helps clarify something.

But color highlighting for the health/armor is important.

Here are two examples:

A:

B:

Notice how the colors match and immediately you know which # represents the armor of the paper doll. Speaking of which… health --- then armor

Weapon grouping is already a pretty complex element, let’s not overthink its display.

Here are two images for Sly's HUD:

Similar in the information that’s being displayed, but one is simple, one is overthought. KISS is important here (Keep it Simple Sucker).

So, where do we go from here!

The Battle’s done and we kinda won so we sound or victory cheer?

Almost! The next step is to take these notes and ideas and take the next step. We need layouts for DM, TDM and CTF. Hopefully this has given you a good deal idea of what we are looking for. While I’ve called out a few artists and their designs here, I encourage anyone interested in mocking things up to do so. We still haven’t gotten to where we need to be but we are moving in the right direction.