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:
-
1Could you elaborate a little more on what exactly you mean by rating interaction?– Code MaverickCommented 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?– Aaron BenjaminCommented Feb 28, 2014 at 17:14
Add a comment
|
2 Answers
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
View for setting the rating:
answered Feb 28, 2014 at 17:24
-
-
-
1Your 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? Commented 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. Commented Feb 28, 2014 at 18:15
-
1The clickable area in the question is way too small. Code Mavericks answer was a correct suggestion, even with the pitch. Commented Mar 1, 2014 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.
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.
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.
