Progress bar that allows to understand both current and maximum values

Question

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).

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

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:

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.

Answer 1

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

Answer 2

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.

Answer 3

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.

---

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.

Answer 4

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 ...