I have a game in progress, and I'm at a point where I need to give serious thought to the HUD.

I have some ideas on this already, but I'd like to ask an open question:

How do you design a HUD?

Do you have certain rules or ideas you follow? Can you express why a HUD worked really well in a particular game, or why it was particularly bad?

My primary ideas going into this are:

- Function over Fashion

- Common placements where applicable (don't hide what the players need)

- Prefer Game Interaction over Hud when reasonable.

So what do you think/do?

Thanks.

(Additional note: My question is intended to be generic, but for more specifics, the game is a 3d web based city builder for humans. Time range is mixing techs from the Dark Ages (cobble/wood buildings) and Futuristic military techs (Laser cutting arms, tank factories))

I'm no expert in hud-design, but have been tinkering a little with web-design and sc2 modding where interface design became an important part. Here are my experiences:

1. Make text hiarchy/list of all features you would like to provide to the user.
2. Organize them according to how they would appear on the interface (resource menu, map menu, buildings menu). This can be used as a checklist later on.
3. Choose a color theme and fonts. Refer all in-code formatting and mashup editing to this. Its a bit tedious to link everything but pays off very quickly. A simple thing like poking the hue a tiny bit late in the development process is great! No hard-coded formatting!
4. Make a wireframe of the screen in paint or whatever and show it somewhere where people are interested in interaction and get some honest responses.
5. Make mashups in vector program. Scale stuff to get a quick idea of how it would look like in different screen resolutions.
6. Print it/draw it on paper and play around with it using your fingers!
7. Make a "mathematical" mashup: make a mashup but write into it all the little margins/distances/anchor-points etc. and other variable elements. This helps quite a bit when you convert the sketches into organized code. Like the formatting - avoid hardcoding margins etc.
8. Think through which elements are reoccuring and consider making classes etc. out of them for easier creation/design/interaction linking. This will also save you some time since you can reuse graphical elements.

• Placement: try to use established formats (Starcraft, Sim City, The Sims)
• Game interaction/Hud interaction: beginners will want to have nice buttons, experienced players will want to use hotkeys.
• Design it for function first, but make all the formatting reachable from shared variables and image resources.
• If single player - make space button pause the sim.
• Find a design pattern for UI-design in the language you are coding in.

I would constantly brainstorm, don't go for anything cool or flashy you know? If you're maing a racing game have the speed/MPH etc (sorry not a car person). If its a city buldier say like sims have the tools on the screen I would say the bottom going left to right. You could do it like Tony Hawk's park editor have each item in its own class.

ie Windows: you have cracked windows, windows with bullet holes, or a dusty window.

For my game, which is a 3rd person survival horror game.

I'm keeping it real so I might add like 1 or 2 things but for the most part it will be like resident evil 3 and earlier ones where there is no type of hud.

Thanks. For now, I've decided to only add the resource counters and alerts to the hud (+ 1 general menu button to bring up exit/settings/etc...). Everything else will happen from 3D menus popping off of the objects or map from right clicking. As I find I need more things on the HUD/GUI, I'll start adding them and modifying the GUI to cope with any growing needs.

Nothing till I need it. (this is for a 3D web-based city builder game)

I've had 3 HUDs throughout the life my game due to poor planning, here are my lessons learned:

My first HUD one was very cartoony, and just didn't match the look and feel of my game. Make sure your HUD graphics match the theme of what you want your game to be.

My second attempt was more fitting for the style of the game, but took over way too much of the game's screen real estate. Don't dedicate much screen real-estate to your HUD. Making it translucent can be nice too in some cases so you can still get some view of the obscured areas.

My current HUD is very simplistic and designed to obscure as little screen real estate as possible. Light translucency is used so you can always still see what's behind the HUD.

Use animated touches when things in the HUD change. For instance in my game the new weapon icon appears larger at first and shrinks back to normal size over about 1 second. Somehow this small effect makes the weapon changing experience much better. Health meters don't instantly change, but rather the lost health turns yellow and shrinks at a linear rate. While a city builder has neither health nor weapons, I'm sure there will be parts of your HUD that can be enhanced with a simple animation.

I've attached a screenshot showing the 3 HUDs

i would let most of the HUD ( and UI ) be optional, as in the player can go to options and decide what he gets to see and where.
(i m not sure why this isn't done in most games, since it sounds logical to me that a designer can't guess what the players prefer if different players prefer different things)

use your primary ideas for the standard-set-up ;)