4

In this layout, the number of votes and replies go from gray to red:

enter image description here

I want to make those with more votes and replies more visible. Should votes and replies have different range of colors?

Does anyone have another suggestion to make this less confusing for the user (or is not confusing at all?)?

Maybe I should make the color range of replies black to gray?

EDIT:

This is a second version based on the suggestions:

enter image description here

Improve this question

3 Answers 3

Reset to default
5

I'd consider making the titles just plain black and bold. That way the coloring of the votes etc doesn't get drowned out.

Improve this answer
6
  • +1 Although the red all matches the branding, the red titles are a bit distracting.
    – Matt Rockwell
    Aug 19, 2011 at 17:03
  • And the red links all over the place. Red triggers a unique 'visual popping' effect that IMHO should be used reserved for higher importance information.
    – peteorpeter
    Aug 19, 2011 at 18:32
  • @peteorpeter so should I change my brand identity color?
    – wyc
    Aug 19, 2011 at 19:06
  • @Matt Rockwell Well, I'm not a fan of red but the only color related to Taiwanese/Chinese identity is red.
    – wyc
    Aug 19, 2011 at 19:08
  • 1
    @janoChen - Ditto. There's nothing wrong with using red in the color scheme. It's just a matter of rationing the heavy-hitting colors for the most important elements. The visual hierarchy in your second comp is much more clear, in my mind. There are also lots of conflicting opinions about color...
    – peteorpeter
    Aug 19, 2011 at 20:20
2

I think you have many options. Maybe, rather than making your numbers gradually tend towards red (as you are apparently doing at the moment), you could use ranges to make the differences more visible:

0-20 replies: gray

20-40 replies: light red

Over 40 replies: bright red and maybe make it bold

etc.

Improve this answer
2
  • Well, actually I'm using ranges: 2-3, 3-4, 4-5 and so on. So basically, you mean that I should used wider ranges and less colors? (my website is just about to launch so I don't think I will get more than 20 replies in a topic).
    – wyc
    Aug 19, 2011 at 14:14
  • 1
    I think you should keep it flexible so that you can change the ranges when your site go live. I think three colors should be enough - it would match "new post", "active post" and "hot post".
    – laurent
    Aug 19, 2011 at 17:42
2

Also be very careful about using color to indicate status, since a pretty decent portion of the population has some level of color blindness. You might consider using icon imagery (small flames icon to indicate that something is hot, etc.) If you can make it work within your design, it may stand out a little bit more (someone else has mentioned that since so many other elements on the page are red, the red text gets a little lost.)

Improve this answer
1
  • 2
    Another thought is to focus on increasing value contrast with more votes. By value contrast I mean the contrast between the font color and the background color in grayscale. One way to think about this (and do quick experiments) is to use an opacity range: opacity: .5 --> opacity: 1.
    – peteorpeter
    Aug 19, 2011 at 18:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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