5

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.

enter image description here

  • 1
    Can we assume you won't be servicing mobile/touch clients? – DarrylGodden Apr 28 '15 at 16:28
  • 1
    This is a responsive application with about 40%+ of traffic coming from mobile, so yeah it has to be. What I was thinking with mobile / smaller screens is setting it up so that when you pull down the notifications or requests panel the main content div will hide and in its place a full screen notification or request panel will be there. Almost like a "page" to itself. – nduvieilh Apr 29 '15 at 15:35
10

Meh

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.

Yuck

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.

Nice

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:

enter image description here

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.

| improve this answer | |
  • 1
    And how does user comes back to previous slide? – Prashant Dubey Apr 29 '15 at 8:35
  • 1
    @pzv My apologies ... you include either a 'cancel' or back link, depending on the flow. – plainclothes Apr 29 '15 at 16:27
  • @pzv image updated accordingly. – plainclothes Apr 29 '15 at 16:35
0

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:

https://jqueryui.com/accordion/

| improve this answer | |
0

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:

Simple example of popup without the step sequence

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.