4

I am designing a window in a desktop app that allows the user to drill down to a specific problem using five cascading dropdowns. The first is general (eg harware or software), the second slightly more specific and related to the selection in the first and so on.

When they have selected something in all five dropdowns, a "Solution" dropdown will be enabled, and will be populated with solutions relevant to the settings of the five problem dropdowns. See the mockup below...

mockup of the cascading dropdowns

That bit isn't a problem. However, I need to work out how to design an admin window for the admin people to maintain the data. They need to be able to add, edit or delete data at any level, and set the appropriate solution for the final dropdown.

Anyone any suggestions as to the best way to do this?

Don't know if it's relevant, but this will be a traditional Windows (as in Microsoft Windows) desktop app.

Thanks

  • You must have thought of something. Can you add some sketches or ideas? What is the problem you are facing? – jazZRo Jun 7 '18 at 20:17
  • @jazzRo The problem I'm facing is that I'm a software dev, not a UI designer, and I have no idea how to design a UI for this task. I'm hoping someone here can give me an idea. – Avrohom Yisroel Jun 7 '18 at 22:23
  • It seems your data is highly hierarchical. Is content in lower hierarchy dropdowns (e.g. level 5) always specific to its upper hierarchy part (e.g. level 4)? Or putting it another way: Is driver re-install (Lvl 5) only appearing under couch clamp (Level 4) or could it also appear under a category "Graphic card issues" (Level 4)? – Nash Jun 8 '18 at 10:24
  • @Nash No, it's hierarchical, so what appears in level 5 depends on what's selected in level 4. That's why I'm struggling with the design. If they were independent, then it would just be five individual lists to maintain. I need the user to be able to add level 5 items to a level 4 item. Hope that clarifies it. Thanks – Avrohom Yisroel Jun 8 '18 at 11:55
2

Something like a treeview could work.

enter image description here

  • I thought of a treeview, but couldn't work out how to handle the solution. Never thought of making it a sixth level! Thanks – Avrohom Yisroel Jun 8 '18 at 13:40
  • 1
    It's a good proposal. I would suggest a slight modification - the solution could be either selected from a list of available solutions or a new solution could be added, in case there are more paths to one solution. The same for each level - either use the available options or add a new one. – Mike Jun 8 '18 at 13:42
  • @Mike Thanks for the comment, but in this case, I don't think we'd need that. There is basically only one path to each solution, and in the few cases where we might have the same solution for different paths, they would just want to add it a second time. Good suggestion for more complex cases though. – Avrohom Yisroel Jun 10 '18 at 13:58
2

A vertical stepper would be a logical thing to use, as the user has to complete a linear, depending progress. A stepper not only makes it clear which step the user is currently at, it also shows shows exactly what is and what will be required to continue.

I found a brilliant, minimalistic vertical stepper example from Material-UI:

enter image description here

  • 1
    Thanks, that's a great piece of design, but not appropriate for this case. Remember that each level in the hierarchy can have multiple options below it, and each level 5 option can have multiple solutions. The stepper looks like a wizard, where you can't do that. Nice piece of design though, and probably very useful elsewhere. – Avrohom Yisroel Jun 10 '18 at 13:56

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.