Back to news

Icons – A potential challenge to usability

February 22nd, 2018

Icons

While a common idea might let us think that icons are always enhancing usability, a few facts show it is not always the case. As we are depicting it here, icons, when not correctly applied may sometimes create confusion among users.

1) Icons need to be easy and quick to memorize, given the fact that user’s understanding is based on previous experience. Not to be applied as fancy artefacts only, icons should primarily help your visitors making decisions and orientate themselves on the website.

2) Another key element when it comes to the use of icons is the readability to multicultural users, so the meaning of your icons is intelligible to large international audiences. It would rather be recommended to keep their design schematic and simple in order to avoid confusion.

3) A text label would often be a good idea to complement an icon.Since there are a very few universal symbols, it might be rather difficult for the users to identify the meaning of an image while not underlined by a text. Let’s take for example the symbol of a mail box. It may look completely different from country to country, culture to culture. Subsequently, the attempt of applying this symbol to connote an inbox can be rather challenging.

3.1) The hamburger menu, also known as “triple bar” is a very interesting example of an icon, on the verge of becoming universally known and understood. Nothing yet, tells us instinctively that a menu is hidden behind these three lateral bars. You may want to use the word “menu” instead, so there is no doubt, or at least combine both word and symbol.

Hamburger 1(Example of a triple bar menu – or hamburger menu – without any text label)

Hamburger 2  (Example of a text label clarifying the meaning of an icon)

3.2) As mentioned above, icons do not necessarily entail a universal meaning and need, in order to make sense for the largest possible audience, to fit the context, meaning your users. While creating webpages or applications, don’t forget that your visitors are all different in age, culture, and technical abilities. In order to clarify the purpose of your icons and render your platform easily accessible, a text is often the best choice.

3.3) Importantly also, the intrinsic meaning of icons may vary, according to the nature and purpose of a website, which can be quite confusing for the users. To illustrate this idea, we can use the following symbol: Home House The house depicted on this icon may embody different functions, depending on the website. If you are on a real estate website, this icon would probably direct you towards a selection of properties for rent or sale House Sale. While on most websites though, the very same symbol will just redirect you to the homepage.

Or in some cases, a gift card icon Giftcard, may look quite similar to a credit card symbol, and be therefore misunderstood by the users, who would think it’s a payment icon Credit Card.

We have just highlighted three cases where it would have been simpler to use a text label as an addition to the icon. This demonstrates the necessity to combine an icon with a text in order to clarify its function and meaning, until a universal standard or uses is set for icons.

When creating a website, do always take into consideration the potential need for a text label beside the icons, and keep their overall design schematic, clean and simple, to ultimately provide the visitor with a more user-friendly webpage.