6

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.

2
  • Have you considered using a logarithmic scale for the bar length?
    – Brendon
    Apr 28, 2013 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 Apr 29, 2013 at 15:29

4 Answers 4

8

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

5
  • Ok, this is awkward :P I submit my mockup and see you posting the same thing minutes before me
    – rk.
    Apr 28, 2013 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. Apr 28, 2013 at 23:14
  • No, no, no, I upvote you now. !!
    – rk.
    Apr 28, 2013 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. :) Apr 30, 2013 at 12:12
  • @AlexanderKonstantinov glad you liked the answer :)
    – rk.
    Apr 30, 2013 at 12:21
5

You can use something like this:

mockup

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.
4
  • 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. Apr 28, 2013 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, 2013 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. Apr 28, 2013 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, 2013 at 0:21
4

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.

3
  • 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. Apr 28, 2013 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. Apr 28, 2013 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). Apr 29, 2013 at 15:41
3

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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