I have a music portal where I need to make the users rank pages. Type of pages:

  • Playlist
  • Artist

I need the user to:

  • View rank.
  • Vote up or down.
  • The ranking must be a up / down vote system.

I have tried a similar model to stack exchange:

enter image description here

The feedback from the users (who are not familiar with stack exchange) wasn't good. They thought the buttons were to add to favorite or add songs to playlist.

The layout of the page and the place of the rank is like this:

enter image description here

Any idea for best user experience that would make the rank action clear?

  • You first need to decide on what form of ranking you will use. Only then should you focus on how to make that form clear. – JohnGB Mar 16 '13 at 21:25
  • @JohnGB The form is a number that the user can increase or decrease. – user80042 Mar 16 '13 at 21:28
  • You seem to be assuming that the ranking must be a up / down vote system, but your question doesn't specify that. Please clarify the question. – JohnGB Mar 16 '13 at 23:59
  • @JohnGB I updated my question. – user80042 Mar 17 '13 at 13:10
  • 1
    From a UX point of view I'm uncomfortable with the phrase "I need to make the users to rank pages". Why not "I would like to encourage the users to rank pages"? – JonW Mar 18 '13 at 10:26

Stackexchange voting systems is not about rank, it's about wheather you approve/like/agree with an answer or question or not. It's not putting three stars of five in a ranking system per see.

If you want a ranking system, try Google Play or AppStores way of ranking.

enter image description here


If ratings with stars doesn't do the trick, you could always try with a variant of this very familiar sign:

enter image description here

  • rank by percentage is not what I seek for. The #1 will be the page with most of the votes. – user80042 Mar 16 '13 at 21:34
  • @user80042 And what does your users want? – Benny Skogberg Mar 16 '13 at 21:36
  • To see how many users like the playlist. – user80042 Mar 16 '13 at 21:38
  • @user80042 I've updated my answer – Benny Skogberg Mar 17 '13 at 6:27
  • The problem is that "like button" makes an association to Facebook Like which move behavior like show your friend what you likes (it's not private). – user80042 Mar 17 '13 at 13:10

What about this:

enter image description here


  • Using the words vote up and vote down to make clear is about rating.

Is that clear?

  • Can you add some explanation / reasoning for this suggestion, or say why you've suggested this? – JonW Mar 17 '13 at 17:59
  • @JonW I updated the answer. – user80042 Mar 18 '13 at 9:52

There are a lot of examples of how to accomplish this out there. The difference between the plus/minus used in the wireframe and Stack Exchange is the use of the plus and minus in the first place, which, in your context may carry duel meaning (and may not fully demonstrate what the test users saw). Stack, of course, using up and down arrows to agree/disagree. So, it may not be the mechanism, it may be the visual representation related to the mechanism.

The like button, if styled to not look like the Facebook "like" button can be pretty effective - see YouTube for an example of this - and the Facebook "thumbs up" has become a kind of standard visual for saying, "I like this" - similar to male/female icons on lavatories. Further, Facebook requires the Facebook like button be styled (and interact with users) the way they say it should (since the sharer API is deprecated).

Also, the wireframe you are using does not indicate how one does add a song to a playlist or favorites; so, it may be possible that functionality is not explicit enough in comparison to the voting mechanism.

It also depends on your specific users. If you are testing with 10 users internal to the organization, I would probably say the test is not valid if the site is customer facing. Another option would be to make multiple (three, for example) clickable comps with completely different executions. Grab 150 people (50 for each comp), and see how each group responds to the variation. Take the best/easiest parts from each - create three more - do it again with 150 new people. And keep evolutionarily developing a solution until you find the "best" solution for the type of users you are targeting...which is pretty important - for example, if your target users are not familiar with Facebook - having a blue like button is not that big of a deal. Another, and my final option/example, would be to have faith in your users to eventually figure it out...just because it wasn't immediately apparent the first time they used the site is not an indication that the execution is not the best for your situation.

http://www.youtube.com/watch?v=v-l2zl85PHs https://developers.facebook.com/docs/reference/plugins/like/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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