In the game I'm building, characters have a resource called Speed that they are frequently spending and regaining each turn. Think something akin to Action Points if you're familiar with tactical games that use them.

I'm primarily concerned with how to display this resource while the user is considering possible moves. Managing this resource is one of the primary things the player needs to consider when choosing a move. Because of this, the UI element needs to clearly convey to the following things, in rough order of how important I feel they are:

  1. The exact number of points that will remain after the move.
  2. The glancable, relative amount of points that will be used and will remain after the move.
  3. The exact number of points that the move consumes.
  4. The glancable, relative amount of points currently being considered compared to the maximum possible number of points.
  5. The exact maximum number of points.

Currently, I'm attempting to indicate all this this with simple meters akin to a progress bar/health bar, but it seems like there may be a better choice here that I'm missing. I feel like I'm capturing 1-4 in my above list, but #5 isn't indicated at all. Is there a way to include information about #5 without cluttering the UI any further? Is there a better choice in general than progress bar style meter here? Should I always show the absolute current and maximum values, or is it best to only show the numbers while examining moves as depicted below?

Here, is the basic meter while full:

Full Speed

Most importantly, the still full meter while considering possible moves. Here, the absolute values are superimposed over the meter.

Speed while examining moves

And finally, the meter becomes basic again after executing the move considered in the above meter.

Partial Speed

1 Answer 1


Always show a number to the full meter, that's when the user needs to know what the number is, since it sets the scale for the meter. Once they start actually moving, what the full number was becomes less important. They've already spent some of it, so their current available number is no longer that (and they probably do remember what they started with). But keep showing the remaining number in the yellow portion so users always know what they have left to spend.

  • This seems reasonable. Just always showing the number on the main bar instead of only while moving will give a better sense of the maximum and current values without adding too much clutter. Easier to code than what I've already done too, lol.
    – Kris
    Mar 3, 2019 at 18:14

Your Answer

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

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