1

Here is the case:

when [Hierarchy] value is 'A', a group of [a] selections displays in filter area. When user switch [Hierarchy] to ‘B’, all [a] selections are replaced by [b] selections.

Solution One below might lead to an inconsistent display of selections

Solution Two puts these two groups of selections in toggle dropdown, and requires two more clicks when user wants to come back and make selection changes at any level.

Need a second person's opinion here. Which solution is better? Are there any other suggestions?
Great Thanks.

  • See also ux.stackexchange.com/q/74920/13161 – Adriano Repetti Jan 14 '16 at 15:48
  • 1
    What does the user do after they have the appropriate dropdown set? Are they configuring once? Finding a set of objects (i.e. filtering)? It will help figure out the right way to build this interface... – Chris Butler Jan 14 '16 at 20:55
1

It seems really odd to have a hierarchy all on one line - it makes it look like the sub-items (a1, a2, b1, b2, etc) are on the same level as the category (A or B).

I would use a tree navigation, like this:

Closed state:

  • A
  • B

Opened out version:

  • A
    • a1
      • a1a
      • a1b
      • a1c
      • a1d
    • a2
      • a2a
      • a2b
      • a2c
      • a2d
    • a3
      • a3a
      • a3b
      • a3c
      • a3d
  • B
    • b1
      • b1a
      • b1b
      • b1c
      • b1d
    • b2
      • b2a
      • b2b
      • b2c
      • b2d
    • b3
      • b3a
      • b3b
      • b3c
      • b3d

items in the tree can have checkboxes or radio buttons next to them, whichever is appropriate

  • Thanks for quick answer. Agree that 'It seems really odd to have a hierarchy all on one line ', but the context puts limit on UI pattern we are using. – lin qiteng Jan 15 '16 at 7:46
0

An alternative is a menu with different stages :

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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.