What is a good user interface element for voting in web?

Question

I have the following scenario:

The website presents the user with a list of choices. The user can vote for them. The user has 3 votes that he can spend. He can place all 3 votes on one item, or he can distribute them among multiple items. He can also change his vote placements later (the choices aren't fixed and a new, better choice might appear later on).

So I'm wondering what user interface element would best represent this. It should be simple, intuitive, preferably widely used. I'm thinking about something like clickable series of icons (like in lolcats and other places), but I can't figure out an intuitive way for a user to remove a vote he has placed in such a way. Maybe I could display another icon for removing a vote entirely, but that seems somehow awkward to me.

Any ideas?

Answer 1

If you have the space in your interface, I find what SO does for up/down voting questions very intuitive. It gives a clear indicator on number of votes spent and the up/down arrows make the behavior obvious.

To solidify the vote relationship (since the number and arrows might not be enough) you could add a check mark in the middle:

I would also suggest a nice juicy tooltip on first mouseover of the vote buttons explaining what they are. Then you could disable that behavior for a user once they've voted at least once in the system.

Answer 2

What about 3 empty vote slots alongside each option surrounded by up and down vote buttons:

< O O O >

After 'up' vote at right is clicked:

< * O O >

After another 'up' vote:

< * * O >

Answer 3

You could just place a 'remove votes' x at the end of the list of cheeseburgers. I'm thinking of the red 'x' that StackOverflow uses for removing a comment.