User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
When building graphics for an app, I have right-aligned a rating from 1 to three stars. Being mainly a designer, my gut told me to fill the stars from right to left. So, i.e. empty empty filled for a 1-out-of-3, and empty filled filled for 2 out of 3.
The rating is given by the app, and in no way will users have to click on the stars to rate things themselves.
What is the best practice from a UX standpoint: filling right to left or left to right?
If you are looking for the most easily recognizable use of a 5-star system, they should work from left-to-right.
The star-rating system is very common now, and when is the last time you saw it work right-to-left? Users will likely find it confusing and will have difficultly understanding why they only gave something 2-stars, when the meant to give it 4-stars. As a result of their familiarity, they "afford" a 1-to-5 star rating leading from the left-to-right.
A straight forward example is justified text:
Justifying text to the right does not alter my interaction/reading of that text. I still read it as I would a left-aligned block.
Additionally, think of a combo-box. Just because we right-aligning the combo-box, we do not alter the way it works:
... or any other control. By placing a control on the left, in the center, on the right, does not necessitate the need (or rarely the desire) to alter its behavior.
Netflix uses filled stars from the left even though the ratings are right aligned.
This follows the ability to quickly scan down the list of ratings and quickly assess at a glance which film is higher rated.
Same goes with Paragraph alignment, as per Evil Closet Monkey's answer.
Same direction as your text.
Star ratings are most easily read when the significant part (filled stars) comes before the filler (unfilled stars). "Before" can mean left or right, depending on the direction your user reads lines of text.
Unless your site is in Hebrew, Arabic or another RTL language, the stars should be LTR.
I would agree with most of the responses, that filling in the stars from left to right makes the most sense due to learned user behaviour from the majority of websites, and English being LTR. A user clicking a star for a rating could definitely be confused by unexpected behaviour.
However, it was stated that this will not be a user-interactive piece. Consider only adding full stars that represent the actual rating: If it has 3 stars, show 3 stars. If it has one star, only show one. If you show empty stars, it may invite user interaction.
You could also have a single star image with a number on it (like IMDB), and a tooltip that displays the full score potential: 1/3.
Suppose you make some text right-aligned, as @EvilClosetMonkey's graphic helpfully shows. Is that any reason to change the text to display right-to-left? It would probably make your words unreadable to most people viewing them.
The reason is that alignment has to do with design, layout and negative space while direction has to do with readability. Text can be oriented, reflected and jumbled around for aesthetic purposes, but if you take it too far, it becomes difficult to read quickly.
That said, stars are more easily parsed than words and less prone to misinterpretation, as this (very authoritative) list of Land Before Time ratings shows (source).
To my eye, all but the very weirdest of those are still easily parsed to tell whether the rating is high or low, which is what the stars are trying to convey.
To sum up, if you really like the style of the RTL filling, then go for it. It won't significantly impact your UX. In my opinion, anyways; I would see that and only pause to think "that's weird" without being bothered by it.
I have never seen a star rating fill from right-to-left. I think the star group is more or less seen as one element. I would not stray from the standard left-to-right filling of the stars.
I would say (little or no real experience here, mind you) that western cultures that read left-to-right will always expect increasing amounts to go the same way (like a dial speedometer).
I have always made slider controls increase to the right without thinking about it...
I would be curious to see how Hebrew or other cultures that read right-to-left expect an increasing amount.
I don't think in reading them it would matter as much for a LTR language, but when someone is clicking a star for the rating I think they would incorrectly assume that they start on the left.
In my experience I have never seen a star rating system start on the right and if I were to click the right most star I would expect to be giving it the top rating.
If you started on the right someone giving a bad review would end up being recoded as a best review if they clicked the left most star and I bet that would really make them mad.
However, as other folks have said, I am wondering what it is like in countries that use RTL. I checked Amazon, but they did not have a country listed that read RTL.
