I am having an issue with giving the user the option to "wipe clean" or "nullify" ratings after they have given those ratings by hovering over them and clicking. Consider the classic 5-star rating. Once the user assigns a rating by hovering and clicking, then can change it to any number of stars by repeating the process, but what if they want to take it away altogether? My current solution is to give a border and a "delete cross" on the top right corner so they can just wipe it clean by clicking on the cross. But i am open to suggestions.

Please see below if the user has already assigned a rating, they will see the border witha cross appear upon mouseover and  they can then wipe it clean by clickcing on the cross

  • Is there a specific reason why that would be necessary? Do you have any usecase or scenario where removing ratings would be absolutely necessary? Jul 18 '17 at 4:44
  • 1
    Yes- if I gave a rating to the wrong student. For instance
    – Sam Rao
    Jul 18 '17 at 4:48

One option that you have is to create another state on your rating component, the "Not Rated" state. Add one extra asterisk at the beginning and add below it the label "Not rated", give it a different color from the rest of the asterisks i.e. blue. The initial state of the new asterisk must be filled, once a rating is selected the first asterisk turns into hollow. The user can revert to the "Not rated" state by simply clicking on the first asterisk labeled not rated. Something like this :

enter image description here

  • Another option could be to keep the same amount of 5 stars. Only when you click on the one you have applied all the starts become empty. Sort of like a checkbox behaviour if that makes sense. Jul 18 '17 at 7:42
  • I would probably go for a different icon for "Not rated", to make it clearer that it's not just a very low score.
    – TripeHound
    Jul 18 '17 at 10:02

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.