How to display multiple progress locations?

Question

My scenario is this: I'm reporting on how many points a player has earned in a game, along with other relevant info, like how many points the player had as a goal, and how many points the average player on the team has earned:

So basically, there's a kind of progress bar, with the max value chosen just ahead of the current value (to suggest that the total is not limited), and the three data points indicated.

But I don't love this presentation, because:

• it feels text heavy
• if the points happen to be near each other, the text will overlap (which is why I put the team average under the bar)
• I'm not sure it's completely obvious what the various values mean

Is there a better type of display for this kind of thing?

(Note: I considered asking this on Data Science but decided this was more about usability/presentation/communication than data, since the actual data analysis is so simple.)

Answer 1

Since it's a game, you have a lot of options to display progress in fun ways!

Few options:

1. I'm not sure the type of game, but one way to display progress is with a "road" (even add trees along the road, etc.) The road metaphor will nicely suggest the "total is not limited" Candy Crush uses the road metaphor to go through levels.

2. Another option is to have a rating system: 1-star, 2-star, 3-star rating for achieving certain goals (e.g. better than team, better than X, best ever) similar to typical mobile games. Then you can save space. Personally I like the road metaphor.

3. A third option may be to have a tower-like container for liquid which acts as a vertical progress bar and fills up with or some sort of goals and indicators along the way.

If you don't want goal to overlap with team average, just move them apart. I assume 100% exact chart is not the goal, since it's a game.

Answer 2

I'd try to form the requirements for your score report. From what you are saying those would be:

1. unlimited maximum value - displayed maximum value is dynamically determined based on the highest scores achieved
2. not text heavy
3. legible in all circumstances - i.e. if the markers are close to each other, they don't overlap
4. have clear meaning

With the requirements formed I would use the non-linear broken tape graph, like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

1. In order to indicate that there isn't any maximum you don't specify the end value on the graph, you simply present that the maximum is not achieved, just like you did in your current graph
2. You don't present the current scores directly but in the balloon/tooltip displayed on mouse hover above the respective score indicator

3. two issues come here up:

   • to prevent that the markers overlap you can place them on separate levels, i.e. "your score" is the highest, "your goal" is placed in the lower line (still above the tape) and the "team average" is under the tape.
     Of course you can order the markers vertically as you please (preferably in the order of importance).
   • make sure that the markers are spaced evenly by breaking the tape in the longest distance between the markers.
     In your situation, where you have 4 markers (start, team avg., your goal, your score) you break it between the last two as the distance there is over 10000.
     Should the scores be like (0, 1345, 2000, 2049) respectively, break the tape between start and team avg. since this is the longest distance (1035 vs 655 and 49).
     Furthermore, the less numbers you place fixed, the more flexible you are with placing the markers.

4. Again, balloons/tooltips come to the rescue - e.g. for the team average you can present how many team members there are, what is your rank within the team (this depends on the privacy policy of your game), or you can present some legend next to the score

And this would be for the static score presentation.

---

You can always try to present an animated score bar where a zoom-in onto the required marker happens and the numbers on the bar are displayed only from a certain zoom factor, or have the markers slide from zero to their position while panning along the bar.

Answer 3

to me, the progress bar could be not the appropiate visual concept to use in this case. The progress bar it's useful when the user needs to quickly visualize the quantity of something (points, in your case) to reach a target. In this case there is no a targets to reach. The amount of points is, possibly, infinite.

You could choose to keep the points display only as number (like in old-fashioned 90s videogames) and visually activate a badge when the user reach his goal (a star o something like that, it depends on the overall art of the game). If needed I would keep the number of the goal near the badge (2000pts in your example).

To me, the tricky part is how to display the concurrent avg.team score together with the player score. We must consider the two possible scenarios: In your example the player is far over the average team score, but it could be possible the opposite (the player being way under the average team score). We want to represent the gap between player score and the average team. Basically, the player wants to understand if he is performing under or above the average.

If this is the case you could use a bidirectional bar with the average team score. The direction and the lenght of the bar would indicate (at glance) this two concepts: "am I over or under the average?" and "how much I am under/over the average?" Of course the bar is dynamic while playing and I would add that the bar color should change, representing the good (in green or blue) if the player is in "a good situation" i.e. over the average, and the bad (in red or orange) if the player is in "a bad situation" i.e. he's under the average!

Above i represent the 3 possibly scenarios: LEFT: the player reached the 2k goal and is over the average team score CENTER: the player reached the 2k goal and is on average team score RIGHT: the player reached the 2k goal and is under the average team score

Bye bye

Answer 4

I don't know your screen size but if you concern about it, I would suggest to change the text label to: (1) Team (2) Goal (3) You I would also make it gauge chart. Something like this. My apology for bad graphic.

Answer 5

If it's a PC game, you could also work with hover/click pop-ups:

Little letters on the bubbles and colors (useful redundancy) to make them easily distinguishable.
Great upside: You can have a dropdown with explaining text, in case the user doesn't understand it.

Would also solve the issue with overlapping text.

---

Actually this would work on touch devices as well, just tap instead of hover.
But only if there's enough space.

Answer 6

Looks like too much and uncomperable data for one graph.
I would try to split and prioritize. Something like this:

Score: 12549 points

Level: 5

Next level: at 451 points
level 6         [][][][][][][][][][][][][][][][] 13000 points
your score  [][][][][][][][][][][]][][] 12549 points

Goal: overachived by 627% (+10549 points)
your goal    [][][][] 2000 points
your score [][][][][][][][][][][][][][][][] 12549 points

Productivity: 933% more than the team average (+11204 points)
team average [][][] 1345 points
your score      [][][][][][][][][][][][][][][][] 12549 points