421126 - Make ratings widget clearer

Status: VERIFIED FIXED

(addons.mozilla.org Graveyard :: Public Pages, defect)

Description

[Madhava Enros [:madhava]]

Attachment: ratings ui

(see attached image)

Right now, the rating UI provides people with a range from 1-5.  It's not clear whether 1 or 5 is high or low (this comes up as a problem a lot on questionnaires).  As in the attached image, we could clear this up by replacing the numbers with the current tooltip texts for each of the numbers.

While we're at it, it would be even better, rather than have people read through all of these things, just to show a rating stars that the user can click on.  This is consistent with the way that we present ratings, and is pretty common on the web (see attached image).

Comment 1

[Basil Hashem [:baz]]

I would vote for option 3 as the best and then option 1 (with an indicator of what is high and what is low). I don't like option 2 because it's lots of text and the language is American casual that is not amenable to easy translation.

Comment 2

[Michael Morgan [:morgamic]]

Ryan, could you take a look at skinning a star widget using one of these:
http://www.learningjquery.com/2007/05/half-star-rating-plugin (sucks, no graceful degredation)
http://dev.jquery.com/~john/plugins/rating/ (better but demo is broken...)

Comment 3

[Ryan Doherty (:rdoherty)]

I like the dev.jquery implementation, but we'll need to create new graphics and update the code to not allow 1/2 stars. I think I can use whatever graphics we have now. 

Comment 4

[Ryan Doherty (:rdoherty)]

FYI I'll be using this one:
http://www.fyneworks.com/jquery/star-rating/

Not sure if there's any licensing concerns, etc.

Comment 5

[Ryan Doherty (:rdoherty)]

Attachment: New implementation

Here's my first go at it. Tooltips popup on mouseover after a second. Same stars that we use when showing average rating. 

The issue I have right now with it is putting the stars to the right of the text "Rate it" is nearly impossible to pull of when localizing. You need a fixed with to align them together, and with different localizations, you get different widths. 

The solution is a really wide buffer between the text and stars. Doesn't look great, but looks better than putting the stars below the text.

Comment 6

[Ryan Doherty (:rdoherty)]

Attachment: Diff for ratings

New rating widget for small and large review.

Comment 7

[Wil Clouser [:clouserw]]

I need ratings_images.gif to review this.

Comment 8

[Ryan Doherty (:rdoherty)]

(In reply to comment #7)
> I need ratings_images.gif to review this.
> 

Committed in r11365

Comment 9

[Wil Clouser [:clouserw]]

- In screen.css when referring to ratings_images.gif it needs to be:
    background: url(../img/ratings_images.gif) no-repeat;

- Why do we have the red delete button next to the stars?  If you're submitting a rating you have to choose one, when would I ever use the delete icon?

- From my experience on the web, after clicking on the star I want I would expect it to save my rating.  I don't expect to have to write something in a box and click "Submit"

- The experience for submitting a review when logged out is broken.  You fill in your rating/review, click submit, log in, and then get prompted to fill in a review/rating.

Other than that, the patch wfm.

Comment 10

[Ryan Doherty (:rdoherty)]

Ok, I've fixed the css image & removed the red delete button.

We could have it save the review after clicking on a star, but isn't the point to write a review as well as rate it?

When a user is not logged in, could we not show the review form? Or will this not work with page caching?

Comment 11

[Wil Clouser [:clouserw]]

> We could have it save the review after clicking on a star, but isn't the point
> to write a review as well as rate it?

Yep.  My objection was not about your patch but with our overall workflow.  I don't think it's intuitive.

> When a user is not logged in, could we not show the review form? Or will this
> not work with page caching?

That would work fine with caching but not sure if it would reduce the number of reviews we get.  I'd still like to see an easy way to login where it just pops up a <div> with a form in it and goes away after they log in.  That's a ways off though I think.

Comment 12

[Ryan Doherty (:rdoherty)]

FYI if we want this in 3.2, it has to be just about as is. 

Comment 13

[Wil Clouser [:clouserw]]

Comment on attachment 310146 [details] [diff] [review]
Diff for ratings 

yep, and it wfm

Comment 14

[Madhava Enros [:madhava]]

Agreed about the broken workflow.  The original intention was to either not require login to do this or to provide a really easy/lightweight login mechanism (like the one Wil describes in comment 11).

One of the suggestions on the call was to pull the whole section out if the user isn't logged in.  I'm less in favor of that given that one of the goals of the redesign was to make reviewing easier and more prominent (making the fact that you can do it more obvious).  We haven't necessarily achieved the former, but maybe we can still have the latter by leaving the section in.

What about leaving the section in, but disabling it when the user's not logged in?  We can put a "Log In" link near the title (I'll mock this up in a second) which should suggest to people what they'd have to do to activate the section (and we already have that string, I believe).  Then, in the next release, we can try to make the logging-in process cleaner through one of the methods described earlier.

Thoughts?

Comment 15

[Fred Wenzel [:wenzel]]

I like that idea. The disabled review form will serve as a teaser for not-logged-in users. Then in a next step we should provide some sort of AJAX login or so -- maybe even site-wide. But that's beyong the scope of this bug and should also not be a target for the release.

Comment 16

[Madhava Enros [:madhava]]

Attachment: disabled review box with log in link

Comment 17

[Madhava Enros [:madhava]]

Attachment: fixed typo: disabled review box with log in link

Comment 18

[Ryan Doherty (:rdoherty)]

Attachment: Diff for ratings

Added disabled form and login link when user is not logged in. Also removed red 'cancel' button'. Ignore diffs for addons_controller.php, it's for another bug, but needed for addons/display.thtml.

Comment 19

[Wil Clouser [:clouserw]]

Comment on attachment 310781 [details] [diff] [review]
Diff for ratings

I'm r+ing it because it works.  Two more things I'd like to see (not blocking 3.2):

1) I don't think it's clear enough that someone needs to login right now.  Everything is disabled, but there is just a tiny login link at the top - I expect confusion+bugs about what to do.  I think if we could overlay an x% transparent box over the top of the whole ratings widget with a "Login to rate" link in big letters in the middle it would be clearer.

2) If I've reviewed something before, my rating and review should appear in the box and let me change it if I like.  This would also prevent me from doing multiple reviews.

Comment 20

[Ryan Doherty (:rdoherty)]

(In reply to comment #19)
> (From update of attachment 310781 [details] [diff] [review])

I agree with your points, this form needs more work. I have some time available today to see if I can make more changes. Thanks!

Comment 21

[Ryan Doherty (:rdoherty)]

Fixed (other than comment #19) in r11442.

Comment 22

[Stephen Donner [:stephend] Not actively reading bugmail]

Verified FIXED; (tested the JavaScript-disabled case, too!  I found a couple small bugs there, and filed bug 424738).