Review rating toggle not obvious

[alanshaw]

I was surprised to find these buttons above the review box are actually toggles. What makes it extra confusing is that the buttons below look very similar, but are used in a completely different way:

[richsilv]

This is a good point in the context of the buttons below. What do you think, @neynah @jadeqwang - should we change the styling for the review toggle?

[neynah]

@alanshaw @richsilv Yeah I totally agree the "It's broken" and "I didn't like it" should be styled differently. Let's try with a grey border(can sample from any other ones we've used), dark purple text, and #e7daea for the highlight?

[richsilv]

Okay, @neynah - how does this look?

[jadeqwang]

Hey @neynah , what do you think of these types of toggle buttons?

[neynah]

@jadeqwang Since they are like switches, I think they work for values that are opposites. e.g. like / not like, on / off. We could use the toggle button for thumbs up vs thumbs down and then have the appropriate buttons displayed depending on what they toggle.

[neynah]

I'll mock this up unless you say otherwise. :)

[jadeqwang]

@neynah go for it.

[neynah]

First of all, let's update how reviews are displayed at the top of the app.

In this case, only one thumb on the left will show (to clean up the UI). The default thumb will be a thumbs up as long as a percentage of reviews (greater than 0) are positive. In the case of 100% negative reviews, we will display the thumbs down.

Grey: #bcbcbc
Red: #8e2946
Green: #12875a

[neynah]

And here's documentation for the rest of it w/ brief documentation.

[jadeqwang]

Looks great, @neynah !

The only thing I'd change here is wording (which @richsilv can change on his own):

• Positive -> Like
• Negative -> Dislike

[richsilv]

Looks great, @neynah thanks. just to be clear on the review bar: is it always going to be two-colour (green and grey)? So if there was 30% Amazing, 30% Gets the job done, 30% I don't like it and 10% It doesn't work, we'd mark it as "60% positive" and have a 60% length green bar with the rest grey?

[neynah]

@richsilv Ah right. That slipped my mind. I think at the top it should stay as it is. For the bottom, perhaps we can breakdown the distribution somehow. (Let me get back to you)

[neynah]

@jadeqwang @richsilv Thoughts on this?

I figured the review comment box itself probably doesn't need so much space so perhaps we can use some space on the left to show the breakdown/distribution of reviews.

I currently have # of reviews per type, but I could also just show the percentage or even both.