I have made a custom interface object to handle user rating in a take-away app I am currently building.

But I am not sure if it's intuitive enough in its form.

Q : Would you understand an object like this, if it appeared in a app? Would you have any constructive ways of improving the look, feel or functionality of the slider?

Also : Should I write Rating: on top of it, to make sure everyone knows what is going on?

Default: enter image description here

When sliding down: enter image description here

When sliding up: enter image description here

Full movie of app : http://www.youtube.com/watch?v=ldfCkrwHwYs

  • 1
    Is the slider discrete or continuous? +1 btw, I like the look of it. Commented Jun 5, 2012 at 8:47
  • I'd totally understand it. Looks very nice, and a lot more pleasant than the old radiobutton clicking. It also gives a much nicer overview I think compared to a grid of radiobuttons. Commented Jun 5, 2012 at 8:54
  • I might write "Rating :" on top of it, just to clarify for everyone what it means...
    – Nils Munch
    Commented Jun 5, 2012 at 9:03
  • @NilsMunch to be honest I would say that the user that wont be able to identify this as a rating control will probably have problems with most aspects of most GUI's. Ie. adding a label saying Rating: would just add clutter to an otherwise very aesthetically pleasing control. Commented Jun 5, 2012 at 9:08
  • @AndroidHustle : Yes, thats my thoughts as well. That is why I am asking here, instead of just adding it to "play safe". I have kept the rest of the interface clean and polished, and would like to keep it that way :]
    – Nils Munch
    Commented Jun 5, 2012 at 9:11

6 Answers 6


The control looks great and is intuitive, I would only change 2 things:

  1. Make the default a positive ~75% rating [or whichever produces the :) before the awesome :D rating], because:

    • It's the most recognizable emoticon which would best convey what the slider does
    • A satisfied customer will just want to finish the process as quickly as possible and quite probably skip over the rating altogether: having a neutral as standard would only artificially lower your overall customer satisfaction data.
  2. Take the smiley off the button and put it on the right side of the slider line, because:

    • As you interact with the slider your finger covers the button, so you don't see the smiley is actually changing faces until you lift your finger.
    • On the right side because it's the natural western reading direction, left to right, and below would waste a lot of real estate.

enter image description here

  • Those are some excellent points @fdmsaraiva
    – GotDibbs
    Commented Jun 7, 2012 at 16:59
  • 1
    I don't get the "having a neutral as standard would only artificially lower your overall customer satisfaction data" argument. Having it already pre-set to +25% will surely artificially tamper with the result, way more so than having it neutral. Commented Jun 11, 2012 at 11:00
  • Oh I love this idea! Commented Jun 12, 2012 at 23:07
  • add "it's the natural western reading direction": This is not reading really - it is just a picture. By putting the smile on the left side it is not covered by the first finger when operating the slider. My comment applies only if: 1) control is to be placed on the bottom of the screen 2) vast majority of people controls their phones with right hand (which is obviously true). As always you should prototype the control and test it with real users.
    – Rasto
    Commented Aug 17, 2013 at 19:49

I'm spinning on with JOG's points on inviting a user to rate and also enforcing user interaction once rated.

Default: enter image description here

When slidinig down: enter image description here

When sliding up: enter image description here

This approach incorporates the controls of the Youtube like/dislike control which enforces user interaction with feedback. This could be a way to invite users to use the rating control and it will also enforce user actions with a descriptive text.

However! I want make something clear, personally I think the control is good as it is and doesn't need more bulk just to clutter it. This approach I'm presenting will enforce actions from the more reserved users, but I do think it does compromise the layout as a whole for the users who are very clear with what to do (which should be the majority of the focus group I assume).

  • 1
    +1 for actually making mockups to illustrate your point.
    – Nils Munch
    Commented Jun 5, 2012 at 10:00
  • 1
    @NilsMunch Thanks. It's a nice break from the Trouble Reports I'm supposed to be working on... Commented Jun 5, 2012 at 10:04
  • I feel the user will not be able to benefit from either the feedback of the face changing or the bottom text, because they will be covered by the user's finger. Commented Jun 7, 2012 at 21:44

I don't think I would get it because the moment I touch the slider, I can no longer see the face:

enter image description here

I really like @AndroidHustle 's solution, but it would still be covered by the finger. So I am going to recommend the following:

enter image description here

  • I agree. Perhaps the "Slide to rate" tooltip can also incorporate the face? Commented Jun 7, 2012 at 23:53
  • @CalvinChong Absolutely! Commented Jun 8, 2012 at 1:42

It's a great control, and most curious people would probably engage in it.

I see three problems that you perhaps would like to approach:

  1. The area is dark and could be perceived as read-only,
  2. As the slider is custom, it could be perceived as just a rating on top of a static line,
  3. Hesitant users has no invitation to engage in it.

I would suggest;

  • Showing the same rating symbol (the smiley) in the list of venues, so that when this control is shown, users can map the rating of venues to this interactive control.
  • some how trying to show that it can slide to the left or the right. Small arrows? Or a little bouncieness, perhaps? :)
  • an encouraging title, for example "Rate it!"

I really like the concept. Here are a few thoughts:

  1. I could see how a user would not completely understand what it is until they played with it. After using it once or twice, the user would probably always remember what it does. That being said, I would maybe you could display a bubble when the screen has completed loading that says, "Rate it!" or "Rate Me!" It would slowly (appropriately) fade out. I would maybe also display the bubble as you move the slider and put value of the rating in the bubble. Once you let go, it would fade out (again, appropriately). This way, they only see what it is used for when they go to that screen, and reminded of the value when they slide.
  2. I agree with one of the previous comments that the slider area seems to look like it is disabled. Maybe increase the contrast as you move to the right. In other words, as it gets a better rating, maybe going to the right, the fill would slowly become the color you want to represent with a positive rating. As you move left, the color would slowly become the color you want to represent a more negative rating.
  3. I am torn on how you might want to display the current rating. A part of me says it would be nice to have the initial bubble display it. So, something like this: "Rating: Awesome!" However, when you haven't rated it, what is the initial value of the rating? Maybe it is, "Rating: Ok!" With this approach, you could always show the button on screen load as the current rating, and show it in this format when you slide. You could also try to remember if they have rated before or not and start with "Rate Me!" and then after they rate it the first time, it remembers it in the following format, "Rating: Awesome!".

Great idea but the finger over the slider is a good point ... with a mouse you would have seen the slider change. I guess the face is still useful for when you revisit the site... but for the actual process of setting the rating it doesn't work.

I would lighten up the slider bar so the green-red colours are more obvious.

I would use Fresheyeball's idea of a pop out but put a simple rating number in it.

Your Answer

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

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