Rating Control
FUIRatingControl
Intro
The rating control is used to indicate an average rating for an object. It also allows for users to set their own rating on a numeric scale from 1 (lowest) to 5 (highest).
Rating controls in compact width (left) and regular width (right)
A. Leading Text (Optional)
The leading text for read-only states describes the average rating value.
B. Rating Controls
The rating controls display the rating of an object.
C. Trailing Text (Optional)
The trailing text describes the average rating value or indicates the total number of ratings.
Rating control anatomy
When users are enabled to set a rating, the larger interactive type of the rating control should be used. Users can either tap the stars individually or tap or slide their finger horizontally along the stars to select their desired rating.
The small display type can be used in filter form cell buttons to allow users to filter products or objects by rating.
Different uses of rating controls
Rating Control Stars
In an editable or disabled rating control, only full or empty stars can be used. However, in read-only states with multiple ratings, half stars can be displayed. For example, on a scale of 0 to 5, a rating less than 0.75 shows as a half star; a rating from 0.75 to 1.25 shows as a full star; and a rating from 1.25 to 1.75 shows as a full star plus a half star, etc.
Rules of showing a full star and a half star
The read-only variation displays the rating in a large or small read-only format. The flexible sizing is designed to be used with other components such as the data table, filter form cell, or object cell. Additionally, there is an option for accented read-only rating controls to show semantic colors instead of the default color.
Large read-only rating control (top) and small accented read-only rating control (bottom)
Interactive
The interactive variation is a larger tappable variant of the editable rating control that enables the user to set the rating of an object. It can be used in table view cells or in a create form when the user is giving a rating for an object. When the field is not accessible to the user, the editable state can be set as a disabled state.
Editable rating control (top) and disabled rating control (bottom)
Development: FUIRatingControl
SAP Fiori for Android: Rating Control
SAP Fiori for Web: Rating Indicator
Human Interface Guidelines: Rating Indicators
Related Components/Patterns: Rating Control Form Cell
Your feedback has been sent to the SAP Fiori design team.