1

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

enter image description here

Text always displayed

enter image description here

2 Answers 2

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).

2
  • "The best solution is to let the user choose." This is a solution, but I'm guessing it's not always the best. I think many users prefer defaults, and that's why the defaults shouldn't be left to user choice. Aug 21 at 3:12
  • Letting the user choose is not the best option? You (the designer or developer) think you know better than the user what they want? I am always running across situations where someone coded what they thought I wanted and they were completely wrong. Aug 25 at 5:31
0

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:

Google analytics sidebar YouTube Sidebar

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.

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.