Context: web application.

I have a list of items, each one with up and down arrows (a la reddit) but my list doesn't shows the most up-voted items, but the most down-voted (technically it's ordered with up/down votes ratio).

I think there's a fundamental issue here. If you have an ordered list with arrows alongside each item, you'd expect the item to go upper in the list if you up-vote it. But what would happen is exactly the opposite, making the item go down.

I thought about replacing the arrows with thumbs (to take away the expectation of an item following the direction of the arrow you just clicked) and making explicit right there in the list that the order is based on down-votes, but I don't like this at all.

How can I make this behavior more understandable? Maybe another form of representing the data? I'm open to any ideas.


4 Answers 4


It seems to me like there's an inherent problem in the concept - the phrasing you use explicitly contradicts the conceptual model, since you apparently use the actual term "down-voting" to represent "up". So I think that the thumbs-up solution is the right way to go. Maybe there's a more suitable metaphor if you don't like thumbs, but the direction is definitely in changing the phrasing/metaphor.

Having said that, an animated transition might help slightly. If the users see the down-voted item "percolate" upwards, replacing the item above it, it will reduce the confusion as to what happened, but it still won't help it be more in line with initial user expectations.

I disagree with @Divi concerning using red and green. I think it will only confuse people even more. Red and green might sometimes help with status indication - "our losses went up and it's bad, so we'll use a red upwards arrow", but it won't help with explaining the meaning of an action you're about to take, especially since there's no idiomatic association between red/green and up/down. Tooltips are a good suggestion though.

BTW, see what IMDB are doing with their "Bottom 100" list. Initially it may not be clear that their worst 100 movies are still ranked "best up", but it becomes clear when you look at the rankings of the movies. If you provide this kind of "raw data", it might also help a bit.


You could use red and green colored arrows to show exactly what they will do. So your up arrow will be red and down arrow will be green. And you could add tool tips to both arrows for some additional text/info.

  • What about colour blind people? 8o)
    – theorise
    Commented Mar 7, 2011 at 11:00
  • For accessibility, the images should always have an alternate text so screen readers will be able to read it.
    – Divi
    Commented Mar 8, 2011 at 10:31

Why not show the list in order from "least terrible" to "most terrible" so that the items most voted down are shown at the bottom.

This maintains the link between "down vote" and "move down".

Otherwise, try moving away from anything that has a direction. Rotten tomatoes and balloons, perhaps?

  • long list an the relevant items are the ones with most down-votes. It would be horrible.
    – Franco
    Commented Mar 9, 2011 at 18:38
  • good idea...instead of up and down, just use negative wording...
    – iamgopal
    Commented Mar 10, 2011 at 6:40

You could use [+] / [-] icons, oriented horizontally.

(example: bash.org - warning: juvenile contents, but I can't remember another "live" example). They use the following format:

[-] (-287) [+]

This has the additional advantage to put space between the buttons, which helps avoid misclicks.

Of course, in that case, the number of votes should be negative.

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.