Icon Buttons Need Tooltip Labels

Humans have been using images to communicate for at least 51,000 years, highlighting our innate ability to perceive and recognize shapes. Our brains process visual stimuli, routing them through the visual cortex to the hippocampus, where they are initially stored in short-term memory. Consistent exposure and reinforcement convert these into long-term memory. The more frequently we encounter a visual stimulus and its associated characteristics, the more familiar we become with its perceived meaning.

From childhood, we learn to recognize primitive shapes and how they combine to form complex objects. Our ability to read, for instance, is built upon recognizing individual letters as primitive shapes before stringing them together into words. Each characteristic of a letter serves as a contextual cue, encoded into a schema, allowing us to label and recognize it. This process enables us to identify words by their unique shape, name, and sound.

This use of prior knowledge through schemas is known as top-down processing. An example is distinguishing between a capital 'I' and the number '1'. Conversely, bottom-up processing requires us to interpret external cues to understand what we are perceiving. While a capital 'I' in "Interstellar" and a lowercase 'l' in "love" might look identical in certain fonts, we rely on context to determine the correct letter. However, without adequate context, like seeing "I2345," the 'I' could easily be mistaken for a number.

We apply the same cognitive processes when interpreting icons on applications and websites. Icons are favored in design for their ability to save space and enhance UI cleanliness and scannability. When encountering an icon, we search for cues that align with our existing schemas, which are formed by our experiences with other apps, websites, and the real world. Often, we can readily identify familiar icons that visually or functionally resemble their real-world counterparts through top-down processing.

Consider these examples of easily recognizable icons; their resemblance to real-world objects allows us to infer their intended action. Icons are from the Noun Project

The more discernible characteristics an icon possesses, the stronger its encoding in our memory, which increases the likelihood of accurate identification and comprehension.

Now, examine another set of icons. These are likely more challenging to understand, primarily because they don't resemble real-world objects and, despite some similarities, represent distinct actions. To grasp their meaning, one might need to analyze all icons collectively (bottom-up processing) to infer context. Designers who take excessive creative liberties or choose obscure icons for metaphors risk user confusion. This fragmentation and lack of standardization contribute to icon recognition difficulties. Icons are from the Noun Project

Furthermore, what happens when an icon is recognized, but its specific context is unclear? Take, for example, a wireframe of a modal dialog featuring four 'X' icons. While the 'X' in the top-right corner typically signifies "Close," the purpose of the others remains ambiguous. Though they share the same shape, their context implies different, potentially destructive, intents. Users would have to interact with each element to understand its function, which is not ideal and can lead to errors. This is precisely where labels become crucial. Relying solely on icon buttons without visible labels is insufficient. While ARIA attributes like aria-label, aria-labelledby, and aria-describedby are vital, they only serve users of assistive technologies. They do not address the needs of sighted users who might experience short-term memory loss, for instance, due to conditions like Long-COVID.

Labels function as essential memory and visual aids, helping users decipher abstract icon shapes. Without them, Icon buttons aren't accessible. This doesn't imply that labels are the sole solution for comprehension; designers must still select icons that best represent their real-world functions. Even with well-designed icons, their purpose can be misunderstood.

The label text should explicitly state the button's intended action, rather than merely describing the icon. For example, if a gear icon opens a settings menu, the label should be "Settings," not "Gear" or "Gear icon." While descriptive, avoid adding superfluous details. As previously noted, guaranteeing a user's prior knowledge of an icon's meaning is impossible. A tooltip label, therefore, provides crucial context for all users, significantly enhancing the overall user experience.