Rating
Rating component is a five-point scale system that allows the users to provide feedback on their experience with a product or a service.
The component provides a way to engage and empower users to highlight the value or the lack thereof certain content. This will in turn help with the growth of the products and services.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Forms
Demo
Code
Responsive preview
Usage best practices
The rating component has two formats, the notation based scale (1-5) and the 5-star rating system. Provide clear labeling to ensure the quality of the rating.
Based on your goals, understand what parameter(s) to measure and whether a rating system is the most suitable and/or effective tool to fulfill the objectives. A text field or textarea is recommended to use in conjunction so that the feedback could be elaborated on thus providing further insights.
Allow rating to be optional so that the users report the true feedbacks based on their prominent experience.
Consider using rating component when:
- the health of your products and services can benefit from user ratings and feedbacks
- rating scores are expected and relied upon, to help users with their decision making on a product or service
- engaging users to interact with your platform
Usage examples:
- rate an event experience
- rate a service
- rate a product on a e-commerce site
Related components:
Do
Use Rating in combine with other form elements, such as a textarea, to deepen feedback insights with qualitative data
Be clear when communicating what is being rated.
Label at least each end of the rating scale very clearly i.e. 1 being completely disagree and 5 being perfect, etc.
Prompt for rating at the right stage of user's interaction with your platform, such as post purchase or at the end of a visit.
Make user rating optional.