AnswerBun.com

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

User Experience Asked on January 3, 2022

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

  1. Speed: a frequently changing value that you consume over the course of a turn as you act.
  2. 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.

enter image description here

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?

One 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

enter image description here

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.

Answered by Michael Lai on January 3, 2022

Add your own answers!

Related Questions

Single and whole group selection in tree table

2  Asked on October 31, 2021 by tal-blizowsky

     

Careers links in mega menu

3  Asked on October 31, 2021 by naveed-iqbal

     

Display dates for a long period on the graph

1  Asked on October 31, 2021 by nick-cipher

     

Breadcrumbs to show non-functional web pages?

2  Asked on October 31, 2021 by doubleclickonthis

   

Past simple vs present perfect in popup

2  Asked on October 31, 2021

   

Marking nodes in tree as important

1  Asked on October 31, 2021 by ivan-kulezic

         

Should back button exist in PWA (Progressive Web Applications)?

1  Asked on October 31, 2021 by jon-sud

     

Circle = warm, filled circle = cold?

1  Asked on October 31, 2021 by schteppe

 

Should we include a ‘collapse’ on this page?

2  Asked on October 31, 2021 by lea-grossman

   

When are FAQs important for a website?

1  Asked on February 21, 2021 by ravinder-kumar

   

Combining a drop-down with autocomplete and search

1  Asked on February 14, 2021 by estela-gaspar

     

Chips vs Checkboxes inside Dropdowns for Filtering Search?

1  Asked on February 12, 2021 by user133718

       

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir