Ratings

What is a Rating?

Ratings provide a way for users to evaluate or assess content. User-submitted Ratings can help users evaluate whether or not something is fit for purpose.

When, and why?

A Ratings system is useful when you need users to engage with your product to express their emotion towards a particular item, or make more complex decisions by using other users' feedback. Ratings are an invaluable source of feedback that can help surface issues with products and inform innovation.

Rating types

The following Rating types are available:

Using Ratings

Rating Types

The star (1-5 scale) type works well when you want feedback on a new feature or if the rating is to be shared with other users e.g. '145 rated ‘X’ 4/5.

The Faces (satisfaction scale) are directly liked the user emotion and would be best suited when you are asking the user about their overall experience on a product or workflow.

Thumbs (like or dislike) and hearts should be seen as reactional feedback and given in direct response to something intending to give instant results. For example, a blog post, a help document, a diagram, or image. This type of feedback can be used to promote content or help get high-level insights

Once you have chosen a Rating type, you should stick to that type throughout your product. Comparing data from different source types can be difficult, and mixing different sources of data collection can lead to poor quality data.

Rating frequency

Ratings are an excellent source of quantifiable feedback, but user uptake can generally be harmed by bombarding the user with constant requests for feedback. If you make use of the Ratings component, take care not to use it too frequently. Remember that there are other sources of user feedback, such as /[User Research](link to user research guideline).

Ratings can be used in multiple ways to either collect or present different types of data. There are no hard set rules on using the Ratings components, except that you should keep it consistent throughout your product and do not bombard the user with too many on the screen at one given time.

Component accessibility

This component has been built to meet the current WCAG AA 2.1 guidelines. We also test these components against the guidelines before release.

Aria tags

Every component in Mosaic requires an appropriate Aria tag to ensure that screen readers can effectively parse the page. Aria tags are provided as part of Mosaic. Please do not override these without good reason.

Ensure that Aria tags are used as appropriate signposts throughout the product.

Colour Combinations

When designing with Ratings, you should be mindful of the colour combinations you are using. The components have been designed with this in mind, but if you are using colours that are not part of the default component, please ensure that there is a clear colour contrast within the parts of the component and between the Ratings and the background it is on. To check the contrast, please use WebAIM's contrast checker.

Focus state

Ratings needs to have a focus state - a focus state is when you tab into an element to interact with it. Ensure that users can use their keyboard to focus on the Ratings.

Icons

An icon needs to have underlying code that describes what action the icon takes. the labels should be specific - for example, a 'bin' icon for delete should be labelled 'delete' not 'bin'.

Key Binding

Ratings needs to be able to be interacted with via a keyboard. Where possible we will provide key-binds within our Mosaic component or there will be default HTML ones. If this isn't the case then please implement logical key-binds for all intractable components.

Movement/Animation

Please refer to the WCAG guidelines for the time-based considerations for animations.