Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Quite a few web applications have started utilizing gray(black) scale icons, for example Github,new Google Analytics, etc. Even applications like Firefox 4, Chrome, IE9, iTunes, Mac OS, have dropped colorful icons.

What is the reasoning behind the move from the colorful icons to grayscale/monochrome icons?

Examples:

Update: It seems Apple first introduced it in Aqua under Designing Icons for Rectangular-Style Toolbar Controls:

Icons that look good in rectangular-style toolbar controls are streamlined, black images that convey meaning through outline and contour, not internal detail. Because your icons should echo the appearance of the existing Mac OS X images inside rectangular-style toolbar controls, use the system-provided template images as a guide. As you design an icon for a rectangular-style toolbar control, keep the following points in mind:

  • Make the outline sharp and clear
  • Use a straight-on perspective
  • Use full black and a few shades of gray to suggest dimensionality
  • Use anti-aliasing
  • Make sure the image is visually centered in the control (note that visually centered might not be the same as mathematically centered)

Icons for regular-size rectangular-style toolbar controls should measure no more than 19 x 19 pixels.

share|improve this question
    
Can you provide an image of what you are talking about? I just looked at Google Analytics and don't see anything like what you are saying. –  Charles Boyung Apr 21 '11 at 17:48
    
Sorry for that. Updated the post with two links! Here are a few more:Firefox 4 mozilla.com/en-US/firefox/features Chrome (look at the back/forward/home/favorites) google.com/chrome Itunes apple.com/itunes/what-is/player.html –  GeorgeU Apr 21 '11 at 18:07
    
Good question and thanks for the update. +1, and another +1 you cut and paste the update into a new answer. :) –  Patrick McElhaney Apr 22 '11 at 19:21

7 Answers 7

up vote 10 down vote accepted

I believe this trend came together with the idea of separation of content and presentation. Icons are part of the chrome/ui and should not be too conspicuous in order not to compete with the content itself.

Another reason may be that it's easier to attract attention to an element when it is the only one with a colourful icon, and everything else is greyscale. For example, a green log in padlock icon in combination with greyscale menu icons. Making something pop-out in a group of colourful elements takes much more skill and time as you have to think about much more than just colour (which no longer plays the primary role in attracting the user's attention).

share|improve this answer
    
Exactly what I was going to say. Google Chrome is a perfect example in that it was designed to get out of the way. The top bar, buttons, icons are all monochrome and condensed nicely. So the Chrome UI doesn't steal too much attention from the web page you're trying to look at. And I've noticed that Microsoft has a similar philosophy with IE9. –  Steve Wortham Apr 23 '11 at 0:28
    
The part that makes me furious (given Microsoft's latest announcement blogs.msdn.com/b/visualstudio/archive/2012/02/23/…) is that this only works for certain types of user interfaces, particularly those that don't have a hundred buttons, tree views and panels all over the interface. When will UI designers start to realise this is just a very specific design metaphor and not some cool fad? Coloured icons work when there are many icons to be seen. –  Nick Bedford Mar 2 '12 at 1:13
  • They often look good, regardless of the layout, so you can keep them if the layout changes.
  • You can combine icons from different sources (The Noun Project, symbol fonts, existing icons used on platforms like the iPhone, etc.), since they mostly look similar.
  • It's easy to do your own.

Personally, I think it's generally a bad trend. Our brains process color preattentively (before we even consciously see it); we're really good at tasks like "find the red icon in a list of colored icons." We're not so good at a task like "find the icon that looks like a little truck in a list of black icons." Making all icons the same color makes your product harder to use.

There are exceptions, of course. You don't want garish colors in an app like Photoshop, since they can influence how you see the image you're trying to work on. They're also not necessary when people identify icons mainly based on their position (the back button is always on the very left in a browser's button bar, for example).

share|improve this answer
3  
+1 for the pre-attentiveness. Forgot about that one. –  Bryan Marble Apr 25 '11 at 21:00
    
+1 for bad trend. I think monochrome icons (and "flat design" in general) are mostly a product of laziness and I'm actually having difficulty discerning between icons like these on a daily basis. –  Matti Virkkunen 16 hours ago

I believe this trend was spurred by the initial release of Google Chrome. The name "Chrome" is ironic because Google's goal was to use less chrome (anything but content) than all other browsers.

  • Its tab would act as the window's title
  • Its menu bar is gone
  • It combines the address bar with search

Google Chrome

chrome

Mozilla Firefox 3

firefox 3

Notice how Google Chrome uses much less chrome than Firefox? Google even makes this a key point:

Simplicity

Chrome's browser window is streamlined, clean and simple.

Chrome also includes features that are designed for efficiency and ease of use. For example, you can search and navigate from the same box, and arrange tabs however you wish — quickly and easily.

Google Chrome wanted the browsing experience to focus on the website content, not to be distracted by the chrome. It is obvious that bright colorful buttons in the chrome would distract from the website content. As a result, Google Chrome used grayscale buttons from the get-go. Other browsers are now playing catch-up. We can clearly see that Firefox 4 and IE9 borrowed from Google's design principle of less (color / stuff) is more.

IE9

ie9

Firefox 4

firefox 4

Be careful not to apply this design principle to other areas of UI design. Color works well in unfamiliar interfaces to draw attention to buttons that you want users to click. Since the concept of web browsing is so common, and buttons are more-or-less in the same position on all web browsers, there was no need for the web browser designers to dumb down the interface by adding color.

share|improve this answer
    
Trend wise I believe Apple did it before Chrome. Google simply got it from safari. My question is "is this just a trend, or there some theory/research behind it? –  GeorgeU Apr 21 '11 at 18:22
    
No, Safari's market share (5%) is almost as low as Opera (2%). By definition, a trend is something popular. Safari is not popular, so it did not start the trend. –  JoJo Apr 21 '11 at 18:27
2  
Safari had grayscale buttons since version 1. Mozilla and Microsoft still continued to use colored buttons for years because they didn't give a damn about Safari. Often people reason "If it's not popular, it's not good". Safari was not popular, so they're not going to copy it. Then came Google Chrome, which shook up the game. It's penetration rate was incredible. Since it's becoming so popular, Mozilla and Microsoft copied it. There's a reason why there was such drastic changes were made to FF4 and IE9 after C came out and not before. I'm just connecting the dots. –  JoJo Apr 21 '11 at 18:46
3  
I highly doubt Apple used grayscale for Safari for usability reasons. The usability sucks on Safari with their color scheme and contrast. I have to squint to read the text on my tabs. It's more likely that Apple used grayscale for branding. All their products follow their black and white brand colors. –  JoJo Apr 21 '11 at 19:22
1  
Apple has been on the forefront of industrial design - essentially setting the trends in the market. Whether or not this was with an eye towards usability (not likely) or aesthetics (more likely) is a better question. –  David Clarke May 7 '13 at 3:52

My hypothesis: it takes less time to create a good black-and-white icon than a color icon that works well with the surrounding theme. You can more easily recycle an existing black-and-white icon.

share|improve this answer
    
+1 for recycling (and reuse) which is very important in design. –  Benny Skogberg Apr 22 '11 at 7:07

My hunch (or perhaps a justification) is akin to chart junk. Web sites are turning into web applications with a lot of contextual icons scattered throughout the UI. As to not compete with the actual content/data, using a monotone set of icons can help prevent them from sticking out like zits on the page.

share|improve this answer
    
Well said! I Agree 100%! –  Matt Rockwell Apr 29 '11 at 18:01

If they're being used for a purpose, the answer is simple: If you're giving attention to everything on the page, nothing gets the users attention.

share|improve this answer

I like how Windows 7 adopted grayscale colors for system icons on the taskbar. They do not attract your attention to them. When there's a situation that needs your attention, the icons have a yellow or red overlay depending on how serious the issue is.

The same can be said about the toolbar in Windows Explorer windows and details pane: they attract much less attention implemented in gray colors as opposed to Vista where these areas were much more colorful. Also in IE 4/5 era, toolbar icons were usually gray, and on mouse hover they were displayed in color.

So using grayscale icons lets users concentrate on the content they work with rather than colorful icons of the UI.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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