jitsi-meet icon indicating copy to clipboard operation
jitsi-meet copied to clipboard

Improve cognitive ease, efficiency, and usability by adding labels to interactive elements

Open adamzea opened this issue 1 year ago • 10 comments

Is your feature request related to a problem you are facing? People don't know what the buttons at the bottom do because they aren't labeled in any discernable language. Literally every video conference meeting has some amount of wasted time from people asking "How do I share my screen?" because the navigation buttons are essentially unintelligible "mystery meat" icons that normal people can't understand. The issue persists for many even after being told a lengthy description of the button icon as they don't spend cognitive energy remembering these things between sessions. They DO remember how to read their native language between sessions though. Also see: https://community.jitsi.org/t/label-the-ui-icons-so-people-can-recognize-them/31241 Basically, all usability studies done on the subject in the past 30 years or so show that labeled interactive elements improve cognitive ease, engagement, efficiency, and usability significantly.

Describe the solution you'd like Add labels to the buttons by default so people can understand them instantly without having to ask other meeting attendees what they mean or where certain features are located. Perhaps a hidden option in the settings can be added for removing the labels for people that really want the current less-usable design. Image of Jitsi UI with labels

Describe alternatives you've considered

  • Wasting an extra few minutes during every meeting manually describing the icons at the bottom and translating what they do for the meeting attendees when requested (every time).
  • Use a competing product that is better designed for usability such as Zoom which does show labels for its interactive elements (this is one of the reasons why Zoom has the majority 57% market share): Zoom video call screenshot
  • Adding custom CSS to enable labels on the toolbar:

`

.toolbox-button:after { content: attr(aria-label); font-size: 0.7rem; line-height: 0.8rem; }

.toolbox-icon { width: 100%; }

.welcome-page-settings .toolbox-button { display: flex;}

.reactions-row .toolbox-button { width: 30%; } .reactions-row .toolbox-icon span.emoji { width: 5rem; } .reactions-row .toolbox-icon { width: 5rem; } `

adamzea avatar Jan 10 '24 18:01 adamzea

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] avatar Mar 13 '24 01:03 github-actions[bot]

If people actually don't want the user interface to be easier to use, perhaps the labels can be hidden with a preference in the settings, but they should definitely be visible by default so that new users will have an improved user experience.

adamzea avatar Mar 13 '24 15:03 adamzea

Thanks for the thought you put in this.

It may seem like a small change, but we have many customers now and we need to be cautious specially with UI/UX changes.

saghul avatar Mar 13 '24 15:03 saghul

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] avatar May 13 '24 01:05 github-actions[bot]

So far on my server it's been a HUGE improvement in user experience. People no longer ask how to share their screens every day because they can see the button that has the words "start sharing your screen" on it. They no longer have problems leaving the meeting because they can see the button with the words "leave the meeting" on it. They no longer have trouble muting or unmuting themselves because they can see the button with the word "mute" on it. It's a massive and obvious improvement to the usability. I hope y'all decide to test it at some point. image

adamzea avatar May 13 '24 14:05 adamzea

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

github-actions[bot] avatar Jul 17 '24 01:07 github-actions[bot]

Don't close as stale, robot. That CSS code should also work for whatever language the user chooses as well, but I'm not sure how good it will look.

adamzea avatar Jul 23 '24 22:07 adamzea