by Cesare Rocchi
About - Contact - Now

Icons labels or both

by Cesare Rocchi

Tags: design icons

A few days ago I stumbled upon an interesting thread that started with this Tweet:

I studied semiotics so this discussion resonated quite a bit with my studies. I looked up some of the notes I took at the time and got back to the roots of semiotics, to the founder Charles Sanders Peirce. He classified signs in three categories:

  • Icon. It imitates what it stands for. It was exploited very well in the early days of user interfaces. For example the icon of a printer stands for the printer itself and thus represents the print action.

  • Index. Less coupled to what it stands for but still related. It is not “in place of an object” as the icon, but rather “points to an object”. For example dark clouds are index of upcoming rain. For a dog the whistle of the owner might be the index for “time to eat”. As you can see the link between the index and the object is weaker and related to a sort of statistical regularity.

  • Symbol. It is associated to the object by convention and repeated usage over time. There’s no particular correlation between the symbol and the object it stands for. A pretty common example is the eagle for the USA.

With this classification in mind we can say that:

  • the floppy disk was an icon, because in the past you actually had to insert a disk in a computer to save something. Now it’s more of a symbol, which by convention we associate to the save action.

  • the AT sign in the context of Twitter is a good icon, because its essence represents a reply to somebody.

  • the sign of an envelope is probably an index and can be ambiguous, in that different applications use it with a different “meaning”. In Mail on Mac OSX it means “get mail”, but in other apps like Tweetbot it stands for “direct messages”.

In user interfaces we tend to call an icon whatever is not a word. That’s a convention that we built over time but a quick analysis (as in the envelope example) shows that not every icon in a UI is an actual icon in the Peirce’s sense.

Should you use an icon, a label or both? These are my very personal opinions.

A label is the safest choice. Text is universal and also accessible on any platform by default. A label carries some cognitive load, because a user has to actually parse all the shapes of a word to make up the meaning, but still it’s the most generic means. For example when I prototype I only use labels. This allows me to avoid any distraction or tentative to start optimizing the aesthetics of the product while I am devising the “how it works”. Clearly labels need to be translated in different languages though.

An icon is the best choice if it’s an icon in the Peirce’s sense, that is if it’s closely related to the object it stands for. A printer for the print action or a pen to indicate write are both good icons. Some other signs are becoming symbols, on which we conventionally agree, for example the lens to indicate search or the avatar/silhouette to mean account/user. Unfortunately there are not many “universal” icons. Most have sense in a specific context, like the at sign in Twitter.

Icon plus label … well it depends. For example if the Mac App Store didn’t have labels I’d be very confused. The icon for the “Featured” tab is a symbol that is often used to mean “favorites”, whereas the “Purchases” tab shows an icon frequently used to mean “tags”. If your icons are not icons or symbols in the Pierce sense definitely complement them with labels. On the other hand, if you context is well delimited (like Twitter), you can probably get away with just icons.

Of course I am happy to discuss these opinions on Twitter. Hit me!