Suggestion for list selection and populating related lists dynamically

Question

There's a list of items that you can select. When you select any of the items except Ignore, another list populates depending on the item that you selected. When you select an item from the newly populated list, another list is populated.

What's the best way to present this? Having empty lists from the start looks a bit odd to me; selecting Ignore wouldn't populate the next list so it and the other list would stay empty. An idea is to make it as flyout menus but is that all right?

By the way, this is for a web app.

Answer 1

There are many different approaches to progressive disclosure.

1. You could display the list at full width, then when user clicks, list 1 contracts and list 2 is revealed.
2. As a nested List items (Accordion style)
3. Full width lists, but having it slide across similar to Apple's Finder experience in "Columns" view.

Note: In Apple Finder solution, they display the info for that option in the space if there are no child options to show.

Answer 2

Assuming that you have already analyzed how to presentd the information and those lists are the right way, there's only the presentation part left, which is what you are asking.

If you present empty spaces to the user, that generates expectation and doubts; the user may be wondering if something is missing of if he has to interact with that space somehow, so the best way is to only show what is relevant.

If you have a list, let say the item list, already visible to the user, and the sublist is not populated until the user acts on the item list, then don't show it, neither its borders, shadow or anything that tells the user that there will be something there.

On the other hand, if you can have other options, for instance select controls on the page, you can show all of them on the page, and use the right wording and design to show the user which one he has to use first. The advantage of this design, is that the user knows from the beginning how many steps the process will take. Of course you have to do the right programming to capture wrong interactions with the list.

Answer 3

While your illustration shows three columns, you don't specify anywhere else that exactly three columns are required - so I'm going to assume that you have some kind of arbitrary hierarchy.

The Macintosh OS X Finder uses a similar style for browsing the folder structure on a volume:

Emulating this approach might work well for other situations - say for a hierarchy of categories instead of folders. Blank columns don't seem to be an issue.

(Note: I've never used this version, but have used its NeXT OS forebear, a very long time ago.)