2

I'm adding reviews functionality to a website. Currently, the form where users can enter a review and/or rating looks like this;

Current Form

When the user clicks one of the rating stars, the page makes an ajax request in the background that submits this rating, then pops up with an alert box informing the user that "Your rating was saved successfully!" and the "Rate Now:" message changes to "Your Rating:" after the alert has been exited. This happens nearly instantly.

However, some of my test users have been submitting the whole form needlessly and causing blank reviews to show up in the site (I'm guessing because they think they need to click "submit" for the rating to count as well). While obviously I'll fix the backend so that it will reject blank review submissions, I'd like a way to make it clearer to new users that these are two separate entities and they can exist without each other (reviews without a rating are fine, and you don't have to write an essay to vote).

My first thought was to move the rating stars away from the reviews box, into the box where the item and its details appear. However, if a user submits a review, their rating is shown alongside it, so they do need to look like they're connected, while still making it clear that both are optional.

Thanks in advance for any suggestions you might have.

3

I would just have one simple form. That's what your users are expecting anyway. They click the star rating (or not), fill out the form (or not), and then click submit. No AJAX (unless you want to capture the star rating as soon as they click in a way that's transparent to the user) needed.

You didn't ask about this, but 10 stars seems like it's too much. You might want to take a peek at commentary in questions like this:

https://ux.stackexchange.com/a/59728/51882

I wouldn't do more than 5.

  • Goodreads does this pretty well -- users can leave just a star rating, just a review, or both, using one form. It's pretty elegant. – Stacy H Dec 18 '17 at 20:37
2

From your description, I understand that the rating is mandatory while the description is optional. You can have two solution here:

  1. You can make use of Progressive Disclosure. Quoting from the NN/g article:

Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone. Initially, show users only a few of the most important options.

To begin with, just show the Rating. Once the user selects a rating, show/disclose the description panel. In this way, you can ensure that the rating will be submitted by the user.

  1. Disabling the submit button until the rating is submitted and showing more emphasis on rating. That's how Uber does it for rating drivers.

enter image description here

  • Neither of the two is required. If the user doesn't rate the product, such as a product not yet released, I simply display "No rating" along with their review. At the moment I'm leaning toward showing just the rating stars and having a button that says "Write a review as well" or similar. – John Cave Jul 30 '15 at 7:32
  • Ok. I think then the first option (Progressive Disclosure) will suit your need. – Adit Gupta Jul 30 '15 at 7:34
2

One solution is to visually demarcate the forms, as shown below:-

enter image description here

enter image description here

  • I think this would work if I had two "Submit" buttons, but currently the stars are handled asynchronously and I'd like to keep it that way to encourage people to just tap a rating as they browse. If progressive disclosure doesn't work for my test users, then I'll look at doing this. – John Cave Jul 30 '15 at 18:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.