Ratings
Ratings cover two jobs that share a name and very little else: a picker that collects one person's score, and a summary that reports the average a population has already left. The picker is an input with a small labelled scale and a hit target per step. The summary is read-only, a number, the glyphs drawing it, and the count of responses behind it, which is the part that says whether the average deserves any trust.
A score on its own gives you a mood and nothing to act on, so the picker worth shipping is the one with a note field under it: the number sorts the responses and the sentence explains them. One detail decides whether the picker works at all, and it is easy to miss, every step has to look different. A row of identical glyphs filling left to right says only that a rating was left. A row of faces running from angry to grinning says which one, which is the entire job of the control.
Bar with a note
Best for
Post-purchase surveys, ticket close-out, anywhere the score needs a reason
Anatomy
Five faces from angry to grinning · the pick shown by the cell fill and the face itself · a controlled feedback textarea
Score stacked
Best for
Product page headers, App Store-style blocks
Anatomy
The score over its average, total and a review-count link
4.5 ∙ 5.2K ratings
Score inline
Best for
Review section headers, comparison rows
Anatomy
The score and its counts on one line
4.5 ∙ 5.2K ratings
Heart score
Best for
Saved and favourited counts, where the summary should not read as a star review
Anatomy
The stacked score drawn from the heart glyph set: solid, half and outline
4.5 ∙ 5.2K ratings
Using Ratings
Reach for it when
- Closing a support ticket, where the score needs a reason beside it
- A product page header that has to carry the average and the number behind it
- A one-off survey after a purchase, where a short scale is all you can fairly ask for
- A saved or favourited count that should read as affection rather than as a review
Reach for something else when
- You need to know why more than how much: ask an open question, because a bare score points at no fix
- Responses will only ever number a handful: an average over a tiny sample claims an authority it has not got, so show the raw count instead
- The answer is yes or no: helpful against not helpful is two buttons, not a scale
Where it shows up
Ticket close-out
A resolved support ticket ends with a five-face pick and a note field. The faces take a second to answer and the note is where the reason lives; without it the score has no route back to a cause.
Product page headers
A store page leads with the average, the total it was drawn from, and a link into the reviews themselves. Stacked, that anchors the top of a page; the same figures inline suit a dense comparison row.
In-app feedback prompts
A prompt after a completed task asks how it went and takes a sentence with the score. It gets answered because it is short, it is in context, and ignoring it blocks nothing the person came to do.
Favourite counts
A heart score counts affection rather than quality. Drawn from its own solid, half and outline glyphs, it reads as saves and likes and is not mistaken for a review average that came out of a survey.
Questions
Should a rating scale have five points or ten?
Five is the usual answer, because a person can hold five positions in mind at once and each one can be given a name, from very dissatisfied through to very satisfied. Ten points buy a precision nobody has: the middle values blur together and responses cluster anyway. Pick the scale your reporting genuinely distinguishes, then label the ends so the values mean the same thing to everyone.
How should a star rating handle half values?
Show halves in a summary and not in a picker. An average is a computed number, so a half-filled glyph renders it honestly; a picker that accepts halves asks for a precision people do not have, and the targets get small enough to mis-tap. Expose the underlying value as text as well, so the meaning is not carried by glyph shapes alone.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPRatings
Ratings cover two jobs that share a name and very little else: a picker that collects one person's score, and a summary that reports the average a population has already left. The picker is an input with a small labelled scale and a hit target per step. The summary is read-only, a number, the glyphs drawing it, and the count of responses behind it, which is the part that says whether the average deserves any trust.
A score on its own gives you a mood and nothing to act on, so the picker worth shipping is the one with a note field under it: the number sorts the responses and the sentence explains them. One detail decides whether the picker works at all, and it is easy to miss, every step has to look different. A row of identical glyphs filling left to right says only that a rating was left. A row of faces running from angry to grinning says which one, which is the entire job of the control.
Bar with a note
Best for
Post-purchase surveys, ticket close-out, anywhere the score needs a reason
Anatomy
Five faces from angry to grinning · the pick shown by the cell fill and the face itself · a controlled feedback textarea
Score stacked
Best for
Product page headers, App Store-style blocks
Anatomy
The score over its average, total and a review-count link
4.5 ∙ 5.2K ratings
Score inline
Best for
Review section headers, comparison rows
Anatomy
The score and its counts on one line
4.5 ∙ 5.2K ratings
Heart score
Best for
Saved and favourited counts, where the summary should not read as a star review
Anatomy
The stacked score drawn from the heart glyph set: solid, half and outline
4.5 ∙ 5.2K ratings
Using Ratings
Reach for it when
- Closing a support ticket, where the score needs a reason beside it
- A product page header that has to carry the average and the number behind it
- A one-off survey after a purchase, where a short scale is all you can fairly ask for
- A saved or favourited count that should read as affection rather than as a review
Reach for something else when
- You need to know why more than how much: ask an open question, because a bare score points at no fix
- Responses will only ever number a handful: an average over a tiny sample claims an authority it has not got, so show the raw count instead
- The answer is yes or no: helpful against not helpful is two buttons, not a scale
Where it shows up
Ticket close-out
A resolved support ticket ends with a five-face pick and a note field. The faces take a second to answer and the note is where the reason lives; without it the score has no route back to a cause.
Product page headers
A store page leads with the average, the total it was drawn from, and a link into the reviews themselves. Stacked, that anchors the top of a page; the same figures inline suit a dense comparison row.
In-app feedback prompts
A prompt after a completed task asks how it went and takes a sentence with the score. It gets answered because it is short, it is in context, and ignoring it blocks nothing the person came to do.
Favourite counts
A heart score counts affection rather than quality. Drawn from its own solid, half and outline glyphs, it reads as saves and likes and is not mistaken for a review average that came out of a survey.
Questions
Should a rating scale have five points or ten?
Five is the usual answer, because a person can hold five positions in mind at once and each one can be given a name, from very dissatisfied through to very satisfied. Ten points buy a precision nobody has: the middle values blur together and responses cluster anyway. Pick the scale your reporting genuinely distinguishes, then label the ends so the values mean the same thing to everyone.
How should a star rating handle half values?
Show halves in a summary and not in a picker. An average is a computed number, so a half-filled glyph renders it honestly; a picker that accepts halves asks for a precision people do not have, and the targets get small enough to mis-tap. Expose the underlying value as text as well, so the meaning is not carried by glyph shapes alone.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
