The UI and UX of rating content on mobile

6 min readJun 29, 2016

You want to let users democratically decide which content is better, which products are worthwhile and let them rank items in a way meaningful for them. This gets back to empowering users and letting them use the content in a natural way.

When rating content, you might be doing it for yourself or for sharing your opinion on something with the world.

Let me give you example. After I watch a movie I like to give it a rating on IMDB. I don’t usually share it with anyone, so it’s not like I am posting it on Facebook, it’s just a little database that I am building up for myself where I can return to and enjoy nostalgic moments scrolling through the movies I watched. Interestingly enough there are a couple of things I do with the content later on. I didn’t plan for any of it and certainly didn’t start entering data because I had a specific goal. I just open the app from time to time and check which movies I gave a 10, 9, 8 and so on. It also helps me to recommend certain films that I liked to others.

This brings up two questions:

Why do people want to rate content, what’s their intention?
What do they want with the rated content, how do they want to get back to it?

Both are important things, which will help you decide how to design the entire rating experience.

Why are people rating content

The first thing to figure out is the motivation behind the rating action. In my case it was for building a library of movies that I saw and stick a number to it telling me how much I liked it. So what fits the bill?

We’ll have to kick out the binary rating, like or dislike… that doesn’t really help me. There is much more to this than just 0 or 1.

Sticking a value to a movie could help. Should it be 1 through 5 or 1 through 10? Well, 1–5 might be enough, but after some more consideration if I give a movie a 2 out of 5 that would translate to something like a 4 or 5 out of 10. A 4 or 5 might not be the best movie. Also giving a 2 doesn’t translate well either.

What if I give it the lowest score? That could be translating into 1–3 on a ten scale… so what does it mean? If i give a movie 1 it probably means I just watched the first 10 minutes, and are already regretting it. Taking this exercise helps me get to a conclusion. I need more fine-grain control over rating, so I would go with a 1 to 10 scale.

Another cool thing that IMDB does, when you select the rating, it will show you other movies you scored the same. This instantly makes you compare, and might make you slightly increase or decrease your initial choice.

How are people consuming rated content

Going back to my personal movie library, I open it up for a couple of different things, depending on context. I use it to check which are the best movies I saw. I might use it to recommend movies to friends and family. I also use it sometimes as a segmentation of my long movie list.

Every job is different, so you’ll have to learn what your users are using the ratings for and design to solve the job better or make it more enjoyable for them.

Let me give you another quick example. When you are shopping on amazon, do you look at the product ratings? What does a high number of stars or a high count of ratings mean? It signals trust, it shows if people like a product, it shows if it is popular product or not.

Scroller Rating

Think of this as a contextual modal with rating functionality in it. It has a familiar scrolling interface, which works well on mobile. Instead of having the value written out in text, it has the number of stars highlighted for each value. Use it whenever you have to conserve space, and you don’t have a way of rendering inline rating.

Inline Rating

This a solution that works well on mobile and desktop. The user can easily see the number of available options (from 1 to 5), and choose a score by tapping on the appropriate star or by sliding over the control. If the space is available, use the inline rating versus showing a modal, since it takes at least two interactions less than with a contextual scroller — one tap for opening the scroller and another for submitting the selection.

Binary choice

Provide a binary choice if you would like to promote content based on feedback from people liking or disliking it. Display the count of both the up and down votes. Ideally the content should be ordered by the number of votes, starting with the most liked items.

Satisfaction

Some things are not binary and cannot be represented by a number, for instance “How much did you like this experience? Rate it from 1 to 3”. In those situations it makes more sense to provide something that the user can relate to, like an emotion. Did you like it, did you hate it or you didn’t care. These can better describe the feeling that you have than giving it a score from 1 to 3. You can use text to describe the feeling, but sometimes icons work pretty well.

Slider

Use the slider to provide means for giving something a numeric value. If your user has to give a rating from 1 to 10, having a slider makes a lot of sense. It’s better than providing a scroller or just a simple input. Keep in mind that the slider is only a means for the user to pick a score, so make sure to have the actual value displayed.

Aggregated score

User ratings are important and valuable data. You can use it to provide more value to visitors by aggregating scores and helping people decide by giving them more data points to compare. It’s a very common thing on e-commerce websites to have a user rating on products. Not everyone can pull this off, but companies like Amazon do a great job at making all this information useful to the user and help them decide on what to spend their money on.

A rating mechanism can provide value for each individual user plus it can add value to the overall content of your app or website. It is important to know why people are rating and how do they use the rating data itself.

All examples were built with Mobiscroll. Download and remix demos and make your app shine.