I am seeing websites increasingly switching to color based buttons and interaction elements rather than icon based is this a trend or do they have reasons behind the switch? For example see the twitter bootstrap css toolkit there the buttons that cause negative impact are shown in red and those that cause positive impact are in pleasant color. Is color theory a reason for that? what difference does it make if i used a tick mark beside the text in button for positive interaction and a delete/cross/wrong icon beside button text for negative interaction. For example of icon button please view here

2 Answers 2


Whether you are using icons or colours on buttons, the reasons should be the same - you're trying to communicate something by using them.

Comparing icons to colours and asking which is better will get you the age old response. It depends. They are different and each may be a better choice in a different situation.

Generally, colour draws attention to itself faster and is better for positional memory than icons. But icons can communicate more than a colour would. A button with an icon showing a trashcan tells me far more than you ever would by choosing a red colour, but I would likely notice the icon with the trashcan after I notice the red button (assuming of course that red is a contrast to your general colour scheme).

My (very subjective) rule that I tend to follow is that I use colour when I want to draw attention to a button without communicating anything additional about it (e.g. a sign-up button), or when I want to differentiate it from another coloured button for improved positional memory or scan-ability.

I use icons where there is an icon that can improve a customers understanding of a button, or where it has a unique enough shape to help with scan-ability.

One is not better than the other, and sometimes it is appropriate to use both. So use whatever makes the most sense for the situation that you are working on.

  • 4
    While I understand that you want to emphasize certain points, your amount of bolding (not only in this post) is very distracting (to me) and interferes with readability (for me) of your otherwise very valid points. Would you consider emphasizing just a summary sentence or some such? Or else use italics where you now use bold? Anything really to make the currently many bolded phrases jump out a little less? Oct 10, 2011 at 9:38
  • Certainly , all that boldness is making my eyes wink *_* , now i understand that the decision just depends & does not follow any theories. Oct 10, 2011 at 9:58
  • @MarjanVenema: This has nothing to do with the question asked, and so I will not answer here. Feel free to come into the UX chat and I will talk about it.
    – JohnGB
    Oct 10, 2011 at 10:09
  • @JohnGB: while it has no bearing on the question asked, it most certainly has bearing on the answer you gave. I do not use chatrooms, and do not have anything to add anyway. Oct 10, 2011 at 10:47
  • Nielsen sure uses this a lot as well. It helps clarify main points. In a world of fast paced clutter (on the web), it sure helps to get your point to cut through. Oct 10, 2011 at 11:38

I can't speak for what other websites you are seeing "increasingly switching to color based buttons and interaction elements", as it's not a trend I've noticed exactly, but as for Bootstrap - as the Bootstrap twitter blog states:

Bootstrap contains nothing but CSS, meaning there are no superfluous images, Flash, or Javascript. All that remains is simple and powerful CSS for your web development needs.


We want to keep working on slimming down Bootstrap’s already tiny footprint while also increasing the breadth of what it covers

Thus: including images is simply not part of the brief for Bootstrap, but since it is only a bootstrap, you are entirely able to add icons to buttons if your onward development requires it - just don't go mad, because icons with everything starts to clutter the clean looks you've started out with.

As for which is more attractive and friendly?

Well - some iconography and imagery helps to make a website more visually interesting as it will by definition seem more wordy with less alternative content. Since people don't like to feel they have to read too much in order to make progress, then imagery, iconography and symbology helps with this - but then so does beautiful typology.

It's going to depend very heavily on the context of your website. Websites about cooking or how stuff works, or science and nature, etc are pretty boring without photographs. But a wordpress admin site is nicely set off with a smattering of consistently designed monochrome icons (and a softly colored theme), which helps with recognition and recall, but is not too distracting as to be considered 'clutter'.

In my opinion, graphics adds value and clutter, but depending on content and context, the point at which the clutter has a greater negative impact than the positive added value is variable. However, you can shift that point one way or the other with the design (size, loudness, prominence, quantity, quality) of the imagery.

  • thank you for helping me take a decision and clearing all my assumptions Oct 10, 2011 at 9:59

Your Answer

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

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