I have a text editor with several tools on a page. and I want to add cascading dropdowns to the tool list. For example, I have two comboboxes:
1st is filter with values:

All   -selected by default  
Etc...  (Up to 10 items usually)

So, on change of items in the first combobox the second combobox will be filtered.
When user selects an item from the second textbox, it will be insterted in the textarea.
Here's how it looks like right now:

enter image description here
The reason I don't like it, because I those comboboxes act different, but look the same. I'm not sure how to make them appear cascading.

  • What purpose does the first filter provide? Can't you always list all the items, but group them under OPTGROUPs (assuming the list is short enough that the current "All" filter makes sense)? – Kit Grose Dec 14 '12 at 3:14
  • @KitGrose, no, list contains ~200 items when All is selected , but dropdown has a search capability, so user can type-in text to search an item. – user1792936 Dec 14 '12 at 7:14

Hide the second until the user has made a selection on the first.

Initially, you have


download bmml source – Wireframes created with Balsamiq Mockups

...and then after the user makes a selection, you have


download bmml source

  • The thing is, I want to show all by default. It's more of an optional filter. – user1792936 Dec 13 '12 at 22:54
  • @user1792936 It would take the user half-a-second to select the "All" option and then have the second box appear saying "(select any item)." If the list of possible items is very long, then using All as a default will probably be quite frustrating to the user. – Graham Herrli Dec 13 '12 at 23:01
  • Yeah, you're probably right. Let's see if we have other solutions, but yours make sense. – user1792936 Dec 14 '12 at 1:18

Indicate the hierarchical nature of the comboboxes by inserting a symbol between the two:


download bmml source – Wireframes created with Balsamiq Mockups

This will join the two separate controls into a single concept in the user's mind, which you pretty much need to do because all the other controls in your edit bar all act independently of each other. You want your users to mentally model all the controls as follows, where the last long control contains both comboboxes.


download bmml source

  • Hm, interesting. Never seen this before. Do you know any examples where I can see this live? – user1792936 Dec 14 '12 at 1:18
  • Nope, no specific examples. Use of an arrow symbol to denote continuation or dependency isn't that unusual though. – Erics Dec 14 '12 at 4:49

Personally, I think that you may try to avoid this behaviour at all.

Just keep the second combo (which has 200 items) and give user an ability to search quickly and to see recently used items.

It may look something like this:


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.