I need to design a health bar for a game, so that the player could guess at a glance not only its relative value (i.e. amount of remaining health compared to its maximum), but also to understand how big that maximum is.

Here is an example: it is easy to see in both of these bars, even without numbers, that about 3/4 of maximum health is remaining, but it is also important to know that absolute amount in the second case is twice as big (150 vs 75).

Example 1

Here this problem is solved in the most straightforward way, by making bar's length proportional to its maximum value:

enter image description here

This could work up to some point, but what if the "maximum maximum" value can be 10, or even 100 times bigger than the "minimum maximum"?

Here is another attempt where maximum amount is indicated by "hearts", which are filled according to the current health value:

enter image description here

Slightly better, but I would like to see if there are even better solutions that are 1) scalable (at least up to 10-20 times difference in maximum value, ideally up to 100), 2) don't take too much screen space, 3) easy to read.

  • Have you considered using a logarithmic scale for the bar length? – Brendon Apr 28 '13 at 20:22
  • @Brendon, I did consider logarithmic scale, but it doesn't seem clear that slightly longer bar means "several times more health" with such approach – Alexander Konstantinov Apr 29 '13 at 15:29

Its better to keep the width of both energy levels the same as you have shown in the first model. You can try something like that

enter image description here

  • Ok, this is awkward :P I submit my mockup and see you posting the same thing minutes before me – rk. Apr 28 '13 at 23:10
  • Sorry I didn't see you coming with that.. I would vote your answer up so it is seen more than mine :) - Cheers. – Salman Ehsan Apr 28 '13 at 23:14
  • No, no, no, I upvote you now. !! – rk. Apr 28 '13 at 23:17
  • 1
    @rk., Salman, thank you both for your answer, that's an interesting idea, I'll try it. Unfortunately, I can't accept both answers, so it's probably would be fair to accept Salman's as the (slightly) faster one. :) – Alexander Konstantinov Apr 30 '13 at 12:12
  • @AlexanderKonstantinov glad you liked the answer :) – rk. Apr 30 '13 at 12:21

You can use something like this:


download bmml source – Wireframes created with Balsamiq Mockups

  • Each green box represents a value (10 in this case)
  • The width of the box is irrelevant
  • As your health increases, the width of green boxes reduce but the width of the health bar remains the same

The main advantage is:

  • You can guess the % value of health remaining
  • The width of box tells you how big the health pool is.
  • I still think what makes it clear is the numbers. The design is confusing if there are no numbers. Graphically what would work is a double bar : one that shows the "level" and one that shows the percentage of remaining health. But that is heavy and the numbers do the work just fine. – Gildas Frémont Apr 28 '13 at 23:29
  • 1
    Depends on context, if you are talking about thousands and millions of health points, numbers are quite ineffective, whereas % is still effective. This design is the middle ground b/w numbers and %, since, it gives you the % of remaining value by graphics and the actual number by the density of the boxes. – rk. Apr 28 '13 at 23:37
  • 13905 can easily become 13k and 12,438,287 12M. I am not trying to do the smart aleck but do you really think "++++++++++++++++" is clearer than "16 cross" ? I upvote the comment for reminding that the context is really important here and in general. – Gildas Frémont Apr 28 '13 at 23:54
  • It is not about "+++++++++++" vs 16x, it is about seeing "+++++-----" on the toons head vs looking at 16x/20x. Visuals are easier to digest with speed. Also, the the numbers are necessary. You might want them on mouseover or have them display on the player tile. – rk. Apr 29 '13 at 0:21

The easiest way is to display just numbers.

In your drawings we can compare two sizes because there are two bars. But in your game, if the bar is going to stand by itself, no one is going to remember what was the size before. So its lenght is not going to give the player any kind of information.

enter image description here

No matter what the length of the video, the bar is always the same lenght.

The use of the bar is to show a gauge : what matters is the percentage of life before death or the impact of damage or the amount of happiness won. The lenght is not going to help even if your display several bars, what matters is the size of the bar within the bar relatively one to the other.

Remember numbers and text are UI elements of great value it you use them wisely, they have this special thing, many graphical elements do not have, they are explicit.

  • Yes, the numbers are the easiest way to display the information... their might be an alternative way of working out a number-free system that gives information at a glance. Changes in value (say, in a HEALTH BAR) are easier to gauge at a glance from a bar than from a number. I see changes when I'm hit for low and and high damage - on a bar, the decreases are relative. On a number? They're just numbers that I have to stop and interpret. – David Clarke Apr 28 '13 at 22:06
  • You are right that is why I say "what matters is the size of the bar within the bar.", what is meaningful is the size of this inside bar relatively to the other. The absolute size does not count. – Gildas Frémont Apr 28 '13 at 22:35
  • @Gildas, I understand your point, and I probably will display numbers as well, but I'd still like to give players some visual way to understand how much they progressed. For example, when a player starts with one heart, and at some point he/she sees five of them, it makes it easier to understand how much stronger they are now, than by comparing numbers (which, by the way, also require memorization in order to make such comparison). – Alexander Konstantinov Apr 29 '13 at 15:41

Have you thought about different colours?

It's for a game, so if it fits in the theme of the game, have a blue bar for basic health and a green one for the next tier. When the green one is gone, the blue one appears - FULL. If you preferred, you could have a line, with a number beside it, to show how MANY lines you can deplete.

I think it was super-street fighter (or marvel vs. street fighter?) that did this ...

  • Or Guitar Hero, for that matter. – Aadaam Apr 28 '13 at 22:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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