Our search is giving a list of persons and their profile picture with some additional information, last updated, name & title.

As of now, we are grayscaling the profile pictures, with full color on hover.

Our initial idea was probably to ease the users ability to scan images with the same colors (eg. grayscale).

I know we should have tested this out on our users, but are there any (quantitative) studies around this, or anyone have experience with something similar?

PS: One argument against colors on hover is that touch screens (mobile, tablets) doesn't have the hover-state.


I don't have hard and fast data, but anecdotally, aren't you eliminating an important visual clue? I often look for Twitter posts that I'm looking up again by the color of the avatar. E.g. "It was from one of the people with a green avatar". I would expect removing the color to inhibit this approach.

Admittedly, this depends on the selection of avatars you have. If all are company-provided passport photos, they're all different shades of reddish brown for skin, as a big central circle, over a white background. The only color cue is maybe the color of the shirt, and the amount/color of hair.

OTOH, in less formal settings, someone may have an over-exposed picture, a logo, a colorful background, all cues that can help when scanning over a big array of (mostly recurring) avatars.

  • Yeah, I really do think it comes down to - Ease of scan vs. speed of recognition
    – Velkommen
    Aug 4 '14 at 11:15

There is some interesting data from an eye-tracking study here - http://www.nngroup.com/articles/photos-as-web-content/ - that has an example of colour images in profiles;

enter image description here

This doesn't look to indicate that the test participants had any problems scanning a fairly long page that includes colour images.

What the study did show is that less attention was allocated the further the test participant moved down the page so it would be worth thinking of how you break-up/paginate the search results returned.

Hope this helps.


More important than color is the size of the image compared to text size. If you have a header for the name, you could use a larger image, but if the size is small, you need a smaller image. In addition to the relationship of sizes is the white space between each contact. The balance of these three attributes increase comprehension.

Whether or not to use color is not as important as to use the same type of picture. Look at your Facebook friend list, and you see how hard it is to recognize your friends based on images only. Some are grayscale some are in color. Some have made full figure images, and some only half the face. Moreover, some have their pets as profile image. The advice here is to use the same type of image, preferably photographed the same way in the same light and it’ll be the best way to present your users in an image list.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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