2

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

2
  • 1
    Could you elaborate a little more on what exactly you mean by rating interaction? Feb 28, 2014 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? Feb 28, 2014 at 17:14

2 Answers 2

0

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

Highlights

  • 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

7
  • That might work, I'll give that one a shot. Feb 28, 2014 at 17:29
  • @AaronBenjamin - Ok, let us know! Feb 28, 2014 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? Feb 28, 2014 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. Feb 28, 2014 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, 2014 at 23:33
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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