6

Some time ago I implemented inline rating control for iPhone applications: enter image description here

It has configurable amount of stars (depends on the app) and optional clear button (at the most right). The control works just fine, but after some period of time I've noted that a lot of other iPhone apps use different pattern: they have a link or button "Rate something". Once user tap on it, either modal popup window appears:

enter image description here

or it popups as bottom/upper side panel:

The question is: What is the best approach for mobile apps to get user's rating and why? Also, why none of them describe what 2 or 3 or whatever number of stars means to the app?

enter image description here

1 Answer 1

3

I strongly believe the question you're asking is purely context specific.

For starters, I believe the "clear" button in your implementation is wrong because in a star-based rating system, a series of empty stars means the worst possible rating the control can accept. It's like grading something 0 in a 0-5 scale.

In the 2nd screenshot you provide it is Apple's way of requesting rating feedback when the user is about to delete an app. Funny thing, the usage of a "modal" UIAlertView (although they couldn't do it in another way) for that action is in direct violation of their own guidelines (iOS HIG), namely:

Ask for confirmation of user-initiated actions. To get confirmation for an action the user initiated, even a potentially risky action such as deleting a contact, you should use an action sheet.

In the 3rd screenshot, the pseudo-modal view is used because the rating area (the red stars in the dimmed region) is clearly way smaller than the suggested minimum 44px area a human finger can coherently tap onto, so the developer decided to use a supplementary control that is displayed modally (to hierarchically draw attention) that features the same functionality, only in a size that's more comfortable to interact with.

In the following screenshot, you can see a view I designed for one of my client's projects. The rating controls (4 of them) are all included in the same hierarchical level and are designed so the user can clearly submit his feedback without interacting with any other controls. The labels prefixing the starred rows are "food", "services" and "ambience" in English and there's no need to explicitly state what 2 or 3 out of 5 stars means for food quality. It's like asking yourself, from 1 (worse) to 20 (best), what grade would I give to my girlfriend looks. A number makes sense to grade it. HOWEVER, in the last row, the user is asked to rate how "costly" is a Point Of Interest.... if you think this over, cost is something that needs to be expressed in quantity thus there are explanatory numbers in euro in parentheses right under the "rating" euro symbols.

Finally, rating more or less implicitly implies some sort of scale. For example, in YouTube videos it's either positive (thumbs up) or negative (thumbs down) rating. In EURO NCAP crash tests -where they rate a car's behavior in a crash- they use 1 to 5 stars. In the high-school I went they graded quizes, essays and tests from 0 (worst) to 20 (best) because there could be so many in-between states.

In my personal humble opinion, I'd assume a 5 star rating is sufficient for any mobile based rating system and you can display it anywhere you (or your designer) prefers, provided that each star is contained in it's own 44px "personal" tappable area.

All the best, Thanos

enter image description here

2
  • But your solution takes much more space and doesn't look so elegant... But thanks for sharing the opinion Mar 8, 2012 at 23:07
  • My solution takes more space because in this specific context, the main purpose of the view is for the user to generate a rating and a review for a POI. They don't pay a secondary role in the interface, it's the main action.
    – Thanos
    Mar 9, 2012 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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