Rating Stars
Rating stars is a pattern you'll find in almost every website. It has two main usages. First, it allows the user to give feedback on the current experience with a product or a service. Second, it allows a brand to provide some informations on other user's opinion on a product or a service to make his choice easier.
Variations
For each use case we have one dedicated element :
Rating stars input
This allows the user to rate a product or a service. The user can only give an integer rate from 0 to 5 by clicking the corresponding star.
Rating stars result
This use case is made to display notes from 0 to 5. This case allows half values, like 2,5 stars for example. This case shows the results of user rated products or services.
Sizes
We designed rating stars with modularity in mind. You will find four different sizes of these to adjust to your needs.
- Small
- Medium
- Large
- ExtraLarge
Do's and Don'ts
Never use single rating stars. They should always be displayed within a group of 5.
mc-stars-input should always have a label that indicates the user the ability to rate the product or the service.
Don't try to reinvent standards and stick to the 5 stars ratings.
Always use real data with rating stars. Never fake data to enforce a product or a service quality.