Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
1  
From a UX standpoint, the question "Is this the best practice from a UX standpoint, or should I flip the fill order?" isn't exactly great either. One could read it as "Is this order (=rtl) better, or should I flip the fill order from normal (=rtl)?". Please do reword that sentence. –  AJMansfield Mar 24 at 19:02
5  
Interesting parallel: Do RTL languages use star ratings that start from the right? –  Erty Mar 24 at 19:33
2  
Please wait until the stars are aligned in order to successfully summon an Old One –  Lohoris Mar 25 at 14:36

8 Answers 8

up vote 33 down vote accepted

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 say 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:

enter image description here

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:

enter image description here

... 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.

share|improve this answer
    
Agree with the answer, though I'd be interested in the root of the left-to-right convention. I would expect the way counting numbers are represented e.g. 1,2,3,4,5,... would be a strong influence. –  Jayfang Mar 24 at 20:29
    
@Jayfang: The stars are a form of bar-chart not a form of numeral. The direction of horizontal bar charts is conventionally left-to-right - at least in locales with a left-to-right writing system. –  RedGrittyBrick Mar 25 at 10:52
    
@Jayfang The root of the left-right convention has more to do with language and culture than numerical influence. –  Pdxd Mar 26 at 13:16
    
@Pdxd sure got that, as is L-to-R the default associativity in say computing. But the "Stars" concept needs to be mapped (at least when initially seen) to be understood. i.e. I understand why RedGrttyBrink thinks mapping is to a bar chart. –  Jayfang Mar 26 at 15:45

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.

netflix

Same goes with Paragraph alignment, as per Evil Closet Monkey's answer.

share|improve this answer
9  
But Live Free or Die Hard is rated higher than Zodiac implying that users are completely baffled by the system. :) –  Raff3000 Mar 25 at 10:02
    
Haha possibly but Netflix has an amazing rating algorithm that is great at predicting what I'll rate the movie at...also, this isn't my list, it's a google image. XD I've never heard of half those movies. –  Pdxd Mar 25 at 11:04
1  
True. Some of these sites are getting so good at this I want to just tell them to sort out my viewing shedules for me. Ultimate UX - "Just tell me what I'm going to like" –  Raff3000 Mar 25 at 11:28

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.

share|improve this answer

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.

share|improve this answer

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).

various methods of filling star ratings

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.

share|improve this answer
    
The best ui is invisible though. I don't think you want users to pause at all. –  Pdxd Mar 25 at 11:08
    
Naturally, I agree with you @Pdxd. I was only pointing out that, as far as bad UI's go, you can do far worse than filling stars (which is essentially a bar chart) from right to left. –  Patrick M Mar 25 at 14:13

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.

share|improve this answer

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.

share|improve this answer
    
I agree with @LeeShelton. Eye scan is LTR in most languages, but RTL in Hebrew, Arabic, etc. Perhaps a more definitive answer would be in order from native speakers of those languages, but my gut reaction would be to go RTL for those languages. Now, they're actually bidirectional to accommodate LTR phrases, so be careful if you're mixing in, say, some English in the vicinity of the rating stars! Perhaps it would be best, if there's any chance of ambiguity, to add some sort of "scale" to the stars, such as a frown at the low end and a smile at the high end. –  Phil Perry Mar 24 at 20:06

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.