User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
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 '14 at 20:09
Is this on Mobile? Or desktop? – Harshal Bhave May 28 '15 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 '15 at 11:51
@merqri this is for a web app – omgdork Jun 2 '15 at 1:41

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.

share|improve this answer
it's spelled "accordion" – Aprillion May 28 '15 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.

share|improve this answer

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

share|improve this answer

Your Answer


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.