Osu-web: Grade icons in Recent section are barely discernible

Created on 7 Dec 2018  路  8Comments  路  Source: ppy/osu-web

wat

You can guess the grade by colour but S vs S+ is impossible to see. Even in "Recent plays" or "Ranks" with bigger icons S vs S+ is hard to see.
Some colours like green or yellow make it a bit hard to see the white text on it.

user-profile high priority ux

Most helpful comment

a_mini
b_mini
c_mini
f_mini
s_mini
s _mini
ss_mini
ss _mini
a_mini 2x
b_mini 2x
c_mini 2x
f_mini 2x
s_mini 2x
s _mini 2x
ss_mini 2x
ss _mini 2x

Designed tiny versions for the score grades.

All 8 comments

Can this be reopened? All grade icons are the same size on the page now which lifts the issue from barely discernible to really hard to see. It's been improved but not fixed imo.

The + is so tiny I don't think enlarging the icon will ever help. I'm not a designer but maybe something for contrast like a bit of outline for the text on the icon helps?

EDIT: Also the new size apparently broke the alignment (or uncovered it being wrong in the first place) to the description text next to it.

We can definitely make them bigger; the flip side is that then there'll be people saying it's too big and takes up too much space

I never suggested to make them bigger. I only commented that making them bigger will probably never help after I saw the attempted fix. Though I agree with your point about the size.

@arflyte

Instead of the small + to differentiate hidden/flashlight mod plays, can the design have the silver color scheme like the old design?

That's a direct export of the original files. Will design a tiny version of it.

a_mini
b_mini
c_mini
f_mini
s_mini
s _mini
ss_mini
ss _mini
a_mini 2x
b_mini 2x
c_mini 2x
f_mini 2x
s_mini 2x
s _mini 2x
ss_mini 2x
ss _mini 2x

Designed tiny versions for the score grades.

should be unassigned?

Was this page helpful?
0 / 5 - 0 ratings