Upvote / Downvote Button order

Question

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?

Answer 1

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:

Answer 2

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}

Answer 3

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:

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.

Answer 4

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.

Answer 5

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.