Interface design and other visual player feedback

In this post I will express my thoughts about good vs. bad ways of telling a player – visually – what exactly is going on in your game. I have played many games in my life, and most of the ones I like have good interfaces, while the ones I dislike have things like wonky controls, shoddy game structure, or elements that just plain don’t make sense.

“Why spend time on the interface? It’s just numbers! Gameplay is more important!”

A great amount of focus on perfecting the gameplay is of course important if you want your players to have a good time. Ideally, the game will also tell the player how things are done through its very nature. For example, in any game where the player holds a weapon we may assume that the weapon will be effective against monsters the player meets. Without a weapon, we may assume that you will have to use other methods to deal with them, or just avoid them entirely.

However, an important aspect beyond “you have a weapon” is to communicate exactly how that weapon works to the player, and also how enemy weapons work against you. Other games without a focus on fighting will need to communicate all of their mechanics to the player as well, somehow. The choices you make in how to do this may seem arbitrary, but they will have a major impact on the player’s experience. At some point you will have to tell the user that the X button makes you jump, or that holding the Shift key equals sprinting, or that right-clicking an object will make your character pick it up. In many games all you need is an icon or a string of text that gives you this information, but in others you may not want to break the players immersion by displaying an artificial text pop-up. Luckily for you, there are ways to integrate game mechanics into gameplay, such as by having the ammo counter actually be the weapon model itself.

The ammunition in Metro: Last Light is shown directly as bullets in the clip, without numbers.

Screenshot from Metro: Last Light. The game is made by 4A Games, published by Deep Silver and Spike Chunsoft (Japan). Credit to PixelEnemy.com for the screenshot.


Health points and cash counts: The quintessential game stats?

You will usually have a need to tell your player how many hits the main character can take before the game is over, how many collectible coins he has in his inventory, or which areas of the game’s map that are currently accessible to him. The most obvious choice for communicating info is to write it out in plain text. Many RPGs do this. “HP 540”, for example, and that’s it.  When you take damage you can count how many hits you can take. If an attack were to do 60 points worth of damage at this point, then you would know that you had 9 hits left to take based on your health value. Other times you get something more visual in addition to the number, usually a bar. A bar shows a player in much more visual terms how much health they have and how much damage they take. If you get hit and the number jumps from 67 to 34 in a flash, you might have trouble doing the math in your head in the few instants you have to recognize the change. Did you have 70 or 50 before? How much did you lose, exactly? With a bar, it becomes clear that the remaining amount was roughly cut in half, especially if there is also a glowing effect added to the part of it that is now draining. There is also an in-between sort of display, where the health is measured in hearts or on a bar with segments. Then you can count the number of hearts you have left, but also get a visual indicator on the current amount compared to the maximum.

Finally, there is the more immerse way of showing health, in which there is no number or bar at all. Here, the character may become visibly exhausted instead, or maybe a screen effect starts tinting everything red. This is usually done where you have a small amount of total health (so that the different stages are more clear), and often where the player only has one or two hits to take (such as in Super Mario, where the three stages of health are indicated by being small, then large, and then wearing a power-up item).

Make it obvious!

In either case, make sure the player knows what is going on. Don’t have 3 unmarked bars next to health! Don’t neglect to put “Press START to bring up the Menu” somewhere in the tutorial section or on the display. You might know that the blue circle icons refer to special ability energy and that a green bar is some form of magic disease that you really don’t want, but the player could still have no idea about this. Even if you mark it in one language, someone from a different language (such as the many people who play import games) or younger kids may still not know what it means. Like, here in Norway we get mostly English games, no translation, right? Even though I learned English in school (and learned a lot of fancy words from playing video games!) I still had to ask my mother every time a game used a word I hadn’t learned yet.

RPG HUD with unmarked bars. Without other context, the bars are meaningless.

Can you tell what those bars mean with no other information?


If you make a small icon appear next to the bars, then it becomes much more clear what they are. Super Mario 64 did this very well, too. The health meter was not visible at all when you were at full health. When you first got hit, it would appear in the middle of the screen, next to Mario, as it drained down a piece or two. Maybe 4, even, in extreme cases. Then, it would float up and stay on the screen, and now you knew that Mario’s head-shaped icon with a colored pie in it represented the damage you could take. In other games, you can guess by visuals and sound that a heart item is good for you but a skull is very very bad.

Super Mario health meter turning red when it runs low.

Mario is being attacked, and his health is clearly low. We see this from the sharp red color, the blacked-out sections, and eventually also the sounds he makes.


Even with no explanation, though, the point should have gotten across after the first few times the player sees something. If they, on the fifth failure, still do not understand why they are failing, then you have failed in your job as a designer as well. This can happen because of a language barrier, or just because the function of the item isn’t clear. For example, let’s say you are conditioned to pick up mushrooms (red and white) in Super Mario. Picking up a certain kind of mushroom (the purple and skull-marked Poison Shroom) kills you. Now, a player, even without any knowledge of this, will be able to get that the purple mushroom is bad, after the first deaths caused by it. However, the poison mushroom from Super Smash Bros. is only distinguished by a slightly darker shade of red. This is easier to miss (especially to someone with mild color blindness) and can lead to a frustrating experience if they repeatedly pick up the bad item thinking it is a nice item.

Other things, like the ability to triple-jump in SM64 by pressing A with the right timing, might really have need a text explanation. Still, even someone who did not read English could look it up the manual provided with every game cartridge, where a very nice and illustrative image showed Mario jumping, with arrows and A-button icons indicating how he did the special move. owadays, in-game tutorials may seem blatant about flashing button icons in certain contexts, but they are actually very helpful. If they were missing, I guarantee a lot of players would get frustrated very quickly. I can’t stress this enough: If you don’t have the instructions in-game, make sure that you include them somewhere else, preferably in a simple-to-understand manner. Always assume some of your players will be either unable to read the text or unable to see the image properly. Explain the action both with a small illustration (can be as simple as a picture of the Enter key next to a picture of your character pushing a crate, for example) and a short text: “Press Enter to push crates”.

The manual for Super Mario 64 displays actions both with text and illustrations, to make sure everyone understands them.

How to jump – a clear guide that you can understand even without being able to read the text.


Enough can be too much – give options

As important as information is to the player, there is also the flip side of the coin – sometimes you make them feel like you give them too much. Sometimes, the player does not want you to show the solution by flashing “USE GRAPPLING HOOK HERE” next to an obvious target, and other times they just hate that “you’re low on health” sound effect you’ve put in. A heavily criticized character is Navi, from The Legend of Zelda: Ocarina of Time. Navi doesn’t actually interrupt your gameplay with info-dumps all that often, but her main annoyance factor is that every single time you lock on to an enemy to attack, she will make her presence known with a loud “HEY!”, “LOOK!”, “WATCH OUT!” or similar. This is meant to help you distinguish dangerous targets from other things you can lock on to, but it gets grating after a while — especially because the game already distinguishes enemy targets with a yellow targeting reticule. Once you learn that simple color code, you do not need Navi to tell you of the danger. Not everyone finds Navi annoying. I must admit, during my first playthrough of Ocarina of Time I was too engrossed with the new enemies I faced to actually notice Navi’s lock-on yell. Today, however, I have become aware and notice almost every time. Sadly, you can not turn off her voice, although that is an option that really should have been there.

In other games, you get floating markers everywhere. As useful as they could be, I didn’t like the on-screen markers in The Elder Scrolls V: Skyrim. I felt they gave away too much, and distracted me from the actual game graphics by making me stare right at the quest target even if it was behind a wall. Skyrim has an option that lets you turn them off, though, so I did. This is how things should be, ideally. Give the player the choice of getting more info, or less info. Just make sure that you always include enough info for a first-time player, and then dial it down with options for those who don’t need detailed instructions. Best of both worlds, I would say.