Is there a best practice or good example showing how a 5-star rating interaction would display on a mobile website for rating content?

See example below: Example

  • 1
    Could you elaborate a little more on what exactly you mean by rating interaction? – Code Maverick Feb 28 '14 at 17:13
  • How would a user give a rating? Small stars aren't exactly "touch-friendly" and the amount of real-estate to make them touchable would be nuts. I can't find an example of a mobile site that allows you to rate content. Are there any out there? – Aaron Benjamin Feb 28 '14 at 17:14

Take a look at the Mobiscroll - Rating & Grading Scroller!


  • Easy Product Ratings
  • Maintains Post Data
  • Updates HTML on Rating

What to do

  • Tap on your Favorite Chocolate
  • Rate Items
  • Try Bubble Display Mode
  • Try it on your phone at msc.li/2t8w

default image

View for setting the rating:

set rating image

| improve this answer | |
  • That might work, I'll give that one a shot. – Aaron Benjamin Feb 28 '14 at 17:29
  • @AaronBenjamin - Ok, let us know! – Code Maverick Feb 28 '14 at 17:34
  • 1
    Your screenshots are informative but the text of this answer reads more like a product recommendation than an actual answer - why is this method of interaction better than the one in the OP? – Joshua Barron Feb 28 '14 at 18:13
  • The question reads: Is there a best practice or good example showing how a 5-star rating interaction would display on a mobile website for rating content? I answered it by giving an example of a mobile rating scroller that does exactly that. The question you are asking in your comment was never asked. – Code Maverick Feb 28 '14 at 18:15
  • 1
    The clickable area in the question is way too small. Code Mavericks answer was a correct suggestion, even with the pitch. – SwankyLegg Mar 1 '14 at 23:33

There are different ways for user to give a rating on mobile devices. Below I'll show you three different methods of some sites/apps accomplish this.

Google Play Store You've expressed concern about the limited real-estate in mobile view and how it could be hard for user to rate content. Google Play just made the rating UI larger. Instead of the small rating at the corner like in your mock up, you could use larger stars on the content detail page.

enter image description here

Amazon.com Another method is to list out all the rating possibilities so user can clearly all the available ratings and can simply tap on the rating they wish to give from a list.

enter image description here

Zappos.com If you have UI contrains and can only small star rating on the UI, you could use a light-box to display a list of the ratings when user tap on the smaller rating icons.

enter image description here

| improve this answer | |

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.