12

It seems a common theme these days for the UI design of many web applications to use icon driven navigation (so fixed sidebar on the left consisting of only icons for navigation)

Wondering why this is becoming the trend and if there's research suggesting it's a preferred approach, or just design trends moving that way...

  • 1
    This article, from Nielsen/Norman, is relevant: Icon Usability. "Summary: A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity." – Ken Mohnkern Oct 29 '18 at 13:57
23

Icons alone can save space in case of long(er) labels, but the tradeoff is a memory tax on the user.

Icons can give visual order and harmony to layout, especially in sidenavs. However, in a complex, multi-node nav, we are asking our users to memorize a lot of icons.

See the firebase console as an example:

enter image description here

In the expanded view, I get clear labels. Words like authentication would be hard to add below an icon in the closed state, even at small sizes.

Firebase does provide quick hover tips that show the label, but the tradeoffs are:

  • I still may have to move up and down the nav to locate what I want.

  • I get more space in the document area to work with, which is very useful for web applications where the user is editing, manipulating, and creating content, as opposed to viewing/reading.

  • I lose the category description which helps group the items

Difficulty mapping metaphors

There are many concepts here (26 nodes in this nav!) that don't easily map to physical or cultural metaphors that are widely understood (e.g. pencil for editing), so to come up with meaningful and widely accepted icons is very difficult. Even for this domain (app developers) it's very hard to parse what each means.

Nielsen Norman Group has some thoughts on Icon usability as well.

if you find you need to ponder to come up with an icon for navigation, chances are it’s not going to be easily recognizable or intuitive for users.

Icon labels should be visible at all times, without any interaction from the user. For navigation icons, labels are particularly critical. Don’t rely on hover to reveal text labels: not only does it increase the interaction cost, but it also fails to translate well on touch devices.

  • Notice even Firebase fails there as "settings" doesn't have a label even though its given context of "this project" in the expanded view. – Bryce Howitson Oct 26 '18 at 17:33
  • 2
    I was just about the quote the same article from Nielson Norman Group, but I am glad I refreshed first! This is the best worded article I have read about why icons and labels go together,and they have a good video that explains it, too. – cmdoc Oct 26 '18 at 17:35
  • Another benefit compared to using words is that icons transcend language. Provided you've chosen an icon that users will easily understand (gender for bathrooms, settings cog, etc), the icons won't need to change during localisation. – Nauraushaun Oct 27 '18 at 1:05
  • IMHO they could do the other way around: by default show labels+icon, then let power users hide labels. In this way the "normal user" has no problems and users that remember the icons well can have the extra space if they want to. – Bakuriu Oct 27 '18 at 9:29
  • Unless the icon has an undeniable, "global" (more or less) meaning, the lack of a label will just confuse users. Here's what I see when I look down the unlabeled list: Home (obvious), Settings (obvious), People, Robots, Pictures, World, Tie Fighters, ML (no idea - public transit maybe?) ... you get the idea. – GalacticCowboy Oct 27 '18 at 16:04
3

The primary driver is cost - web & mobile applications often have a global userbase, but no/limited budget for proper localization. In addition, many developers, designers, and even project administrators, apply their own cognitive bias, and fail to realize that iconography is highly culture/experience-specific. So they opt for "universal" icons instead of text labels which will add to the localization burden.

Depending on the usage, it is possible to use some international-standard icons in your design. But you still need to do a fair bit of field testing to make sure that users understand the meaning, and accept that icons will likely still need to be localized with the rest of the project.

Also, icons ensure a certain fixed-size & fixed-orientation which appeals to designers more than the variable-length labels necessary for text. However, even that fails to account for differences between left-to-right & right-to-left languages (sidebars should be start-aligned), and free-rotation & free-scaling needed for accessibility (especially on mobile).

1

The "why" is because designers like pretty pictures. So obviously they gravitate to icons. It also gives the designer more space, especially on a small screen. So most people think it's a great solution.

However, just because something is a trend DOES NOT mean its a good idea.

The argument AGAINST using all icons for navigation that most designers ignore is this: There are a very very small number of icons that ALL humans intuitively understand (think bathroom gender icons). Outside of that people must expend a large amount of cognitive energy to consider all the possible meanings of an icon, then put it in context with it's most LIKELY meaning within an app. Yes, people learn icon meaning over time and once they do, interaction is faster for subsequent uses but it takes work.

The human brain doesn't like this process of learning. We're creatures of habit but we HATE forming habits.

"Tooltips" were created specifically to address this context/understanding issue where there's limited space (look at your browser toolbar).

So before following the trend, consider how your initial users will feel? Do they need to understand how to progress very quickly? Worse will there be a negative consequence for doing the "wrong" thing? If so, words in interfaces provide much more context than an image so you're better off using text + icon.

  • This post exhibits a lot of bias and subjective opinion, with no evidence to support. – Nauraushaun Oct 27 '18 at 1:03
1

Usually icons are heavily made use of in UIs designed for Expert Users.

Expert users are a very different category of user, and are typically happy to invest a large amount of effort in learning to use software, provided it makes them more efficient and / or productive in their work.

Applications designed for Expert Users are feature rich, e.g. content creation UIs such as Photoshop (see screenshot below) or Microsoft Word. In such application there are so many options available that it would be impractical to provide labels with everything.

Usually the icons form a carefully crafted design language describing features / groups of features. If users are prepared to learn the design language of the application feature icons, they can tile the menu bars with all the icons that they need. This will save them the inconvenience of having to browse multi-level menus to find the functionality they need, and hopefully make them more productive in the long run.

Photoshop example screenshot

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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