I'm trying to come up with a solution for the problem that is the ability to select multiple preferences with upto 3 layers deep.

The primary layer would affect the options shown for layer2, and layer 2 would affect what's shown for layer 3.

Layer1 would have upto 6 choices max, layer 2 upto 24, layer 3 upto 10.

Options I've been thinking of:

  • accordion tree with checkboxes (could this be confusing with such a long lists and having up to 3 layers)

  • single drop down, which would build upto 2 more drop downs depending onchoices made. This would have add more button below allowing user to add more preferences. (Downside is if the user requires multiple items from one area it could become tiresome clicking add more over and over again)

Can anyone help on anymore ideas for this?


  • 2
    Could you share the reason for a three-layered model? It may be that the problem you need to solve is there rather than the apparently complex three-layered solution you're proposing. – Andrew Martin May 3 '16 at 12:50
  • With "LayerX .. upto Y choices max" do you mean a) there are maximum 6 options, and user may only select one or b) there are a maximum of many more options, and user may only (multi)select 6 or c) there are a maximum of 6 options, and user may select multiple? – wintvelt Jul 28 '17 at 11:00

aaroncoates would be the simplest and straight forward approach. If you need more options and actions on sub sections then it would be easy for users to present it in a normal form and dynamically populate the data. Any changes made on the top tier would reset its sub section. Another point need to consider, the response from server if its is too slow then would give a different experience. You can also mimic a table like on sub-sections that would make more sense if the idea is to run some form of analysis rather than entry form.

enter image description here


Without seeing/knowing what the content is it's hard to make a suggestion, but on a previous project I've worked on with a similar requirement we came up with a multi column select process.

So column A would have Cars, Vans, Trucks etc. Then a click on Cars reveals/populates column B with Sports, Convertibles, Hatchback, etc. Then a click on Sports reveals the third column with a list of items to select from.

There are a few advantages to this approach:

  1. The section is being made from left -> right so avoids page scrolling if the list is long (fix the hight and add scrolls if required)
  2. There is no hit areas to have keep the cursor on to extend all the filters
  3. You can distinguish between filters and sections by using icons for the first two layers i.e.
    "Cars >" and a tick box ultimitly for the final selections
  • Thanks for this, sounds like a potential solution. I would also need to consider are that there would have to be tick boxes for each item in cols a b c, maybe a (tickbox | title | and then a customise button to open up cols B & C. I would have to consider if this is clear or not to the user. – John Bailey Mar 4 '16 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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