In my previous post on what makes a game great, I talked about immersion and its effects on gamers. For those of you who didn’t read the post, here is a brief recap. One of the key elements a great good is that players no longer feel they are playing a game. They become completely immersed in the story, feeling as though they are actually there. There are many ways to create this feeling of immersion: Storytelling method, dialogue used, setting for the game and the soundtrack. However, user interface is the key to the success or failure of a game. A successful user interface starts with a well designed and implemented Heads Up Display system (HUD).
Now one might ask how a HUD system can affect the quality of a game. In order to answer, we first must understand the purpose of the HUD system. The HUD is the method by which information is visually relayed to the player as part of a game’s user interface. While the information that is displayed on the HUD depends greatly on the game, there are many features that players recognize across many games. Common features include:
- Health / lives – this might include the player’s character and possibly other important characters, such as allies or bosses. Real-time strategy games usually show the health of every unit visible on screen. Also, in many (but not all) first- and third-person shooters, when the player is damaged, the screen (or part of it) flashes briefly (usually in red color, representing blood) and shows arrows or other similar images that point to the direction the threat came from, thus informing the player from which direction the enemies are attacking.
- Time – This may be a timer counting down the time limit of the current turn, level, round, mini-game, or mission, the time left until a specific event. Or, it may be a timer counting up to records such as lap times in racing games, or the length of time a player can last in games based on survival. Many HUDs also use time displays to show the in-game time, such as the current time of day or year within the game. Some games may also display the real time.
- Weapons/ammunition – Most action games (first- and third-person shooters in particular) show what weapon is being used, and also how much ammunition is in it. Can show other available weapons, and objects like health packs, radios, etc.
- Capabilities – game play options that are often accessible by the player during game play, such as available weapons, items, or spells. This can include when the ability will become usable again, such as ammunition, magic points, or some other type of “charge up” timer. Icons and/or text may appear in the HUD to indicate other actions that are only available at certain times or in certain places, to show they are available to perform and which button performs it; for example the text “A – open door” may be displayed, but only when the character is near a door.
- Menus – Menus to exit, change options, delete files, change settings, etc.
- Game progression – the player’s current score, money, lap, or level (as in stage or as in experience points). This might also include the character’s current task or quest.
- Mini-map – a small map of the area that can act like a radar, showing the terrain, allies and/or enemies, locations like safe houses and shops, streets, etc. (See mini-map for more information.)
- Context-sensitive information – shown only as it becomes important, such as tutorial messages, special one-off abilities, and speech subtitles.
- Crosshair – an indication of where the character is aiming or where the mouse pointer is. Pressing a key while pointing at an object or character with the cursor can issue actions like shooting, talking, picking up objects, manipulating switches, using computers, etc.
- Compass / Quest Arrow – sometimes found in RPGs and first-person shooters, it helps guide the player toward his or her objective. Sometimes the compass itself might not be a real compass, rather one that points toward the next location or goal.
Now how do you make a “Good” HUD? Start by examining games with bad HUD systems. Since my group is attempting to create an action RPG, I examine what I consider to be the biggest HUD Villain, Mass Effect. Mass Effect received a lot of praise when it came out and it still does. However the HUD system robs the player of becoming completely immersed in it. I could talk about the failing of Mass Effect, but I’d rather not beat a dead horse. Instead, below is an excerpt from Game Design Reviews blog by Krystian Majewski on November 5, 2009 detailing the many HUD failures:
HUD
Let us move to something more common: The HUD. The interface overlay on the in-game view is a very small piece of information design but one that is quite important as you stare at it most of the game. You might think that with the little amount of information it needs to communicate, BioWare should have managed to get that right. After all they do have some considerable experience in developing games. So imagine my surprise seeing so blatantly obvious information design flaws shown here.
- (Bad) Styling obscuring function: Let us focus on the health bars in the lower left corner. Off the bat, that entire area is set in italics. An unfortunate choice as it is difficult to compare the three health bars with each other when they are aligned along diagonals. Also, it makes them all rhombuses and you know what they say about rhombuses. What baffles me is WHY they set that part of the interface in italics. Italics aren’t used ANYWHERE else after all.
Arbitrary and misplaced italics (actually backwards-italics). Percentage bars with different lengths. Great solutions if you want to PREVENT players from comparing health bars.
But things don’t end there. Note that the health bar of the character “Shepard” is longer than the others. The obvious explanation to that would be that Shepard has more health than the others. But he doesn’t From playing the game longer than is good for me, I can say with confidence that the length of the bars doesn’t change as the characters level up. So I conclude that it’s just a percentage bar. Making a percentage bar longer than others you compare it to is a major information design failure. It’s difficult to comprehend because it implicitly makes players arrive at a wrong model of how the interface works. More fundamentally, it just makes comparisons between the three health bars even more difficult than it already is with the italics.
I can only speculate that the idea was to highlight Shepard as the main character. Graphic Design 101: use a larger font, put his name on top of the list rather than in-between, use spacing, and text indent to make the other names visually second-order to the main character.
- Poor choice of icons: Let’s stay in this area of the interface and focus on the two symbols right from the health bar. Here is an interesting experiment to repeat at home. Ask a person, who doesn’t know Mass Effect what the symbols mean.
Can you guess what those mean?
They might guess that the upper icon has to do with health. But I’m pretty sure they will never guess that the lower bundle of lines is supposed to be a grenade. You see, grenades in Mass Effect are discs. Using a disc as an icon for grenades is a typical example of the designers with a poor understanding of semiotics (using and “icon” where a “symbol” would be more fitting). A good counter-example is the use of conventional consumer photo cameras as symbols for speed cameras in traffic signage. The actual camera may look nothing like a consumer camera but the shape of a consumer camera is more familiar and thus easier recognizable.
Using symbols instead of icons can facilitate recognition. Of course in the UK, they’re doing it wrong.
The first, health-related icon is just barely recognizable and only because of the use of the familiar cross. Again, one is left to wonder why the designers chose to muddle up the meaning of it by adding useless additional elements. It’s not that they contain any additional information.
It’s also worth pointing out the poor typography that comes with the poor choice of icons. The numbers representing the number of health-packs and grenades are also in italics and distorted. There is also little margin between them and the icons. They are barely legible – an unfortunate property of such a vital piece of information.
- Poor success feedback: Another problem with the HUD is how badly it communicates success. Every time you kill an enemy or solve a quest, you get a short summary of all the experience points, money and loot you got. You also get a notification of you level up. However, that information flashes for only around 4 seconds or so. There is no way to bring it back up or read it in a log of messages. It is also set on a tiny font. Finally, important information is missing context. If I get XP I don’t know how much more I need for the next level up.
For the proper Mass Effect interface experience, try to take in all this in 4 seconds… while fighting alien cyber zombies.
Making mistakes in this part of the interface has even effects on the actual core mechanics. The driving engine behind each RPG is mostly an endless circle of performing a certain task (killing baddies) to get better at performing that very same task (killing baddies faster). This cycle is kept alive by constant feedback. Players need to SEE that they get better. Considering this I don’t quite understand how the developers could have made such mistake. I guess if you develop the game for a long time you get so used to the messages that you are able to scan them quickly enough. But then again, this should have been picked up by testers.
You can read the entire review at http://gamedesignreviews.com/reviews/mass-effect-interface-fail/
From the article above and my personal experience, I have assembled a set of guidelines to create at the very least an unobtrusive and functional HUD:
- Clear and concise presentation of all data
- Function and understanding trumps style
- Style of the HUD needs to match the style and time period of the game
- Logical placement of icons, ammo and equipment gauges and health Bars
- If possible allow users to configure their own HUD
In the next post, I intend to give a small tutorial on HUD creation in the Unity 3d SDK and a preview of the intended HUD for Rift.