Redesign smiley severity scale to start at a neutral face

[misaugstad]

Brief description of problem/feature

In #2601 we discussed the possibility of changing the smiley faces associated with the severity rating scale to start at a neutral face instead of a happy face, because a low severity problem isn't a good thing.

A counterpoint that hasn't been mentioned yet is the fact that we are labeling both problems and features. A severity 1 curb ramp is a very positive thing, so it makes sense for the curb ramp rating scale to begin with a full smile. Do we want it to be different for problems vs features? If so, we would need to figure out what to do about the severity filter in the left sidebar in Gallery. Or since there are more problem label types than features label types, maybe we are happy with switching them all over to starting at a neutral face?

If we decide to make a change, the changes should show up on /audit, /validate, and /gallery.

[jonfroehlich]

This is really important now because our filter bar seems to indicate that a problem of '1' or '2' deserves a happy face. This is not appropriate. We should not signal content with a sidewalk problem rated as a '1' or a '2'—it's still a problem.

In terms of a counterpoint of having a '1' for a curb ramp. Fair enough, but I still think having a neutral face for that is better than having happy faces for the problems. I'd rather switch to neutral faces ASAP and worry about the potential inconsistency with curb ramps later (and if we add crosswalks, that "positive feature" will also have same issue as curb ramps).

[jonfroehlich]

Tagging @isavin12 and @Luciozzz as this is another hotfix issue. See also: https://github.com/ProjectSidewalk/SidewalkWebpage/issues/2601#issuecomment-888025635

[michaelduan8]

Still applicable, though this is more of a design question.

[jonfroehlich]

@Luciozzz This is another icon design task that is pretty important.

I agree with @misaugstad that for accessibility features like curb ramps, pedestrian signals, and crosswalks, we could use the same or similar icon design:

But for accessibility problems like surface problems, no sidewalk, obstacles in path, better to start with neutral and get worse (just used MS Paint here to demonstrate starting with neutral at 1):

[Luciozzz]

I redesigned the happiest and the saddest faces in order to differentiate more with the 2nd happiest and 2nd saddest faces. And I added a very sad face and an extremely sad face. Hope this works! @jonfroehlich

[jonfroehlich]

Nice! I'm not an emoji expert but these are certainly an improvement over what we have now!

Can you make individual versions (.svg and .png) that are well-cropped at the edges and equal sizes?

Let's name them.

smile0.png
smile1.png
neutral.png
frown1.png
frown2.png
frown3.png
frown4.png

Or something like that. @misaugstad can comment on naming scheme.

[Luciozzz]

I suggest we name those faces like this: A larger number means a higher emotion intensity.

Here is a zip of all the named & cropped icons in PNG and SVG: Smiley.zip

[katrimana]

smileys_new.zip

[hoominchu]

Attaching some screenshots of the work in progress:

Gallery modal:

Gallery filter panel with a severity level selected:

Gallery filter panel with no severity level selected:

Explore page, upon hovering on the label icon:

Explore page, context menu. Dark green is selected state. Light green is hovered state.

Explore page, context menu. Dark green is selected state.

Validate page, upon hovering on label icon.

[jonfroehlich]

Love it @hoominchu!

I wonder if we might want to switch to a yellow-to-red gradient (using Project Sidewalk colors) where yellow is for Severity 1 and red is for Severity 2 (and we avoid green at all as green is, perhaps, an overly positive signifier.

See colors here: https://github.com/ProjectSidewalk/Design

Maybe extract five discrete levels from the gradient? This tool might help. https://www.colorhexa.com/fbd78b-to-eb734d

[hoominchu]

That sounds good!

I tried it out quickly—adding some screenshots/recordings here for reference. @jonfroehlich pointed out that there is discordance between the smiley colors and the 'disagree' and 'not sure' buttons. We are planning to experiment with the saturation/luminance to avoid the same.

https://user-images.githubusercontent.com/8168506/208314523-62a7b203-1975-4667-a3d0-7eca84ba5bae.mov

[hoominchu]

I experimented with saturation and luminance a bit and here is a resulting version. That's the darkest I could make the colors while keeping the contrast between the the color of the facial features and the background reasonable. Let me know what you think!

Gradient: https://www.colorhexa.com/f6ac13-to-e85f2b

https://user-images.githubusercontent.com/8168506/208323926-87f81012-42ee-4cef-8782-7598d5932b9a.mov

[jonfroehlich]

I think this is great but I'd like to see Severity 1 be more yellow so that there is more visual distinction across the five levels. Let's aim for Severity 1 as yellow, Severity 3 as orange, and Severity 5 as red.

But this is better than having all green I think. Great job!

[hoominchu]

That makes sense! I have updated the colors and you can see them here. Gradient used: https://www.colorhexa.com/f4db48-to-e85f2b.

https://user-images.githubusercontent.com/8168506/208739296-95343dff-c0ad-4a6a-b034-15014b3e8020.mov

[jonfroehlich]

This is perfect. Wow! Let's ship it!

[hoominchu]

Great! We need to decide one more thing. Which one of these do you think works better for the explore page context menu?

The hover color is constantly light yellow in this one. https://user-images.githubusercontent.com/8168506/208760676-bbe1441b-19c3-4d57-8b1b-f3ed23317cfe.mov

Hover color matches the selected color in this one. https://user-images.githubusercontent.com/8168506/208760774-238df1cd-b5f8-4955-bfd1-8d2f294dcdba.mov

Not sure why videos are not directly embedded.

[jonfroehlich]

I can’t get videos to load but I’m mobile. I would prefer second option (though saying that without seeing videos)

Generally your hover color is slightly different but visually distinct from selected fill color. I typically do this by playing with opacity.

You don’t want hover and selection fill to be the same as then the user loses one channel of feedback on their action

[hoominchu]

Sounds good. Here is how it looks with the opacity adjustments. Also added some CSS transition effect so the color transition is smooth :)

https://user-images.githubusercontent.com/8168506/208777437-37518c46-8ae9-4441-998a-779377722ccd.mov

[jonfroehlich]

Thanks @hoominchu!