By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

The usability of icons in GUIs and Website

If you are interested in usability, and if you are working with GUIs, these thoughts could be relevant for you.

Edited: 2014-12-16 15:28

A big question for many designers, when it comes to designing GUIs, is whether you should create a nice looking button with text on it, or create a even nicer looking icon for your button.

The answer to this question is actually dead simple: it is generally hard to argue in favor of one over the other. The reason for this has to do with how humans learn. With an icon, there is always the risk that the user dose not understand the information the icon was made to represent; but the same can be said for text and written language.

Note that i make no differentiation between GUIs in desktop applications, and the design of websites. But there are some obvious design differences of course. This article is mainly an encouragement to designers, to choose what they prefer, and what they feel adds to the creative value of their designs – taking for granted, that it will not mess with the usability negatively.

Icons vs Text in GUIs

Icons have a clear advantage over text buttons – they do not need translation in a multilingual application – but this is rarely a true advantage, as translations tools have become so advanced, that the gain, in forms of time saved on internationalization, is near negligible.

Text have the advantage that most users can read it easily, the problem is that text often needs to be translated into other languages. Text will typically also load faster than an icon, though the difference should be negligible, when done right.

Icons, like text, rely on users past experiences and encounters with symbolism. The older generation did not grow up with computers, and as such they may be less likely to have encountered standardized symbolism on the internet. The younger generation, may have grown up with computers, and therefor feel more comfortable working with them, and are more likely to have encountered said symbolism.

For example: a red cross might be used to signal, that pushing this button will delete a page. It is clearly easier than writing "delete", the problems we face when using graphics are different, and due to these problems, it might be better to use text.

Problems with Icons

The worst of these problems, is actually not as bad as it sounds. Icons that are saved as raster graphics, can appear very small on larger screen resolutions, and this could be said to be one of the worst problems.

You need to make sure the icon is recognizable, or that its function is otherwise obvious, (a red cross for a delete feature is a good example.)

The obviousness of the icons meaning, if the user dose not understand it. This is where it is important to mention, that how obvious the use of the icon is, can be enhanced by other elements in the GUI, so it is not necessarily important to use "standardized" symbolism.

An increase in HTTP requests for websites, which can slow them down further. This is not much of a problem if the icons are compressed properly, or embedded as CSS spirits.