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.

enter image description here

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.

  • everybody knows how to use sub-menus, so why is that not suitable for your design and you need 3 separate list please?
    – Aprillion
    Nov 30, 2014 at 20:09
  • Is this on Mobile? Or desktop?
    – Harshal
    May 28, 2015 at 10:16
  • I became to like Cascading lists / Miller columns in the intervening months... you can always have (no options available) displayed instead of just whitespace in an empty list..
    – Aprillion
    May 28, 2015 at 11:51
  • @merqri this is for a web app
    – dork
    Jun 2, 2015 at 1:41

3 Answers 3


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.

  • it's spelled "accordion"
    – Aprillion
    May 28, 2015 at 11:53

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.


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:

File Browser

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.)

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.