No indicator of effect of clicking navigation buttons

[amyjko]

Describe the bug
When in a video chat room, there are several buttons on the right and left sidebars. However, each one has a different navigation behavior: 1) some show a popup menu, 2) some show a popup window, and 3) some navigate away from the current page entirely. This is problematic because if someone is in a video chat, they can easily and accidentally leave the video chat when trying to multitask.

To Reproduce
Join a video chat with someone in a room, then click on feedback or home. You leave the chat immediately. There are no visual or textual indicators about whether this will happen when clicking on the sidebar buttons.

Expected behavior
There should be a clear indicator, such as an icon in the buttons, that indicates what will happen when the button is pressed.

Desktop (please complete the following information):

• OS: Mac OS 11.5
• Browser: Chrome
• Version 99

[rossng]

This isn't the first time we've heard this, and you're right.

We have plans to start tackling the navigation UX very soon. I don't personally think that an icon is the right solution, though. I'm not aware of any universally-recognised icon for 'takes you to a new page' or 'opens in a modal'. The closest I can think of is the 'external link' icon but that would be even more confusing!

---

On a separate note @amyjko, thanks for submitting a number of thoughtfully-composed issues. We're lucky to have users like you that give us direct and useful feedback.

[amyjko]

I agree that icons aren't ideal, as there are no conventions to lean on. I do think that icons, even new, unconventional ones, can be learned, and are powerful for more experienced users, but this isn't an app that is going to have a lot of power users :) Almost everyone will be a new user, or a returning user that hasn't used it for a year.

Since Clowdr is primarily a mouse-based app now, I think some thoughtfully worded immediately-appearing hover tooltips that elaborate on the short labels would go a long way. For example:

• "Home" -> "Leave this page"
• "Program" -> "Show popup"
• "Socialise" -> "Show popup"
• "Feedback" -> "Leave Clowdr, go to GitHub" (actually, this one should probably just be an external link icon)

An alternative to hover tooltips would just be to place this text in a small font below the primary labels of the buttons. (The padding in the buttons is already relatively large, so there's room for some 6pt text).

Of course, this problem isn't limited to just the navigation buttons on the sides; there are buttons all across the UI that have unexpected navigation effects.

--

Happy to help Ross! This is an important community resource, so I'm committed to contributing.

[EdNutting]

Tooltips were added to the menu items in November.

After 6 months of @lshillman running user tests, the next iteration of this design will use pull-out drawers that:

a) always do the same thing regardless of which button you press
b) open a drawer next to the menu, (instead of the existing modals or navigating you away from the current page).

Additional work has been put into more clearly identifying behaviours of other buttons in the UI and making similar improvements to the UX to eliminate unexpected actions. Where no other improvement has yet been made, buttons that would cause navigation are disabled while connected to a video chat or backstage, to prevent accidental disconnection (until we come up with better solutions).

We believe we are on the right path to fixing all issues identified in this thread.