I'm currently designing a website for my school, where you can rate images. Under each image, there is a comment button, a share button and the two up- / downvote button.
Now I need to place these buttons under the image and justify my order.

How should be the order of these two buttons? And why?

  • 5
    Follow the order used by youtube which is <upvote> <downvote>
    – Fractional
    Commented Jun 3, 2014 at 12:05
  • I was about to say "intuitively, of course it is up to the right!" I almost didn't believe @RedSirius at first, but Youtube does indeed order that way. I believe 'up' as up/right is most logical, since this is a standard 'positive direction', e.g. a graph. However, placing the 'up' first comes about as encouraging positive feedback as a more prominent action - left certainly has more prominence, probably since (here) we read ltr. I think it is at the designer's discretion which is more appropriate - though I would highlight the need for obvious representation of 'up'/'down' if in that order.
    – OJFord
    Commented Jun 3, 2014 at 16:02
  • ^ @Fresheyeball makes the same point below and includes a good graphic to demonstrate. ux.stackexchange.com/a/58367/38442
    – OJFord
    Commented Jun 3, 2014 at 16:07
  • @OllieFord I actually agree with you that up is to the right - because that's where vim (with hjkl) and DDR put it! =P
    – Izkata
    Commented Jun 3, 2014 at 19:58

5 Answers 5


Which one is primary for you up or down? Up on the right makes up primary, and gives it finality, as opposed to putting it on the left. But it depends on your layout. This assuming that your buttons are on the bottom of your content.

But why make such distinctions? When you can make up up and down down like so:

enter image description here

  • 2
    You may be losing upvotes due to your choice of graphic - I thought it wasn't working! Excellent representation of 'reading gravity', though. Made much the same point in comment.
    – OJFord
    Commented Jun 3, 2014 at 16:05
  • @OllieFord I just updated the graphic. Commented Jun 3, 2014 at 16:11
  • 2
    Oh I meant the other one - but was just joking! I at first clicked to upvote you, and wondered for a second why it wasn't working.
    – OJFord
    Commented Jun 3, 2014 at 16:13
  • @OllieFord hahaha... Commented Jun 3, 2014 at 16:15

I agree with SavTheCoder but it depends on your page structure. If it's a list, the Stack Exchange system is very efficient

But if it is a grid page you should do something like this.

Don't forget you can give more importance to the upvote or downvote button according to what you expect people do. If you want to encourage a positive feeling about the content, the "Like" button must be bigger.


download bmml source – Wireframes created with Balsamiq Mockups

  • 3
    While I agree with this answer, it would be better if reasons were given for that grid layout. Commented Jun 3, 2014 at 15:07
  • Why should the up button be to the left of the down button? Commented Jun 4, 2014 at 4:02
  • @ user568458 - The choice between grid layout and list layout totally depends on the content (picture gallery, blog posts, forum thread) and on what must be displayed.
    – Renaud
    Commented Jun 4, 2014 at 7:22
  • @Fresheyeball it is because you read form left to right and the like button must come first
    – Renaud
    Commented Jun 4, 2014 at 7:29
  • @Renaud why does left to right reading mean the like button must come first? Commented Jun 4, 2014 at 12:39

As the other users already said: the most sites are using first the upvote (or like) button, and then the downvote.

Also when you say it. You say first upvote and then downvote.

With the voting system on Stackoverflow, you recognize firstly the upvote button, then the downvote.
Reanud's point with the forcing of the button is great. It is also good if you work with colors. Green for upvote, red for downvote.

On the other hand, spotify orders the buttons the other way:enter image description here

First the downvote button, then the upvote. IMO, it is a really bad choice.
It happens very often to me, when I want to upvote a song which I like and just press and the very left button but accidently downvoted the track. Very bad is also, the downvoted track is then lost, so I can't listen it anymore.
If it would be colored, it would be more clear.

There are some examples where the downvote button comes first, but IMO, this is not a good use.

  • 4
    One possibility is that the like button is easier to reach with your right thumb, which most users would presumably be using.
    – DLeh
    Commented Jun 3, 2014 at 15:12
  • Agree 100%! This has happened to me too, and I find any UI where the downvote is 'first', is a bad experience. Since this is for your school, I don't think it will be a concern, but if you were writing a global app, you would also need to consider cultures that read right-to-left. For those, it might be more intuitive to have up on the right (but you'd have to survey some natives to be sure! :))
    – Rob H
    Commented Jun 3, 2014 at 15:12
  • @DLeh: Good though! But I don't like it anyway... Commented Jun 4, 2014 at 11:04
  • @RobH I think the worst thing you could possibly do is change button positioning depending on the user's culture. But if you're primarily/only targeting that culture, then do take it into consideration for a universal layout. (Changing layout depending on culture can lead to a lot of confusion, especially if/when the culture is detected incorrectly and the layout changes for a revisiting user.)
    – Bob
    Commented Jun 4, 2014 at 12:11

There's no universal answer to this question. Each case might be different.

  1. Choose the action you'd expect the users to take by default (this is usually upvote)
  2. Prepare the design to provide better access to this button, considering e.g.
    • reading direction
    • type of access (mouse, keyboard, touch)
    • size (usually, bigger = more important)
    • shape (both the same, different, pointing somewhere)
    • weight (fat and heavy usually is more important)
    • witespace (more whitespace = better access, higher importance)
    • color (considering the rest of the layout)
    • providing feedback (current rating)
    • clearyfing the difference between both of the buttons (e.g. color, +/- icons)
    • level of engagement (eg. clicking smileys is fun! cool guys click ok!)
    • web conventions (eg. probability of clicking blue, underlined text is very high; green means success, red means error)
    • placement according to other page elements (eg. no other links on the page, this button is USP, user will click this onel previous mouse position - eg. when user clicks Next/Prev image; hot areas on heat map)

In most cases for latin web pages you'll notice that the layout used by YouTube works best.


Since the buttons are for up -voting and down -voting it's best if you stack them. As in, the upvote at the top and downvote at the bottom. This gives the user the "clue" that by pressing the Up button, the post will move up the list and by pressing Down, the post will go down the list.

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.