Components
Rating
A star rating component is a user interface element that allows users to provide feedback or rate items by selecting a number of stars, typically ranging from one to five.
Anatomy
The Rating component is a user interface element designed to collect and display user feedback or ratings for products, services, or content.
- A set of symbols (e.g., stars, thumbs, hearts) representing the available rating options.
- Visual feedback when users hover over or interact with a rating symbol, indicating interactivity.
Usage
Rating components can be used in a variety of contexts, such as:
- Product pages
- Review sites
- Social media platforms
- Customer surveys
- Feedback forms
When to use
- When you want to collect feedback from users about a product, service, or experience.
- When you want to allow users to compare different products, services, or experiences based on their ratings.
- When you want to use ratings to improve your product, service, or experience.
When not to use
- When you need to collect detailed feedback from users.
- When you need to collect ratings for a complex product, service, or experience.
- When you need to collect ratings from a large number of users.
Accessibility
To ensure that the Rating component is accessible to all users, consider the following guidelines:
- Make sure that the rating component fully navigable and interact using a keyboard.
- Ensure to avoid relying solely on color to convey meaning, and ensure sufficient contrast for symbol visibility.
- Maintain visible focus indicators on interactive elements for keyboard users.
- Provide appropriate ARIA labels and roles to make the rating symbols and labels understandable to screen reader users.
Do
Use colors with good contrast.
Don't
Never use colors with poor contrast, like similar shade of the same color.
Do
Choose right symbol for rating scale.
Don't
Never use symbol wihtout clear purpose.
Content
When implementing the Rating component, consider the following content guidelines:
- Include a concise label or title that indicates what is being rated.
- Use clear and universally recognizable symbols (e.g., stars) for user ratings.
- Optionally, include tooltips that provide additional context when users hover over rating symbols.
- Display a confirmation message after users submit their rating to acknowledge their input.