When to use icons and when to use text

26 Mar 2009 - 1:12pm
2 years ago
20 replies
2682 reads
Mat Atkinson
2008

We are redesigning a web application for collaborative review of
design work.

We currently use text-based buttons for drop-down menus e.g. File |
Versions | Workspaces etc.

We are having a raging debate about whether to switch from text to
icons for some of the key functions and pull them out of the menus
e.g.
Compare Versions - users can compare two versions of a design side by
side
Upload New Version - upload a new version of a design.
New Person - add a new person as a team member.

What are the pros and cons of icons vs. text-based buttons. Are
there any good resources that provide guidance on when to use each
approach?

I already searched the threads and came across the Braindrawing
workshop idea.

Mat Atkinson
proofHQ.com

Comments

26 Mar 2009 - 1:44pm
Scott Berkun
2008

Where is the IXDA FAQ? This has got to be one of the most frequently asked
questions for UI design of all time.

The big question is this: what problem are you trying to solve? And for who?
Get agreement on the answers to those questions before worrying about icons
vs text.

That said, the old saw for this has 6 factors:

1) Text wins for ease of discovery, recall and comprehension. But text
always takes up much more space, especially if you support multiple
languages.

2) Icons are almost entirely about space savings and cost savings. You can
fit 20 icon buttons on a toolbar, instead of 8 text buttons. Also, you do
not have to translate a picture, while you do have to translate text. The
price is that if you show someone a new app that's icon only they'll spend 5
minutes reading the tooltips on each button to figure out what the hell
everything is.

3) Every toolbar design in history is a comprimise between the value of
text, and the space/cost savings of icon based buttons. Buttons with both
icons & text exist.

4) Power users and new users have different needs, and the best design of
toolbars and menus can be very different. Depending on what kind of usage
your apps get, the sweet spots would change.

5) Many commands have no 32x32 pixel iconic representation. The goal then
becomes looking distinctive so at least you can gain some recall/distinction
value. You do have to think about how good your icons are.

6) Customization is the escape hatch. If you give advanced users the ability
to customize the toolbars, you can weigh the defaults towards novice and
infrequent use. UI escape hatches are prone to abuse.

It's very hard to give you specific advice without seeing a picture of your
UI, and having a clue about what kinds of usage was common. The differences
between menus / text buttons / icon buttons is a blurry mess these days, as
there are various hybrid designs of these things out there and you might be
using one.

-Scott

Scott Berkun
www.scottberkun.com

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of
Matkinson
Sent: Thursday, March 26, 2009 11:13 AM
To: discuss at ixda.org
Subject: [IxDA Discuss] When to use icons and when to use text

We are redesigning a web application for collaborative review of design
work.

We currently use text-based buttons for drop-down menus e.g. File |
Versions | Workspaces etc.

We are having a raging debate about whether to switch from text to icons for
some of the key functions and pull them out of the menus e.g.
Compare Versions - users can compare two versions of a design side by side
Upload New Version - upload a new version of a design.
New Person - add a new person as a team member.

What are the pros and cons of icons vs. text-based buttons. Are there any
good resources that provide guidance on when to use each approach?

I already searched the threads and came across the Braindrawing workshop
idea.

26 Mar 2009 - 4:13pm
Shimone Samuel
2009

In my experience the best approach is to default to labels but provide
users with the option to display as icons or text (see most web
browser preferences for instance).

With that said, context is everything and depending on the
application any number of icons can be considered intuitive (save,
open, favorite, reload, delete, forward/back, search, etc.)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40534

26 Mar 2009 - 4:38pm
Mat Atkinson
2008

Thanks everyone. I was worried that this was a FAQ, so I did search
first. However, these summaries are some of the most concise that I
saw, so thank you again.

I think that our functions are fairly non standard, so text is
probably the way to go.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40534

26 Mar 2009 - 5:45pm
usabilitycounts
2008

It really depends on expert vs. novice users. Novice users aren't
going to pick up on icons right away. Expert users who use the
application 8 hours a day will.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40534

26 Mar 2009 - 5:46pm
Jared M. Spool
2003

On Mar 26, 2009, at 3:45 PM, Patrick Neeman wrote:

> It really depends on expert vs. novice users. Novice users aren't
> going to pick up on icons right away. Expert users who use the
> application 8 hours a day will.

Based on what data? I have studies that say that, in most apps, most
experts can't tell you what the icons they look at, day-in and day-
out, do or represent.

Jared

Jared M. Spool
User Interface Engineering
510 Turnpike St., Suite 102, North Andover, MA 01845
e: jspool at uie.com p: +1 978 327 5561
http://uie.com Blog: http://uie.com/brainsparks Twitter: jmspool
UIE Web App Summit, 4/19-4/22: http://webappsummit.com

26 Mar 2009 - 5:54pm
usabilitycounts
2008

At a company that developed CRM software (this was years ago), they
found through testing of users across several enterprise level
customers to get through more calls, functions by having key
functions as icons. They dealt with huge call centers. I don't have
the numbers with me (that was several hard drive crashes ago), but I
questioned their UX work at first too.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40534

26 Mar 2009 - 5:57pm
usabilitycounts
2008

As a followup, I hate icons. So hard to get right...

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40534

26 Mar 2009 - 5:57pm
Jared M. Spool
2003

On Mar 26, 2009, at 3:54 PM, Patrick Neeman wrote:

> At a company that developed CRM software (this was years ago), they
> found through testing of users across several enterprise level
> customers to get through more calls, functions by having key
> functions as icons. They dealt with huge call centers. I don't have
> the numbers with me (that was several hard drive crashes ago), but I
> questioned their UX work at first too.

Are we talking functions-as-icons or function-as-buttons (that happen
to have icons as symbols)?

I believe the latter. I don't believe the former.

Jared

26 Mar 2009 - 5:58pm
usabilitycounts
2008

Absolutely the latter.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40534

26 Mar 2009 - 10:16pm
Preston McCauley
2009

Interest topic. I actually came across this post going through my google reader tonight. I wrote an article on this about 1 year back.

http://www.uidesignguide.com/2008/04/02/when-should-i-use-icons-and-when...

Not sure if it will help, but it's a few thing I use before determining if I should use an icon.

By the way it took me 6 times before I could finally post here. The cookie system is a bit messed up!

27 Mar 2009 - 5:49am
Chauncey Wilson
2007

Jared, could you post your results of your study - I've been getting a
similar question about icons.

There is some literature regarding icons versus text only versus
text+icons in the HFES literature. This was a big topic in the early
days of toolbars. Deb Mayhew has some research results in her book
Principles of Software User Interface Design. As I recall, the
combination of text + icon lead to the best performance (redundant
cues is one explanation for this I believe) though as Scott pointed
out there is a trade-off of space and text size and translation and
frequency of use.....

I think that you'll find some information on this topic in some of the
traditional HF textbooks.

I'll see if I can dig up the performance literature and post a summary.

Chauncey

On Thu, Mar 26, 2009 at 6:46 PM, Jared Spool <jspool at uie.com> wrote:
>
> On Mar 26, 2009, at 3:45 PM, Patrick Neeman wrote:
>
>> It really depends on expert vs. novice users. Novice users aren't
>> going to pick up on icons right away. Expert users who use the
>> application 8 hours a day will.
>
> Based on what data? I have studies that say that, in most apps, most experts
> can't tell you what the icons they look at, day-in and day-out, do or
> represent.
>
> Jared
>
> Jared M. Spool
> User Interface Engineering
> 510 Turnpike St., Suite 102, North Andover, MA 01845
> e: jspool at uie.com p: +1 978 327 5561
> http://uie.com  Blog: http://uie.com/brainsparks  Twitter: jmspool
> UIE Web App Summit, 4/19-4/22: http://webappsummit.com
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> Unsubscribe ................ http://www.ixda.org/unsubscribe
> List Guidelines ............ http://www.ixda.org/guidelines
> List Help .................. http://www.ixda.org/help
>

27 Mar 2009 - 7:23am
Todd Warfel
2003

On Mar 26, 2009, at 6:46 PM, Jared Spool wrote:

> Based on what data? I have studies that say that, in most apps, most
> experts can't tell you what the icons they look at, day-in and day-
> out, do or represent.

I'm with Jared on this one, as my experience and research shows the
same. Additionally, there was a study done in europe several years
back that looked at over 100 icons tested globally. Universally,
participants could only identify/predict 6-8 of them. The point of the
study was that icons w/labels work best.

The only way "an expert" or non-novice user would perform better is
one that's expert with that specific system, but not an expert in
general. And that would only occur with trial and error to discover
what the icon does or leads to.

Cheers!

Todd Zaki Warfel
Principal Design Researcher
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

27 Mar 2009 - 7:38am
Caroline Jarrett
2007

Chauncey asked:
> Jared, could you post your results of your study
> - I've been getting a
> similar question about icons.

Anecdotally: I've found that it's possible to take any moderately well-used
program, e.g. Powerpoint, and use it to demonstrate the problems of icon
recognition.

- capture all the icons from the program's ordinary screen,
- take them out of context
- ask people what the icons are for
- now try it again with the icons in their usual places
- now try it a third time with the icons in their usual places and their
usual captions (if any)

I used to do this in Open University tutorials to help get students thinking
about recognition over recall.

Even people who use the program regularly will have startling gaps in their
knowledge. Both the context and the labels are important.

(Another trick I've tried is to ask people what the icons on their keyboard
mean - on PC keyboards in the UK, there's usually one with a sort of wavy
flag and another with a vertical oblong with an arrow on it. All you IX
people probably use them all the time, but many others are surprised to find
that those keys are present on the keyboard and have to try them to find out
what they might be for. Not that text is necessarily better: UK keyboards
have an "Alt Gr" key that is incomprehensible to nearly everyone).

Best
Caroline Jarrett
www.formsthatwork.com
"Forms that work: Designing web forms for usability"
Foreword by Steve Krug

27 Mar 2009 - 8:06am
Joshua Porter
2007

Icons aren't really about recall....they're more about recognition and
location.

Recognition: The question is not whether people remember what the icon
looks like, but can they recognize it when they see it in context?
(think of song lyrics...you probably can't tell us what they are right
now, but if the music came on [you were in context] you would likely
be able to sing along)

Location: Most people remember *where* functions are located much
better than what they look like. (think of driving... spacial
recognition is much more than simply what things look like...it's
directional & multi-dimensional)

The reason why icons + text works best is because that combination
provides the most information...which by sheer probability makes it
more likely that a user will recognize them when they need to.

Josh

Joshua Porter, Founder
Bokardo Design
Interface design & strategy for social web applications
phone: 508-954-1896
http://bokardo.com
porter at bokardo.com
twitter: bokardo

27 Mar 2009 - 8:33am
ambroselittle
2008

Hi Mat,

I thought you might find these posts useful.

This one talks about how the Office 2007 team decided when to use icons or
not:
http://blogs.msdn.com/jensenh/archive/2006/03/06/544499.aspx

This one talks about the importance of labels:
http://blogs.msdn.com/jensenh/archive/2005/11/01/487661.aspx

The short answer is to use both. :)

My own personal take is that well-designed icons can enrich both the
usability and desirability of an interface, with the caveat that you should
usually provide a complementary text label. Just my opinion, FWIW. What
Josh Porter just wrote provides some good rationale for this approach...

-ambrose

27 Mar 2009 - 9:35am
Mike Myles
2009

Joshua Porter's post most clearly captures the value of using both,

"The reason why icons text works best is because that combination
provides the most information...which by sheer probability makes it
more likely that a user will recognize them when they need to."

I would add that icon text creates a larger target area than just
icon or text, making acquisition easier.

There are countless examples of bad icons and poorly worded labels.
That does not demonstrate that either icons or text are by their very
nature ineffective, but rather that someone failed to devise a clear
iconic or textural representation. Both icons and text can be
effectively used either independently or together.

Ultimately, any system - iconic, text based, or combined - should be
evaluated by target users. There is no hard a fast rule about when
icons work best and when text is better.

Icons have the potential to make localization of an application
easier, but they can add complication as well. Just as there are
cultural difference in language meaning that must be considered for
translation, the same holds for visual representations.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40534

27 Mar 2009 - 10:25am
Jared M. Spool
2003

On Mar 27, 2009, at 7:35 AM, Mike Myles wrote:

> There are countless examples of bad icons and poorly worded labels.

Keep in mind that there's a lot more work to make a high-quality icon
than to make high-quality labels.

To make a high-quality icon:

First, you have to figure out what the semiotic should be. Some
imagery is easy, such as Print, Help, or Save (though it would be nice
to retire those floppy disks, no?) purely because of the visual
language that's been established through time.

However, most functions don't have clear imagery already established.
Harry Hersch did a wonderful study in the '80s that we've replicated
dozens of times and is still solid: He measured how long it took the
team to decide what the best icon for a given function should be. Then
he measured how long it took for a user to decode the icon into the
corresponding function. He found they were directly correlated. It
took proportionally as long to figure out the icon as it did to decode
it.

So, if it takes the team a long time to decide on an icon, chances are
it won't be a great icon for users. In yesterday's UIE Virtual
Seminar, Hagan Rivers touched on this topic. She showed a security
fault detection application that tried to have icons for functions
like "SNMP Trap," "Policies," and "Forensics." What imagery would you
use for those functions? If it takes you more than a minute to figure
it out, then chances are the image won't work for the users, no matter
how skilled they are in the domain.

Once you've decided on the semiotic, you then have to render it.
Creating solid imagery in small boxes (whether 8x8, 16x16, or even
64x64) is an advanced skill. Folks like Dan Cederholm (http://www.iconshoppe.com/
) have proven it can be done well. But it takes practice and most
visual designers, though talented in other ways, haven't developed the
skills.

Finally, you have to deal with cultural differences. A Stop Sign image
might work for a Stop function in the states, but there are many parts
of the world where that image won't play. And using the color red for
Stop is not going to mean the same thing elsewhere. Classic examples
of cultural problems with icons involve trash cans and mailboxes --
these don't translate well beyond the US and parts of Europe.

Oh, and don't forget that icons are not screen-reader friendly.

So, while there are advantages to having both icons and text, versus
just text, the resource demands for doing the a quality job with the
combination grows fast.

Hope that helps,

Jared

Jared M. Spool
User Interface Engineering
510 Turnpike St., Suite 102, North Andover, MA 01845
e: jspool at uie.com p: +1 978 327 5561
http://uie.com Blog: http://uie.com/brainsparks Twitter: jmspool
UIE Web App Summit, 4/19-4/22: http://webappsummit.com

27 Mar 2009 - 10:56am
Adrian Howard
2005

On 27 Mar 2009, at 15:25, Jared Spool wrote:
[snip]
> However, most functions don't have clear imagery already
> established. Harry Hersch did a wonderful study in the '80s that
> we've replicated dozens of times and is still solid: He measured how
> long it took the team to decide what the best icon for a given
> function should be. Then he measured how long it took for a user to
> decode the icon into the corresponding function. He found they were
> directly correlated. It took proportionally as long to figure out
> the icon as it did to decode it.
[snip]

Do you have a reference for that? It matches my experiences - but an
actual study would be a useful resource to point folk at.

Cheers,

Adrian
--
delicious.com/adrianh - twitter.com/adrianh - adrianh at quietstars.com

27 Mar 2009 - 4:40pm
Mike Myles
2009

To Jared's point,

>Keep in mind that there's a lot more work to make a high-quality
icon than to make high-quality labels.

I certainly agree that is most often the case, but there cases where
it's easier to convey a concept symbolically. One specific personal
experience...

I worked on an application where one needed to specify how to utilize
two sets data,

All of A and all of B combined
Only the intersection of A and B
Exclude the intersection of A and B

This was difficult to communicate succinctly in text, but Venn
diagram style icons showing the include/exclude intersection concept
were 1) less contentious for the product team to agree upon than any
of the proposed wordings and 2) proved extremely effective with our
users.

The following is excellent advice that speaks directly to the sited
example,

>So, if it takes the team a long time to decide on an icon, chances
are it won't be a great icon for users.

In the include/exclude data example, agreement in the team was easy,
and in testing users understood the icons immediately - apparently
further confirmation of Hersch's findings.

I would never argue creating effective icons and labels is simple, so
using both will inevitably mean more effort to 'get it right.' But I
wouldn't go so far as to say that the text only path always requires
less work to get a point across.

As for accommodating the visually impaired, there are alternatives
such as alt & title attributes in browser based applications, and
other options with installed apps. Designers and developers should be
encouraged to be conscious of accessibility issues and strive to
address them without creating less compelling & innovative products
in the process.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=40534

25 Apr 2011 - 1:53pm
Michael Hughes
2011

OMG! This is the BEST discussion I have ever read. Thanks, everyone.

Syndicate content Get the feed