2

My team and I are working on a re-design for an internal software that people within our customer service use to track shipments in real-time.

I am thinking about a way to efficiently show different states of shipment or any kinds of problems with icons.

I've read some articles about the use of icons in interfaces and that they actually work for sure only for universaly understood metaphors like "home" (house icon), "search" (magnifying glasses) "print" (printer).

Iconic Simplicity. The Vital Role of Icons

Do Icons Need Labels?

But in our case our users are expert users and they work with this software the entire day. But anyway, I think that this should not be an excuse for not trying to make intuitive and as easy as possible to understand icons.

I am now looking for some information or studies about the efficiency of icons in expert systems, where it is hard to find an intuitive metaphor for complex situations.

It is said that when you have to think for more than 15 seconds to come up with an icon, you should not use one at all.

Can icons be helpful in expert software and increase efficiency versus text?

2
  • That expert users are human beings in the first place :-] Why not make the interface easier for them?
    – Shahriar
    Dec 25, 2021 at 11:15
  • And who said "when you have to think for more than 15 seconds to come up with an icon, you should not use one at all."?
    – Shahriar
    Dec 25, 2021 at 11:16

4 Answers 4

5

Yes, icons are helpful, very helpful, in some situations they are necessary.

In your case, where users are professionals, they can easily learn. The best practice would be to show a text next to the icon, if the interface dose not allows it, you can use only icons with tooltips.

Screenshot from CorelDraw showing a complex concept with the tooltip.

enter image description here

3

I’ve observed the trend in user interfaces is toward icons + text, sometimes with a user configurable option to hide either the icon or the text.

Two key pieces of context in your question:

  • “re-design for an internal software”
  • “our users are expert users”

Given that context, starting with text makes a lot of sense. First, it will reduce the cost of iterating your design as you work with internal stakeholders. Second, expert users are likely to require expert commands. It is unlikely icons will exist that are recognizable enough for the specialized terminology that describes those commands.

As you validate user workflows and iterate on the design of your app, it may turn out that adding icons makes sense. One way icons can help is to allow multiple commands to be shown in a compact area. Application toolbars like the one in the FreeCAD Part Design workbench use icons to represent complex concepts in a compact space. They do show a text label on hover. Icons also work well when they are OS-specific icons used in a consistent way across many applications written for that OS.

Here are some screen shots I took showing examples of icons + text. The last example is the sidebar of GitLab, a web application designed to support relatively complicated tasks related to project management, configuration management, change management, and DevOps. Given that complexity and the large user base, including “enterprise customers”, GitLab is a nice benchmark for professional software.

iOS Mail iOS Mail

iOS Photos iOS Photos

iOS WhatsApp iOS WhatsApp

GitLab web app (Safari Mobile) GitLab web app (Safari Mobile)

I’ll try to come back and edit this answer to add authoritative references.

1

There are also other considerations or reasons why you might want to use icons, for example if the text descriptions are very long and you have limited spaces (or lots of buttons), and also icons can be learnt and a visual language for it developed over time. Not only that, icons can be easier to recognize for some people, so that if you introduce more features over time people can still learn where to go for certain features quickly (e.g. if used in a tile/grid design pattern for display).

As with all questions on UXSE, the context is very important and in your case it would appear that there might not be a need to design icons. However, you should always test these assumptions with actual end users as part of the design process. You will probably still find it suitable to design icons for standard functions like Save (which is slowly being phased out in some applications these days), Log-off/Exit, Edit, etc.

Some examples of the use of icons in expert systems would be those seen in engineering or scientific applications, where there are a lot of acronyms or complex chemical formulas and it is much easier to design and organize the interface if you use icons instead of text. Or there might be cases where you are restricted to using certain interface elements due to the length of text (that you can't or don't want to abbreviate/truncate).

1

For "expert" systems, the analogy that I think works best is the car. It is a complex, life-threatening device that takes hours of learning to be operated safely, but that you can eventually drive for hours pretty much without thinking about it.

In my opinion, the situation depends on whether you're talking about controls or displays. A critical aspect of it is also the frequency of expected use.

For controls

A large part of what makes driving a car possible is that it relies on your muscle memory: you don't need to read the label on the switch that turns on the headlights, you just know where it is and turn it on.

The same kind of efficiency can be reached on a computer by allowing keyboard shortcuts, which in my opinion are way faster for expert UIs. Nearly all of the highly proficient experts that I've seen use the same software throughout the day rely heavily on keyboard shortcuts to do their job faster.

Icons can work to increase information density too. What's also important is that they are in reliable locations as well.

Some examples of this that you may be familiar with is Photoshop, Adobe Premiere, or any CAD software — labels are typically scarce in the UIs, which (the field being pretty competitive commercially) show that it's an advantage for expert user bases. But again past a certain point, expert users of these applications tend to switch to keyboard shortcuts.

As an example, below is the Photoshop toolbar — with labels, it would take up about 5x as much screen real estate.

All of this comes at the cost of a longer training curve simply because when you tell someone "use the tool" they may not understand right away what you are referring to. But if your tool needs significant amounts of learning anyway, it doesn't matter as much.

For displays

In the case of displaying information, we can go back to the car analogy and see that it works at least for very simple cases: people know what a red light means without it being labeled. However, you will see a lot more things labeled on the road signs than in your car.

Europe is an exception to this — being a linguistic patchwork, people have decided there to standardize on road signals, so that a "stop sign" or a "no parking" sign are supposed to look the same across the continent (to the endless puzzlement of American tourists). But for computer UX where the UI can be translated to the viewer, this makes no sense.

Back to UX, one thing to consider is that accessibility requirements will typically force you to find a way to write things out for users with visual impairments, or color blindness. Personally I would be more careful about use of icons in displays than in controls.

The role of frequency

The more your users will rely on a control or display, the more familiar it gets and therefore the more appropriate an icon treatment is. Conversely, the less your users will rely on a control, the less familiar it gets and the more important labels are.

As an example, car warning symbols are notoriously bad, i.e. many people can't tell what they mean, even when the symbol represents important, potentially life-saving advice. This is because these icons are hardly ever seen, so people's memory of what they mean (assuming they ever learned it) decays with time.

Icons and other visual treatments are appropriate for things that people need to do with high frequency. "Red light means stop" is a good example: most drivers encounter it every time they drive. It is risky to use icons for things that happen infrequently, because users may just overlook them completely out of a lack of understanding, and it may lead to bad mistakes.

Illustration: photoshop toolbar

Photoshop toolbar

2
  • Car warning symbols may not be self-explanatory, but they still give a good idea of what's wrong with the car by just looking at them. Battery warning, seatbelt reminder, open doors, oil pressure warning and low fuel icons aren't that bad.
    – Shahriar
    Dec 25, 2021 at 11:21
  • @Shahriar I'm not making a subjective judgment when I say that, just looking at stats it's objectively bad. expressandstar.com/news/motors/2018/08/23/…
    – qoba
    Feb 19, 2022 at 18:27

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.