Rating Indicator
A rating indicator visually represents quality, satisfaction, or preference using a fixed scale (commonly stars, hearts, or dots). It can be read-only (displaying ratings) or interactive (collecting user feedback).
Philosophy
Rating indicators provide a quick, universal way to communicate feedback.
They help users make decisions quickly (e.g., product reviews).
They allow users to contribute opinions with minimal effort.
They must be clear, consistent, and easily scannable.
Anatomy
Variants
Standard
Most common style (out of 5).
States
Empty
No rating given yet.
Active
Items filled to show current rating.
Usage tips
Dos
Use a consistent scale (commonly 5).
Show numeric value alongside icons for clarity.
Provide immediate feedback when rating is submitted.
Don’ts
Don’t use ambiguous icons that users may not recognize as ratings.
Don’t hide ratings if they influence decision-making (e.g., reviews).
Real-world example
