For designing a rating system it’s always good to decide if it’s going to be binary, qualitative or quantitative. Binary means a “yes/no” option. This could be a thumb up and a thumb down, a happy face and a sad face, basically any positive and negative options. A 2-options system. Qualitative is something you can qualify, meaning you can decide what’s good or what’s bad, what works perfect and what could get better. And Quantitative means that you can decide in a specific amount how good it is. From 1 to 10, or 1 to 5. It will depend on the amount of options you want to give the user.
The GoPato App needed a rating range to qualify their orders of 1 to 10. This because of the Net Promoter Score® or NPS®, which is the system we are using to measure the experience of the customers and to predict the business growth. It measures it in a simple way according to the rating the customers do:
• 0–6 rating: unhappy customers who can impede growth by negative comments about your brand.
• 7–8 rating: satisfied unenthusiastic customers who can also go with other competitive brands.
• 9–10 rating: satisfied and enthusiastic customers who are going to keep using the brand and probably going to recommend it.
So we decided to use a universal icon for rating, making it easier to the user to know how it works: a Star. So we would have 10 stars. We thought about different options. Maybe it would’ve been simpler for the user to have 5 stars and small circles in the middle of them to represent the other 5 qualifications. But it could’ve been seen as the halves of the numbers, and we wanted to show the real 10 stars the user could give.
As the 10 stars are more complicated than just 5 stars (Hick’s Law: reduce the number of options to make the user’s decision-making process faster), we wanted to make something dynamic. Something that the user wouldn’t care to rate and that the experience would be something nice and satisfactory. We thought that slider would be a good option, because the user can get playful and slide to the right, and to the left, and always see the animation of how the stars get yellow and gray again. Another way of doing it was with a tap, when the user taps 5 stars, the first 5 stars get yellow, and same if the user taps 7, 8, 9… So we decided to do both without making it too overloaded.
The design of the slider is something simple and fits well to the general design of the app. 10 gray small stars, and a gray slider down. Both get yellow according to the amount of stars that the user gives.
The encouraging way to make the user feel satisfied with the rating process, is to make an exploding animation after the stars are selected. If the user selects one star, there’s a small explosion over the first star only, if he selects two stars, there’s an explosion over the first two stars, and so on… until the 10th star, which rotates on itself and all the stars grow a little, and when they get to their original size the explosion of small yellow and gray circles occurs going up and disappearing into the pop up-rating window.
And one more thing…
Before starting to rate, just to lead the user a bit further into how it works, the yellow slider makes a “giggling bouncing” movement to catch the user’s attention and make him start playing with it.