Sidewalk Gallery: When Severity 5 selected, unclear if all are filled or unfilled

[jonfroehlich]

When a Severity 5 is selected, it's not clear (on the expanded card particularly) whether all five circles are filled or unfilled.

That is, there is ambiguity around whether a "dark fill" represents selected or unselected.

Maybe need outlines on these icons to make this more clear?

In addition, I would suggest adding the number + semantic description. Some mocks below.

For the latter two above, when user mouses over the severity part, they would get a lil pop-up that let's them edit the severity level (towards addressing https://github.com/ProjectSidewalk/SidewalkWebpage/issues/2575).

Thoughts @isavin12?

[misaugstad]

related to #2555

[isavin12]

I like Jon's second image in the thread above.

I suggest we do the following: Highlight the severity rating in blue, all others stay white for context. Card has a rating x/5. Expanded modal has the same rating AND text description. See mocks below:

[jonfroehlich]

These mocks are great. Thank @isavin12. The only thing I would point out is that we are inconsistent in showing a selection. For the severity ratings, a full fill indicates selected item while for tags, it's only bolding and highlighting. It would seem we should be consistent imo.

I like the second mock the best (recopied below) but not sure if the happy face should be used to indicate least severe since it's still a problem. @misaugstad, did we discuss this anywhere else (emoji renderings of the severity ratings)?

[isavin12]

Agreed, in which case the above mock would look like this:

If we stick to the happy faces, I can come up some new designs where it starts at the neutral face and gets progressively worse. Or we just go back to numbers in the circles, which would eliminate the need for the 5/5 superscript.

Another option is to represent severity through a gauge, like this below:

[jonfroehlich]

@isavin12 I think we should stick with faces. And I like the goal of starting with a neutral face and getting progressively worse (though this should be it's own ticket and should likely filter back into core Sidewalk too).

While I appreciate the other mock, the gradient presents two problems: suggests the data is continuous (but it is not) and the color choices themselves may not be inclusive, especially to those with deuteranopia (the most common form of color blindness affecting green+red perception).

[isavin12]

Agreed about the gradient. @misaugstad could you please create a ticket for the smiley redesign?

Here's a final mock for the ratings. Note that the selected smiley is a blue fill, whereas the unselected smileys are grey outlines. Also note the addition of a "pill" shape underneath the smileys and the rating written out followed by x/5.

Pill Grey is #DCDBDB, severity text is Segoe UI Semibold in #2d2a3f.

[jonfroehlich]

Looks awesome!