We're currently designing a new "Document Management" feature for our application, and I've come to the part where I need icons for the file types. I've gone down the route of doing something custom, but the question has come up "Do we need them to have colours or should we go with plain (likely grey) instead?"

Current icons

These are the icons I've got so far. The logic I've gone with, is that users have become accustomed to the icons of the applications they use, and therefore the colours of these icons roughly reflects the icons of those associated applicattions.

For comparison, here's the grey variation

enter image description here

Is this something that is important, or does it not really make any difference? I'm looking specifically at a document listing, so there may be hundreds of lines in a table so the icon may/may not be the fastest way for a user to determine what type of file it is.

  • Overall, this looks more like a question of taste, not easy to tell if it will make a difference for better or worse. But another question is, how many file types are there, only these 4? Then it would seem reasonable. But if it may contain any possible file type, how could you ever define a colored icon for each? – Big_Chair Dec 11 '19 at 10:40
  • Valid point on the different types. We would probably just have one icon for the major file types, and most commonly used within our application - for others just use a generic "file" icon. But the colour would be based on those application icons rather than coming up with our own colours – PaReeOhNos Dec 11 '19 at 10:44
  • Can you let users choose their own colours ? – PhillipW Nov 25 '20 at 9:43
  • Not at present no. All icons for files are SVGs – PaReeOhNos Nov 25 '20 at 19:23

If you look at the file systems on Windows or Mac, you'll see icons in full color that match the programs responsible for opening those files.

Companies invest a lot of effort into helping users recognize their brand, a large component of which is often a carefully chosen color scheme.

By using those colors1, you can leverage the effort that these companies have already put into teaching users to recognize these specific file types. This decreases processing time, because the user can leverage previous experiences. Specifically, the colors communicate additional data that facilitates this recognition.

1: You might consider consulting your company's legal department in regards to creating a custom set of icons that are strongly influenced by another company's set of logos. I'm sure there are some strings attached to the selection of colors and graphical representation of their proprietary document formats. It looks like you've selected similar colors, but not exact. I'm not saying that's wrong, I'd just recommend making sure you're not putting yourself into a legally compromising situation.

  • Hadn't considered the legal side of it, very good point! But overall that's what I had thought would be the case with the colours. I don't suppose there's any data backing this up that you're aware of? – PaReeOhNos Dec 11 '19 at 20:23
  • Well, I'm more so relying on some common conclusions: 1) it's easier to understand what you're seeing when you've seen it before, and 2) color is another dimension of visual data that can aide with this recognition process. A quick search for the second point showed me a study that concluded that "accuracy, response discrimination, response bias and confidence ratings were higher for colored than for black-and-white images". – maxathousand Dec 11 '19 at 20:36
  • Ah that looks interesting. Thanks for this, really helpful! – PaReeOhNos Dec 11 '19 at 20:41
  • You're welcome! Good luck. Also, another study shows that familiarity and recognition were powerful factors for quickly processing visual elements. – maxathousand Dec 11 '19 at 20:44
  • ha some nice "light" bed time reading for me :P – PaReeOhNos Dec 11 '19 at 22:14

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.