7

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  
Animals   
Plants   
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.

2
  • 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, 2012 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. Dec 14, 2012 at 7:14

3 Answers 3

2

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

mockup

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.

mockup

download bmml source

3
  • Hm, interesting. Never seen this before. Do you know any examples where I can see this live? Dec 14, 2012 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, 2012 at 4:49
  • This could be further emphasized by making the second combo box display in disabled state (gray colour filter that is), unless you have clicked the first combo box.
    – drabsv
    Feb 27, 2021 at 12:11
1

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

Initially, you have

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

mockup

download bmml source

3
  • The thing is, I want to show all by default. It's more of an optional filter. Dec 13, 2012 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. Dec 13, 2012 at 23:01
  • Yeah, you're probably right. Let's see if we have other solutions, but yours make sense. Dec 14, 2012 at 1:18
1

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:

cascading

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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