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.

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.

Thanks.

share|improve this question
add comment

4 Answers

up vote 1 down vote accepted

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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?

share|improve this answer
    
long list an the relevant items are the ones with most down-votes. It would be horrible. –  Franco Mar 9 '11 at 18:38
    
good idea...instead of up and down, just use negative wording... –  iamgopal Mar 10 '11 at 6:40
add comment

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.

share|improve this answer
    
+1 for tool tips –  Franco Mar 7 '11 at 2:31
    
What about colour blind people? 8o) –  theorise Mar 7 '11 at 11:00
    
For accessibility, the images should always have an alternate text so screen readers will be able to read it. –  Divi Mar 8 '11 at 10:31
add comment

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.