23

Some toolbars have icons for each label, and some toolbars do not have icons for any label. There is enough discussion about that.

However, some toolbars will attach icons to label selectively, and on that I cannot find any type of discussion. Here is an example from Intellij:

enter image description here

The leftmost toolbar attaches only few labels with icons, while the rightmost toolbar almost attaches all the labels with icons.

The majority of the discussion is about whether to rely only on icons, only on labels, or combine them. There is no discussion or reasearch about selective use of icons in the same toolbar.

While it could be argued that "save all", "print" and "open" are "iconified" due to these actions being ubiquitous with easily relateable visualizations, "project structure" does not satisfy that idea. There are also many other features like "export" and "import" with easy visualizations that can be iconified.

I wonder if there is a practice that guides when to add an icon to a text label, and the extent to which one could add iconfs to labels before there is clutter (if there is such a limitation).

  • 44
    Maybe it is me being 100% stuck on Win32 terminology, but to me the thing you are talking about isn't a toolbar, but a menu (with a submenu currently expanded). – Andreas Rejbrand Aug 5 at 20:34
  • 3
    I had always assumed the menu items with icons were the ones that could also be on the "real" toolbar in the upper right. Menu items without icons could never be on the toolbar. – Mooing Duck Aug 5 at 22:16
  • 2
    @Bar: I don't know. My expertise is 100% on the Win32 desktop platform, mainly developed by Microsoft in the 90s. I know very little about new stuff like Android, iOS, etc. But on the Win32 platforms, the links I posted are very official indeed. – Andreas Rejbrand Aug 6 at 5:44
  • 1
    A menu may be a special case of a toolbar, but a dropdown menu is not. And the typical main menu does not have icons (I guess because the Win32 did not allow for it), otherwise it is a toolbar with dropdown menus associated to the buttons (what is not uncommon). In addition, you often can rearrange toolsbars and toolbar items, while you usually cannot move (or reorder) a menu. – allo Aug 7 at 9:08
  • 3
    Toolbars were originally created as one click shortcuts to existing menu items. Menus can be organized in a hierarchy, toolbars are a flat list. To say that a toolbar is a generalization of a menu isn't really correct. – 17 of 26 Aug 7 at 15:07
23

There are a couple of reasons:

  1. If there is a generally accepted icon for that feature. Examples, save, cut, copy etc.
  2. If the feature is borrowed from another application which has an app-icon. For example, sharing on facebook can use the Facebook icon.
  3. Context of use, if a lot of the similar icons are displayed together, the icons will lose their purpose. However if it was the only one of that kind on the current interface, it will be useful. One way to overcome this is to group similar features and denote them with a single icon.
  • 4
    #1 is a big one. Too many designs try to cram an icon from their icon pack on every single menu item when half of them don't make any sense or don't help you navigate at all. – Qwertie Aug 6 at 7:14
  • 5
    I'd add that icons may appear in a menu if the icon itself is also present in the UI. E.g. "Save" button may be present in a toolbar, but is also accessible in the menu. Putting the icon near the menu entry, may remind the user that it's not necessary to open the menu to save a file for example. (I just noticed bta already had this as an answer) – BlueCacti Aug 6 at 12:25
  • 1
    Historically speaking, bta's answer is the correct one. Menu items were originally given icons when they also appeared in a toolbar (where an icon is required). This lets the user mentally map the menu entry to the corresponding item on the toolbar. – 17 of 26 Aug 7 at 15:02
  • I'd say #1 is the principal if not only good reason. The goal of any UI should be to help users get from A to B as quickly and painlessly as possible. Standard, recognizable icons aid in that effort, just as real-world signs on handicap parking spots, bathroom signs, etc. translate information quickly and effectively. Adding random icons just for the sake of having icons has the opposite effect - drowning users in a sea of meaninglessness. – Chris Pratt Aug 8 at 16:34
21

I don't think there's an "official" methodology for this, but I've noticed a pattern across a number of programs. Many programs - especially IDEs - have a number of commands that can be accessed both through drop-down menus and through toolbar buttons. An icon is required for a toolbar button, and the same icon is usually used for that command in the drop-down menu. This gives the user a common visual reference and makes it easier to understand that the toolbar button and menu entry represent the same thing.

2

I would recommend only adding icons when they provide value, ie differentiating between javascript and HTML files. Looking at your screenshot, you would need to create a tonne of similar-looking icons for open, settings and exports alone. What value would that have for the user? I would argue it would confuse things.

2

Simple answer, "Yes".

They chose to provide icons to ubiquitous actions and where applicable they used icons which can be pulled from existing use such as file icons.

There is no need to iconify actions which have esoteric meanings and would differ between one app and another.

Check out Oracle's SQL Developer for more examples on not iconifying everything:

SQL Developer toolbar -> view icons

1

Each design/development team will have their own criteria for doing this, and hopefully it is aligned to some kind of design system or convention that they have established for their product/service.

Briefly speaking, there might be a number of reasons and it is most likely to be a combination of them, some are design related while others are probably more subjective.

Some design related issues that might have been considered:

  • consistency of iconography that can be created to existing style or convention
  • difficulty of creating the symbol/icon for the feature/label
  • number of items that need to be catered for (now and in the future)
  • existing conventions (internal) for using iconography

Some subjective issues that might have been considered:

  • importance of the actual item/label (whether it needs to be emphasized or differentiated in some way)
  • whether there are good existing conventions (e.g. print, copy) that should be applied

It is worth noting that sometimes you don't necessarily need very good icons for a label, because many people actually also use it as a reference point of where the actual item is located in a list of items, which seems to justify the use of icons that don't resemble the item it is supposed to represent.

0

Icons are effective inversely proportional to their frequency.

If everything has both text and icons, the interface becomes crowded. I would only add icons to common actions.

IMHO, both your submenu and the menu in the SQL Developer example are too crowded.

0

Icons have to mean something somewhere. for example:

enter image description here

The save icon above will be seen on the toolbar without the text and users could use it to map it to the action of saving.

Another example:

enter image description here

Typescript files have the icon in your finder or file system to map it to type script.

The ones like:

  • Export to BOM
  • Line Separator
  • Diagram

The general practice is to always remember that your user does not know what your icon means. So unless the icon is going to be used again, without the text, there is no need to iconize.

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.