I came across this rating problem, whether it is a good user experience to keep both stars and smileys? If any one of the rating system is better than the other, please tell why and when to use it?
I could be wrong but I think here the smiley faces are the only rating system. The stars are a filter for 3 star hotels, 4 star hotels, etc....
Which....yes. Isn't immediately obvious at all and is quite confusing. It looks like they are using two separate rating systems.
The user experience flaw here I would say is in using pictures and the simple word stars rather than a clearly labelled "Hotel categorization" category, under which I would simply write 1 star, 2 star, etc... I could be wrong and ideally this should be tested with users but I don't think that this is a particularly important filter and it will only be used by a subset of users.
In particular having the hotel's star rating in such a prominent place right next to the user rating....This is poor placement.
Putting this aside and looking at the question itself however-
There should only be two or more rankings if they fill a definite and alternative purpose. If both are asking for a overall ranking this is redundant and useless.
It could be argued that, once you have your two rankings with definite different purposes, that having one be smiley faces and one be stars is a good thing. It does help to distinguish them from each other and ensures users don't get them mixed up. However it does make comparing categories a little difficult and does a lot of harm to visual consistency.
One idea where having different ratings could work well would be if they are relevant to what is being rated- for example if you have an app for hardcore food obsessives to rate Italian restaurants and you give a place 4 pizzas out of 5 and 2 pastas out of 5 (categories should be clearly labelled of course). Even in this odd, very niche best case however we would be putting cuteness and visuals above usability. In this hotel case I fail to see how this kind of thing could work.
Overall I would err on the side of visual consistency. If you need more than one type of ranking then keep it using the same system on the same scale. Making sure users don't confuse them is important however merely labeling them properly and giving them their own clear space is enough.
I'd strongly suggest avoiding duplication to reduce the cognitive and motor load.
By using both, we are leaving the user in a confused state, rather than providing the solution from the UX standpoint. Sometimes the user may get annoyed and doesn’t feel like giving the feedback which eventually creates more problem for the products and services which are listed.
Imagine if you have both of these and wanted to provide a filter or facets based on the ratings? How would you do that? Definitely, there would be ‘conflict’ from the development standpoint if both are not in sync or equal. Again, it creates a confusion on filters/ facets as well. The ratings play a major role when we have to shortlist from huge items and make the decisions.
When to use Stars: To get an accurate rating
When to use Emoji: Used to measure the ‘likeability’
If its for hotel comparison site you can use both stars and smileys. However, the stars should represent the hotel quality rating, not the user ratings. So the users will be able to filter hotels by star rating, and user rating. For example, show me all 3 star hotels with user rating more than 4.
Otherwise, if its not a hotel comparison site, please use only 1 rating scale: either stars or smileys. Having both will confuse the users.
I think using a dropdown for selecting the "stars" will look alot better, unless it's a multi selection option. The way star icons are presented like "box" doesnt appeal to the ones presented in the listing.
this tends user to get confused....smileys are used to ask how they feel. and stars are used so that results can then be filtered on basics of numbers of stars.
at 1st glance this looks like a duplicated rating system. but after a 2nd look you realize these are 2 different rating logics. The stars are classifications of the hotels which is pretty standard in the hotel industry, while the smileys are user ratings.
I think both of these can be used. However this can be improved in terms of visual representation. overall just with proximity and visual style of both these filters look too similar.
The easiest fix would be to change the labels of the filters. call 1 'hotel classification' and the other 'user review rating'
distance them away from each other
use a different control such as a slider for one of them.
Change one of the controls to a sorting or a grouping method. The user review rating would be a better candidate for this. As while users would want a certain minimum hotel star rating. User reviews ratings might be subjective
The best way is to do a usability study and show a unbiased averaged user and make improvements based on their feedback. you could test out different variations and see which works best on your test users.