Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
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
add comment

3 Answers 3

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

share|improve this answer
    
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. –  3nafish 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
add comment

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

share|improve this answer
    
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
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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