When to use icons vs. icons with text vs. just text links?

  • Are there any rules on when to use icons vs. icons with text vs. just text links in a web application?

    For example:

    disk icon


    disk icon save



    Extra question: Is disk icon save -or- save disk icon preferable?

    I would use icons only if the button is very small, but when the user hovers on it, it will display the text description. If there is sufficient space, I would place the icon on the left then the text, because it's a convention.

    About your extra question, why not putting text below the icon?

  • Icons are notoriously ineffective as labels, being very difficult to interpret correctly without training or experience. For most situations, users learn correct interpretations better with text alone than with icons alone. See: Wiedenbeck, S (1999). The use of icons and labels in an end user application program: An empirical study of learning and retention. Behaviour & Information Technology, 18(2), p68-82.

    Icons are especially bad for anything abstract, such as Invoice or Bid, since abstract things generally do not have any strong visual image (both Invoice and Bid could be represented as paper documents, but how would you distinguish them?). Similarly, icons are particularly bad for actions (e.g., Save, Publish); it’s hard to clearly show a process with a picture. Yes, icons are used all the time in toolbars for actions, but toolbars were intended for experts, and nonetheless users are frequently confused by them (on average, users know only six Word toolbar items after regularly using Word for two years).

    Icons can save space over text, but at the price of recognition. For small icons, such as 16x16 pixel, it’s very difficult for users to even recognize what they are supposed to be a picture of, let alone what the picture is supposed to stand for. One user I know thought the “disk” icon for save was a picture of a TV. (She was old enough to know what a floppy disk was.) I personally used Word for years thinking the Track Changes icon was some sort of stylized Rosetta Stone. Expert users find it easier to rely on the memorized physical position of the toolbar controls rather than the icon labels to pick a control. Bigger icons (e.g., at least 32 by 32 pixels) can help recognition, but take so much space you’re better off using the space for a clear text label. If space is limited, often you’re better off using abbreviated text than icons.

    It’s extraordinarily difficult to get icons right. Do not attempt to develop a new icon without extensive iterations of user testing. Even then, you may fail. Microsoft designers tried everything to make interpretable icons for Outlook’s toolbar before giving up and going with text labels on key controls.

    Icon labels also make tech support difficult (e.g., “Click on the yellow sheet with a blue checkmark,” versus “Click on ‘Accept’”).

    As rule of thumb, icons alone should only be permitted when at least two out of the following three conditions apply:

    1. Space is very limited (i.e., too small for text alone).

    2. The icons are standardized (e.g., the floppy disk image for save)

    3. The icon represents an object with a strong physical analog or a visual attribute (e.g., a printer icon to access printer attributes, or a red rectangle to set a page background red).

    Tooltips are required for icons when they are used alone, but they are a poor substitute for text labels. Your users shouldn’t have to use your app by groping around for things. The fact that text labels never need graphic tooltips is a pretty good clue that text is better than icons.

    If space allows, icons combined with text is best. (I think there was research showing this from the late 1980s but I can’t find it.) Selective use of icons with text makes certain items stand out more or add visual interest. It may also improve the scanability of the items, but good text labels can do this too. Users have been known to subjectively think an app is easier if it has icons, even when they don’t actually improve performance (see Wiedenbeck, 1999 cited above), so that’s another reason to have icons and text combined.

    I usually see the icon either above or left of the text label. I don’t think it’s necessarily inherently better than the alternatives, but it’s a convention you should follow too if you have controls next to each other so the user can rely on experience to tell which text label goes with which icon.

    +1. I wonder why the designers of the Mac OS X dock decided to use icons without text.

    @Jon: The originator of the Mac HIG has criticized the Dock for this (http://www.asktog.com/columns/044top10docksucks.html), so you’d think the designers would know better. My guess is they did it because they thought it looked cool. It’s not the only time Apple has traded away usability for aesthetics.

    @Michael: And then the Windows taskbar copied it. At least in Windows there's an option to get the text back. I find it interesting that an iPhone with far less real estate than a Mac wisely shows text with the icons.

    I was thinking about how I know a ton of word icons by heart. Then I remembered I made a text editor in javascript from scratch, so *of course* I knew the icons after dozens of hours only staring at them. My point: a designer/programmer is **not** the end user.

    not so sure about referencing 10 year old articles to prove your point...

    @rmarti55 Is it simply because they are that old, or do you think the information in them is no longer accurate at this point? Do you have more recent sources that dispute the older articles?

    @Stijn Both. Users in 1999 had a very different technical literacy to users even in 2010, when this question was answered. The first sentence of the answer is "Icons are notoriously ineffective as labels, being very difficult to interpret correctly without training or experience." By 2010, most users have been exposed to an exponentially larger number of digital icons and digital experiences, gaining the training and experience and refuting the notion of icons as ineffective (think of FB's thumbs up). While 10 year old citations might work in technical settings, in a UX setting, they do not.

    I tend to find icon descriptions to the RIGHT of the icon. E.g. Github puts their words on the right of their icons.

    @rmarti55 In 2020, users have been exposed to so many different icons for the same concepts, and so many of the same icon for different concepts that this answer is true again. For certain universal icons (the floppy disk 'save', the thumbs-up 'like', the two-squares 'copy', the scissors 'cut', etc.) icons are sufficient, but for most functions words are still easier to parse.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM