User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
We are mocking out new notifications and requests panels for our web app and I wanted to see if anyone had any ideas on a better way to represent this concept of a dropdown within a dropdown.
I don't necessarily think this looks bad, but I feel like there is a better way to handle this, however, I think of one. The list may either be a button of only 1 option is available for theoretically as long as a user would have accounts. Our largest group currently would have about 8 options.
Personally, I find this menu in a menu solution irritating. It comes with some inherent missed-click risk that could lead to accidental menu abandonment. It’s something worth testing, but I'd have another option to run it against.
I hate to critique other answers in an answer but ...
Drop in panel to modal pop up is far worse. You’re making the user jump around too much.
For scenarios like this, I’ve had good luck with sliding panels. It keeps the user’s focus in a tidy little space and adds a friendly animation into what might otherwise be a ho hum experience.
For those who haven’t used sliding panels, allow me to illustrate:
UPDATE
It just occurred to me that I left out one small but important flow detail. When the user makes their selection in the second panel, slide them back to the first and change the thing they took action on to confirm. It’s also nice to provide a mechanism to undo or configure properties of that action. I'll add to the image if I get a chance today.
You could have a wider box that looked like this:
--------------------------------
| Lvl 1 Item 1 | Lvl 2 Item 1 |
| Lvl 1 Item 2 | Lvl 2 Item 2 |
| Lvl 1 Item 3 | Lvl 2 Item 3 |
| Lvl 1 Item 4 | Lvl 2 Item 4 |
| Lvl 1 Item 5 | Lvl 2 Item 5 |
| Lvl 1 Item 6 | Lvl 2 Item 6 |
| Lvl 1 Item 7 | |
--------------------------------
You could optionally hide the lower level of the box until a higher level item was 'selected' or hovered over.
Another option is using nested accordions:
I would do it with a pop up. Something like this. But there should be made some additional changes on the "existing team" or "own team". I would use a step sign up for this.
Dropdown -> "Join team" -> POP UP opens -> Select existing team or own team -> IF existing team -> show list of teams available, including sign up button -> ELSE -> own team, input for naming and a submit button.
Simple example of popup without the step sequence:
