How can I show the relationship between two progress/health bars?

Question

In a turn based game I'm building you manage a few resources, two of which are related.

Speed: a frequently changing value that you consume over the course of a turn as you act.
Endurance: a rarely changing (but it does change) value that indicates how much Speed you will regain at the start of the next turn.

I'd like to indicate both with progress/health bars (or some other similar UI) so their values are glanceable. I'd also like to clearly indicate the relationship between them: Endurance indicates how much Speed you'll regain next turn.
Here's what I have so far (next to the only other progress bar here for context). What I tried was to have the related bars touching, and to have the Endurance bar have a width that shows it's proportion to the Speed bar. I don't think this communicates it clearly though, it's not obvious why the Endurance bar is shorter.

Can the alignment be adjusted to make this relationship clearer? Can making them share the same bar somehow make it more clear without losing track of Endurance as it's own separate resource? Are progress bars in general just not the right solution here?

Michael Lai · Answer

There are a number of different types of information you are trying to represent/present to the user, and the key is to create a consistent and coherent set of visual signals so you can convey the key information correctly and clearly.
From what I can see, these are the key elements:

Current available speed (that can be used)
Maximum speed point available (that can be accumulated)
Current available endurance (that can be added next turn)
Maximum speed point available next turn (once endurance is added to speed)

So I suggest the following changes:

Combine endurance with the speed bar since its value is only added to the speed bar (and it is also confusing for the user to have to do the calculation themselves
Change the labeling for Endurance (+ ) so that the user knows it is something added to speed
Create visual styling to show the connection (e.g. using same type of colour but different shade) between current and future speed points

I think each of these examples show how the design indicates both current and future speed points as you progress through your turn quite clearly, and can be applied to any other attributes that work in a similar manner.

How can I show the relationship between two progress/health bars?

One Answer

Add your own answers!

Ask a Question