How to better use icon along with text label in a multilingual ui design?

Question

It may be a long-existing and already-asked-too-many-times question.

Our software has many features and they all presented with icons only, it's good for multilingual case because we don't need to overload the ui with unpredictable translation. But as the features are too professional, a single icon could not always convey the right meaning, so I think text label is kinda necessary.

Here's the problem, as there're so many features(all need to be displayed in main window), and the space is limited, icons surely can save a lot of space, but we also want to convey the meaning more directly and precisely. The software will also run in touch device so hovering the icon and showing tooltips is not enough.

To be more imaginable, suppose we need to add text labels for those tools in figma 😐. Any advice would be appreciated :D

Answer 1

This is another one of those questions where you need to solve a very difficult problem in a very simple way (e.g. how do I fit a very big table into a very small space?).

We know that icons and symbols can have very different meaning in different cultural and linguistic context (same with colours), so you are always going to run into some trouble, not only that, it is not always clear what the icons mean if you have very technical features, nor is it easy to design a consistent visual language.

So you are right in that a text label is required, but now you also have to think about the languages that are supported and how the length of the text and orientation will affect the layout.

I would start with a plan or strategy that looks at the internationalisation or localisation of the content for your application as a whole. This will allow you to develop a design language that focuses on a specific language, and adapt it to other locales, or to design a language agnostic interface that gives you flexibility to extend or change as required.

Other than that, you might also look at trying to reduce the number of icons to minimize the impact of the complexity and added design effort required to maintain a complex icon library, and instead focus on consistency of the vocabulary used in the application.

Answer 2

and welcome to the site! I like to complement Michael's more strategic comment with a practical answer, from day-to-day design. (But be aware that I'm working with business software, which has lots of objects and functions compared to the typical mobile app.)

As Michael already points out, there's the question of learnability of icons (esp. across cultures). So what I try to stick to is very simple:

• "infrastructure" functions have icons
• everything else has text-only buttons

"Infrastructure" functions are about layout (hide, sort, expand, collapse, more, less, settings, options, ...) and generic functions (print, export, ...). Since these functions appear almost on every screen, there's a benefit in using icons (small space for non-critical functions).

That means all "semantic" functions (create, edit, delete, status, ...) will use text.

And there are no icon+text buttons, simply because that does not help the user to explain the icon, because the icon will never appear alone.

As no rule comes without exceptions, these are the arguments which frequently come up:

• Create, delete, etc. appear on most screens. Why not use icons? My argument is that they appear together with semantic functions which require a text and using icons will result in a visual mix.

• Sometimes it's beneficial to have remove, edit, etc. in a table row (a tiny space), and that's where I sometimes use icons.