End Game MMR Improvement - Progress Bar Iteration #3

samgawaran commented 2 years ago

Summary

for this submission, I consulted with @JuanRoman77 via DM and on the previous thread to improve how the progress bar look. I based this from both Jeff and Juan ideas

Scenarios are the same from iteration 2 - see research here

Comparison

Changed the way how the progress bar looks. Added hooks on each division's baselines so the players would know how far they are in the next/previous division

Details

Victory / Defeat

IDEA I added a shimmer in the bar to indicate if the player is progressing. Green if they won, Red if they lose. We can remove this shimmer easily in the design.
The shimmer is inside the progress slider
the shimmer uses the same color on MMR change

Promoted / Demoted

suggested logic: if the player is on the bronze division, the lowest level of the progress bar is 0 MMR. That way there is little to no chance that players will reach the bottom of bronze and they won't feel bad that much.

Platinum / Top Ranked Player

suggested logic: if the player reaches the top division (platinum) the highest point of the progress bar will be the top-ranked player in the game mode

Submission Checklist

[x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

samgawaran commented 2 years ago

for review: @demiculus @JeffdEon @JuanRoman77

if all is good, let me know so I can create/help in the implementation issue

JuanRoman77 commented 2 years ago

Should the icons and text go below or above the bar? Any reason why the divisions aren't the same width? The shinny thing is a nice idea but I'm sure there are a few other ones as well. I recommend exploring those designs after the main one is approved.

samgawaran commented 2 years ago

Should the icons and text go below or above the bar?

I tried both, and I'd go for showing it below, reason for this is that if we placed it above, the design would be heavy on text without partition compared to if the progress bar also acts as a separator in text below.

Any reason why the divisions aren't the same width?

Your current division is more important, having them the same width could make the progress bar feel empty if the next division rank is still far away. + I think the spacing is much better if we don't use the same width so we can highlight the player's progress better

JuanRoman77 commented 2 years ago

I tried both, and I'd go for showing it below, reason for this is that if we placed it above, the design would be heavy on text without partition compared to if the progress bar also acts as a separator in text below.

Sounds good.

Your current division is more important, having them the same width could make the progress bar feel empty if the next division rank is still far away.

That's the opposite of what you designed lol If the player has only a few points in the current division, being this one the larger, it will look really empty. Also different divisions' width isn't adaptable for bottom and top divisions.

Try same width.

JeffdEon commented 2 years ago

Any reason why the divisions aren't the same width?

All the divisions will have different widths. This is how they are designed. And when we added divisions like grandmaster only like the top 100 will qualify. So the bar would be super small. Similar width just doesn't make sense based on how the system will work.

I think we're over complicating this. What's wrong with a single bar showing the current progress in your division?

JuanRoman77 commented 2 years ago

It doesn't matter the real width of the divisions. People will just move faster on crowded divisions, and move slower in top divisions. Overcomplicating would be to have all of them be of different width. That's why I recommend making all of them the same width.

JeffdEon commented 2 years ago

I'm saying width is irrelevant when you're only showing a single bar. It's a percentage. You're x% of the way to the next rank and y% away from being demoted. There's no other bar being showed so width doesn't matter.

colonistio / design