Icon based buttons or Color based buttons which is more UI attractive and Friendly

Question

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

Answer 1

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.

Answer 2

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.