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

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files

Functional grouping: Forms

Demo

How satisfied are you with this page? (required)
This field is required

(1 is very dissatisfied and 5 is very satisfied)

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.