Icons vs Text for Commonly Used Actions

Question

We are currently trying to improve our usability in our intranet web app. One of our goals is to declutter certain pages which have large Grids on them. To do this, we have started putting commonly used actions (like Delete, Reset To Zero, Mark As Complete, etc.) in the grids as functions.

My initial idea was to find and use icons (i.e. Delete = a big red x, Reset = an arrow curving around itself, Mark As Complete a checkmark, etc.) to represent these tasks. Some of my coworkers agree with me; they say the icons make the tool look more professional. Others, however, say that icons obscure their intended function, and simple text such as Delete would be more appropriate.

Assuming that we will include a tooltip description of the function regardless of the type we choose (icons or text), which one is more usable? Can we use icons for some actions and text for others, or will that hurt usability?

Answer 1

I'm a big fan of icons. Heck, the textarea I'm typing this answer into right now has nothing but icons on top of it. You've got to be a moron not to know that a big dark B means bold... I think if your icon is self explanatory (like a big red X for delete etc) then that's for sure the way to go. It also makes it easier for the user to find the right action.

Answer 2

I would use icons seen in Windows applications like Microsoft Word and Excel. Most users a familiar with these and their meaning/functionality.

Also; usability proceeds "the professional look". It sounds to me like your application needs to be functional and not a design masterpiece. Therefore your main concern is to have your interface communicate its functionality as clear as possible, so tap into your users knowledge--again; chances are that your users are using Word and Excel on a regular basis.

Top top things off; make use of the alt property on image elements:

<img src="button_delete.jpg" alt="Click this button to delete X" />

Answer 3

I've seen both implementations work with great success. It really depends more on your target audience. Interestingly enough, there are a group of folks where I work that still expect to see text type buttons/links for their actions, so I've tailored those particular apps accordingly. Just provide both options initially and see which one the user base is more comfortable with.

If you can get away with it, can you make your icons large enough that you can embed the text of each action within it? Say a large red X with a small "Delete" text right below it, embedded into the image? I find that that will often suit both groups accordingly.

Answer 4

Icons save space (and with tooltip can be quite usable by beginners), but mixing icons and text would not be a good idea, requiring user effort to "switch". Why not, instead, put "rare" actions into a section of the page that's normally "folded shut" and only opens up when clicked? This saves even more space and clutter, after all.

Answer 5

If it's an obscure function, then icons would probably hurt usability. However, I think pretty much everyone has accepted and understand delete, refresh, etc. As long as you have the tooltips to fall back on, you should be fine.

Answer 6

We always use text in our company, we used to have a product with icons, and got many complains from the clients, for some reason, those icon made the user make wrong operations, especially when they were doing many things at the same time, for example, talking on the phone and entering data. Personally, I think if the operation is very simple, then icon is fine, but if there are several tasks listed together, it maybe confusing.

Answer 7

Using icons for some functions and text for others probably isn't very consistent (unless you follow established idioms such as toolbars and menus, which are both places for commands, even though one is for icons, the other one for labels – doesn't mean that it's a good idiom, though).

To quote from Jef Raskin's The Humane Interface:

In every study that considered the question, icons were demonstrated to be more difficult to understand than were labels, especially at first viewing, which contradicts one of the most frequently cited reasons for using icons, namely, comprehensibility for beginners. GUIs often present us with windows full of identical icons, each with a label. The icons are small and numerous, and there are dozens of different icons. The limited conditions under which icons are effective do not obtain in present computer systems.

Although it is true that tiny icons can take less screen space than labels, you have to ask: At what cost? The smaller a button, the longer it takes to operate it, and the more difficult it is to find; also, it is difficult to make a small icon distinctive. Another small point: Icons take more time to create than do words.

and

Mayhew [1] cites a number of research studies on the use of icons. Unfortunately, most of the studies did not compare labels to icons. But from these and other studies, we can conclude that icons are most effective when there are at most a dozen of them and when at most a dozen are seen at one time. In addition, it is essential that they

• Are visually distinct
• Do a good job of representing the appropriate concept
• Are presented at a reasonably large size, typically larger than a text label would be

[1] Mayhew, Deborah. Principles and Guidelines in Software User Interface Design (Englewood Cliffs, NJ.: Prentice-Hall, 1992).

I'd agree with Raskin on this point that in many cases icons really obscure the meaning of concepts and commands and you need additional text anyway to explain them. Aza Raskin's article The End of an Icon is a good read on this as well.