Custom rating slider

Question

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:

When sliding down:

When sliding up:

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

Answer 1

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.

Answer 2

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

Default:

When slidinig down:

When sliding up:

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

Answer 3

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

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

Answer 4

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!"

Answer 5

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

Answer 6

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.