They are basically like the the ones you see in Digg.

enter image description here

I also thought about using arrows (like in StackExchange sites), but I think people are more used to thumbs these days (due to Youtube, Facebook and Digg).

I didn't make the thumbs-up button green because I couldn't find a green that looks good with the main red color. I also think that probably the thumbs icons are too small.

I would like to know if the user will notice the meaning of those buttons at first glance?


Is this better? enter image description here

  • I'd make them a bit bigger. Maybe make up green, keep down red.
    – GUI Junkie
    Commented Aug 29, 2011 at 17:50
  • 3
    @GUI Not everywhere in the world green means good/go and red means bad/stop... Especially as janoChen is designing a site for a mainly asian (Taiwan to be precise), red may wel be viewed in a much more positive light than you might think. Commented Aug 29, 2011 at 18:52
  • @Marjan, you are ever so right. The idea should be clear however; to distinguish the two icons also by color. I believe the traffic signs/colors are pretty international, though.
    – GUI Junkie
    Commented Aug 29, 2011 at 20:19
  • 1
    @GUI: Yes, traffic signs/colors are quite international, though I think Mao once said that red can't mean stop... Commented Aug 30, 2011 at 6:45
  • 1
    @GUI: not a lot :-) But I guess he was around when traffic lights made it into China... Commented Aug 30, 2011 at 7:20

5 Answers 5


I don't think they are very clear actually. They seem to be on the smaller side too. You could go the You Tube way and have something 'like' or 'vote up' text next to the 'Thumbs up'.

enter image description here

I would make them 'green' at-least on hover with a 'tooltip'.@janoChen had mentioned that the site is for non-Taiwanese to interact (in another post), so the 'green' should be clear atleast to them.

Also, the cursor must change to 'pointer' when hovering over the buttons, doesn't look like it from the screenshot.


If you ask yourself the question, "is this clear enough", you already have an answer: it could be clearer.

Firstly, they don't look like buttons. It's only when you hover over them that you discover: oh, I am suppossed to click this image? A 3D-Effect would help.

Secondly, I didn't recognize the icon as a thumb at first, the YouTub-Thumbs (see @Kashyap) are much clearer.

Thirdly, if you want to stress that the only difference between the thumb up and the thumb down is that, well, one is up and one if down, you could put both on the same baseline, even if this needs more space:

thumbs with baseline

(Oh, and if your question really is: "Is it clear enough?", then the answer is: ask your user. It depends.)


Your contrast is too low between background and foreground on your icons. Check out this side: http://www.snook.ca/technical/colour_contrast/colour.html

Even though it's mostly ment for text color contrasts, it's applicable for more situations, such like yours.

  • Green/Red seems like a good color combination.
    – Barfieldmv
    Commented Aug 30, 2011 at 11:26

Don't forget that the thumbs up isn't universally a good thing:

"Thumbs up" traditionally translates as the foulest of gesticular insults in some Middle Eastern countries — the most straightforward interpretation is 'Up yours, pal!'[5] The sign has a similarly pejorative meaning in parts of West Africa, South America, Iran, and Sardinia, according to Roger E. Axtell's book Gestures: The Do's and Taboos of Body Language Around the World."[5]

In Bangladesh, Iran it is traditionally an obscene gesture, equivalent to the use of the middle finger in the Western world.

Source - Wikipedia

Though that doesn't seem to have stopped Facebook from using it.

  • 1
    +1 this really feels important and is almost always overlooked. Also scales using bronze, silver and gold and other local stuff should probably be reconsidered in a global online world. Commented Aug 30, 2011 at 14:16

Also: just draw the hand. Don't draw the sleeve.

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