2

In Meng To's Design+Code book, he says the following while referring to icons with labels in navigations:

"Pro tip: If you don't want to always have text next to the icon, introduce it first and the next time, the icon can be without text. Once the user learns the first time, they don't need to learn it again."

I'm just wondering how true this is?

Update:

Bowen has mentioned that this feels like a solution without a problem, which is a fair comment. So let's give a more detailed example:

Imagine you have an application which has a lot of content, and you also have users which use the app frequently (for their job, for example - getting at least 5-10 hours use of it each week).

Usually removing the label may seem counterintuitive. As many people have pointed out: icons are not universal and are open to interpretation. But equally, when people use an app frequently they become accustomed to the placement of buttons as opposed to any accompanying label or icon.

So in the case of an app where you have people using it very frequently and you need to save space, then am I right in thinking this may actually be a reasonable case to remove labels entirely?

5
  • 1
    This feels like a solution without a problem. "If you don't want to" is not good underlying cause for removing useful information.
    – Bowen
    Jan 3, 2017 at 23:03
  • some icons can be stand alone without text or even an introduction such as home (house), email (mail), write a new email (pencil) Jan 4, 2017 at 3:10
  • @Bowen sure, I'd mostly agree. Getting rid of useful information for as aesthetic purposes wouldn't be great, however, if the reason was to allow more content to be seen then that may be a reasonable trade-off for apps which are used by people frequently and have lots of content.
    – a7dc
    Jan 4, 2017 at 15:21
  • @Bowen Updated the question with a detailed example, thanks.
    – a7dc
    Jan 4, 2017 at 15:39
  • Let users turn off/on showing of labels.
    – Drew
    Jan 6, 2017 at 21:01

4 Answers 4

1

Cognition suggests quite the opposite

Associative memory

An artist impression of a neural network

Our memory is associative, and is considered to be an emerging property of an adaptive complex system - the neural network.

Recall is reconstructive. The brain isn't a hard-drive.

You may have heard this famous quote by Wittgenstein:

The meaning of a word is its use in the language.

Similarly, with cognition:

The semantic of something is its associations.

Strip all associations from the word 'Tomato' (like something that is red, round, edible, that often goes in a salad) and it is as good as a random collection of letters like 'Buxiarw'.

What's important to remember is that neither text, nor icons are the actual semantic - they are just a step on the way to it.

What you really want people to learn is the association between the icon and its semantics. That is, create associations from a pictorial representation to some desired function.

The problem with icons

A spanner icon

As others have mentioned, icons are ambiguous at best, or plain cryptic. To give an example, a spanner icon could mean:

  • Preferences
  • Fix
  • Configuration
  • Work
  • Etc.

So inferring the semantic of an icon is often not easy, sometimes impossible.

The problem with more

A screenshot of Microsoft office

As with many aspects of life - more is less.

If an interface has only one icon, and the icon is key for (frequent) task completion, nearly anything goes. Think of the hamburger icon, that now seems so bluntly clear - there is little in the icon (when you see it for the first time) to suggest its function.

But when there are many icons, the recall ability decreases, and not in a linear way.

Formula sheets

A formula sheet

Putting text next to an icon seems reasonable - after all, the text clarifies the meaning of the icon.

There is a hidden assumption in the pro tip you've shared that this will suffice. But this can have an opposite effect.

Consider students who are allowed a formula sheet whilst taking an exam. Such group is far less likely to remember the formulas compared to a group that is not allowed such sheet (at least in the short term).

The brain is lazy, thus powerful

A sleeping leopard

When processing information, our brain makes gross generalisations and pretty much takes any possible shortcut - doing as little as possible to get the task done.

For example, when reading, we do not read each word in its whole - we glance at the start (and end), and even this is done within a confirmatory process rather inference from scratch (see predictive brain).

This is all part of cognitive economy - within a time frame, the less needs to be done, the more can be done.

Task based behaviour

An American football player jumping over others

Within task based behaviour - when the user is trying to complete a task - she will normally adhere to the principle above; namely, do as little as possible.

Users don't use systems not because they want to learn them, but because they have a goal - a desired state.

So by providing a text next to an icon, the semantic becomes immediately clear and there will be little incentive to create any association at all!

The power of success

The success kid - a kid posing as if 'I did it'.

Considering a fundamental (albeit crude) cognitive modal - the TOTE model - we know that accomplishing a goal makes us feel good. Sometimes it's the release of dopamine, sometimes its the sheer reduction in cognitive load.

This is a fundamental reward mechanism.

So as counterintuitive as it may sound, letting users to struggle a bit can yield better learning and retention.

This concept is well proven within the education field: spoon-feed your students with answers and they'll learn little (à la behaviourist theories); challenge them, specifically when self-exploring, and they learn much more (à la cognitive theories).

The flow theory suggests the optimal tuning of such paradigm.

Summary

As I've argued, there is a (good) chance that if you put this pro tip to test you'll find it won't work but rather have the opposite effect. Of course, there are many variables involved so in some situations it may well work.

But more than all, I hope that the information would be transferable to other scenarios.

1
  • Very interesting and detailed response, thank you. I've updated the original question with a more specific example of a particular situation I'm currently dealing with which takes into consideration the amount of time a user spends on the app and the reason for removing the labels.
    – a7dc
    Jan 4, 2017 at 16:53
0

According to research by NNG: “Universal” Icons Are Rare - There are a few icons that enjoy mostly universal recognition from users. The icons for home, print, and the magnifying glass for search are such instances. Outside of these examples, most icons continue to be ambiguous to users due to their association with different meanings across various interfaces. This absence of a standard hurts the adoption of an icon over time, as users cannot rely on it having the same functionality every time it is encountered.

Most users don't live on one site. They jump from site to site with multiple tabs and/or windows open. Icons are used from a business's perspective, so if not labeled, a user may mistake your icon for another company's definition of the icon.

If your team is more "pretty-design" driven, then sometimes this can be a tricky situation as many UI designers without a UX background prefer just icons. The UX cost for these "pretty" decisions may leave your users pogo-sticking through the website, scratching their heads, or closing the website and google searching for another "plain language" solution.

Instead of thinking about having either an icon or both icon and text, have you considered just text as an option if limited space is the issue? If short words like "Menu" are used, it can take up about the same amount of space as a hamburger menu yet be more clear to the user. With the myriad of beautiful display-only fonts available these days, design doesn't necessarily have to be compromised for usability.

Happy researching!

0

Update:

I still think it is not a good idea to remove the label because:

  • The user might forget
  • A different user might use the app

You could give the user the possibility to remove the labels from the app settings, the same way apps let the user customize the UI. Only in the case a set of icons belong to a convention (and this discern has to be done carefully) it might be alright to remove the label, but keep it in a tooltip.


According to this research "think with Google - Principles of Mobile App Design: Engage Users and Drive Conversions":

22. Provide text labels and visual keys to clarify visual information.

Visuals and iconography need text labels for consistent and proper interpretation. In our research, we found that icons for a menu, cart, account, or store locator as well as for actions like filtering or sorting are not universal and not well understood across apps. Icons that are labeled are much more likely to be used. Also, apps that provide visual categorisations without a key require users to guess what they represent. Make sure to include a key to reduce confusion and keep users on task.

My thoughts are that one can get used to click a certain tab to navigate to a certain place. Even if the icon is not understood, the relation button/destination can be memorised.

However, even if the user memorises the meaning of the icon or the button purpose, a different user might use the app, it might be difficult to track if a user really memorised it, or the user forgot it. So it is better to include the text label.

0

I find this article, "Icon Usability", on Nielsen Norman Group very useful for this issue:

To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning in that particular context. (And even if you’re using a standard icon, it’s often safer to include a label, especially if you slightly altered the icon to match your aesthetic preferences or constraints.)

Icon labels should be visible at all times, without any interaction from the user. For navigation icons, labels are particularly critical.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.