Label the UI icons so people can recognize them

Product Requests and Ideas
#1

I’m getting kind of sick of explaining what the icons in the Jitsi Meet interface do for people who are on the call. Describing things like:

  • The four boxes
  • The single box with a thicker bottom edge
  • The single box with a pointy corner
  • The circle with an i inside it
  • The three dots lined up on top of each other
  • etc.

That’s a lot of words to say in order to teach people to identify buttons in the user interface! Things would be so so much easier if I could just say, “click the view button” or “click the menu button” and then people could read the words on the screen that label which button is for the “view” and which is for the “menu”.

This kind of design practice used to be common sense because it does make things much easier for beginners and all usability studies about it show that it improves user engagement and improves usability.

Also see:

2 Likes
#2

The recent re-design doesn’t really improve usability in this area.
Below is a mockup design that using the current UI toolbar, but adds labels so that people can instantly understand the functions. The space taken up by the toolbar doesn’t change at all, so there is no disadvantage to implementing this, while the advantages will surely result in more users, increased ease-of-use, and less “how do I share my screen?” on-call support requests.

Jitsi_design
Jitsi_design1813×1347 78.7 KB

1 Like
Can I create a link that automatically opens the chat pane?
#3

It used to be common sense when products where dealing with only one public speaking one language. In case you missed it, the whole industrial world is producing products without words on them, only icons.

You have to understand that there are different word lengths in different languages and the size of the toolbar would have to be dynamic to accommodate wildly different sizes. It’s not impossible of course but it’s work and the toolbar’s look would be irregular (ugly) or impossibly large or high (people are already complaining).

In the mean time, icons are not so difficult to understand and if something is not clear, the user has only to hover the mouse over the icon to read a text explaining the button’s function.

#4

In case you missed it, the whole industrial world is not entirely using desktop computers with mice anymore. There are many users with touch screen tablets and smartphones that do not have mouse-hover tool-tips. This makes the button labeling much more important as you can no longer rely on the old mouse-hover tooltip for explanations. With touch-screens, it’s effectively impossible to understand unlabeled icons without activating them and then you’re stuck with users activating things they didn’t mean to.
The multi-language argument doesn’t really hold much weight either as actual languages are much easier to programmatically translate than ambiguous icons are. I can point a translation program’s camera at words and have them translated into other languages instantly. That’s not possible with ambiguous icons. There is no dictionary of icons. Would you rather zero people understand the unintelligible icons, or would you rather a large percentage of users understand them? According to every usability study I’ve seen published in the last 30 years (some of which are linked to in the original post), labeling interactive elements will increase usage and cognitive ease.
Besides, you have to translate the rest of the interface where labels exist anyway. How do you deal with the command labels in the “More actions” menu?
One of the reasons the Zoom.us software is so popular is because its interface is easy to use and the reason it’s easy to use is the navigational elements are labeled in the user’s language.

2000×1096 298 KB

#5

Wait, is it a phone screen that you are showing here ? It’s gigantic, is it an IPhone 15 ?