Unstable - The Options menu has become too long and confusing

[pcenov]

Observed behavior

After interacting for some time with the new Options menu I have noticed that I am spending considerable amount of time scrolling up and down and getting confused by the position of the menu items.

I am also observing a double scroll-bar in a normal 15.6 inch laptop.

Expected behavior

1. Consider removing some options
2. Consider reducing the space between the menu items
3. Consider reorganizing the menu items in logical groups and adding an icon in front of each menu item to help visually identifying the desired item

Steps to reproduce the issue

1. Go to https://unstable.studio.learningequality.org/en/accounts/#/ and sign in
2. Open a channel with folders and all of the supported resources
3. Click the Options menu for an item

Additional information

long.menu.mp4

Console logs

no errors observed in the console

Usage Details

• OS: Windows 10, Ubuntu
• Browser: Chrome, Firefox
• URL: https://unstable.studio.learningequality.org/
• Caused by: Bulk Edit Release #4635

[pcenov]

@radinamatic

[akolson]

Tagging @jtamiace for thoughts on this. cc @marcellamaki

[AlexVelezLl]

Just fyi. The menu items are a little less high using KDropdownMenu #4485 (see the screencast), although I don't think that would be enough.

[jtamiace]

The menu is indeed quite long. I explored a few different directions and with help from @tomiwaoLE landed on the following recommendation - a nested menu with icons for all edit actions. If this is still too long, we can experiment with reducing space in between the actions.

Following is just notes for the future, and not relevant for immediate fixes:

This is something that we can track in the Google Tag Manager / Google Analytics, to see over time how and whether people are using these features, which can be a data-driven way to help us decide which options we should or shouldn't include - something I don't have insight on currently.

A later improvement for mobile responsiveness can be to use of a bottom-fixed menu to handle this long menu better. It's proving to be useful across many different use cases lately (which is making me wonder if this would be worth considering as a KDS component?). An example from a different feature, which can easily have a back arrow navigation:

[radinamatic]

I'm loving the suggestions here but have a couple of comments:

• If we go with the Edit > (option) route, that will mean changes in the user strings for the shortened labels. Not a problem as we have them all (a part from Title and description and All details), but still a change from what we discussed during the UX writing review. cc @marcellamaki
• Nested menu options need to be coded properly for the keyboard navigation, please remember to factor that into the dev time and effort.
• I believe the option Tags is out of place, we do not support editing tags from the new menu at this time.