Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
5  
Follow the order used by youtube which is <upvote> <downvote> –  RedSirius Jun 3 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. –  Ollie Ford Jun 3 at 16:02
    
^ @Fresheyeball makes the same point below and includes a good graphic to demonstrate. ux.stackexchange.com/a/58367/38442 –  Ollie Ford Jun 3 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 Jun 3 at 19:58

5 Answers 5

up vote 10 down vote accepted

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

share|improve this answer
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. –  Ollie Ford Jun 3 at 16:05
    
@OllieFord I just updated the graphic. –  Fresheyeball Jun 3 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. –  Ollie Ford Jun 3 at 16:13
    
@OllieFord hahaha... –  Fresheyeball Jun 3 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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
3  
While I agree with this answer, it would be better if reasons were given for that grid layout. –  user568458 Jun 3 at 15:07
    
Why should the up button be to the left of the down button? –  Fresheyeball Jun 4 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 Jun 4 at 7:22
    
@Fresheyeball it is because you read form left to right and the like button must come first –  Renaud Jun 4 at 7:29
    
@Renaud why does left to right reading mean the like button must come first? –  Fresheyeball Jun 4 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.

share|improve this answer
4  
One possibility is that the like button is easier to reach with your right thumb, which most users would presumably be using. –  DLeh Jun 3 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 Jun 3 at 15:12
    
@DLeh: Good though! But I don't like it anyway... –  dTDesign Jun 4 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 Jun 4 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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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