Sidebars: Icons & Label or Icon & Hover Tooltip

Question

I got curious today: From a learnability, accessibility, and usability perspective, it is recommendable to not hide behind an interaction (hover) the label of something and not force the user "guess" what an icon means or, more specifically to our case, what a button will take you to.

However, there might also be a case that by displaying so much text, it takes longer for users who are accustomed to your platform to identify the button and navigate to pages by an overload of information and harder scannning.

Is there any research on the topic?

Just to clarify what I'm talking about:

Label appears on hover

Text always displayed

Answer 1

"I'm inclined to say that the benefit of showing text significantly outweighs the benefit of having a smaller sidebar".

You can never choose a solution that will be good for everyone.

The best solution is to let the user choose. You can display text by default but let the user turn off the labels to have a less cluttered look if they so choose.

Just make sure that even if the labels are turned off, that the accessible name is still specified correctly in the code (WCAG 4.1.2 Name, Role, Value).

<button aria-label="settings">
  <span class='gearIcon'></span>
</button>

And since you mentioned a tooltip example, make sure the tooltip remains visible when the mouse is moved to the tooltip text. That is, don't hide the tooltip if the user moves the mouse off the initial object that caused the tooltip to display (WCAG 1.4.13 Content on Hover or Focus).

Answer 2

Using a large row of textless icons can be OK if the meaning of the icons is well understood. If all you have is "house" - "person" - "gear" - "bell" and the context is a social media platform, you probably can expect a user to figure out that this is home - profile - settings - notifications.

Once you go anywhere beyond that, icon-only becomes very tough. Take these guys for example:

Even if I was to tell you that the things in the light toolbar mean Search, Home, Conversions, Behavior, Acquisition, Audience, Realtime, Customization, you'd be hard-pressed making the right connection from each meaning to each icon. (Correct answer in case you're interested: 1,2,8,7,6,5,4,3)

The ones in the dark toolbar are so cryptic and similar to each other that it becomes near-impossible to tell which is which - hence why they're always accompanied by text. The site in question this dark sidebar is taken from is YouTube, btw.

Removing labels from a sidebar and making them icon-only makes things harder to scan.

---

Taking back a step from that:

it takes longer for users who are accustomed to your platform to identify the button and navigate to pages by an overload of information.

A navigation sidebar containing some icons and 1-2 words per item is very unlikely to get overwhelming. Especially if you give the sidebar some internal structure (like YouTube does, for example).

Documentation pages have a tendency to have overloaded sidebars, but even then, typically that's a result of the nesting depth becoming too wild, not necessarily a result of there being too many words.

Given that we have most, if not all, large user-facing sites use sidebars with text, I'm inclined to say that the benefit of showing text significantly outweighs the benefit of having a smaller sidebar, on desktop sites anyway.