Dropdown variable picker with sibling and child elements

Question

We are trying to make a dropdown variable picker experience more user-friendly. In the current state, here's how it works.

The user sees a Parent database entity that is populated based on a previous step in a wizard. The user can then select Sibling entities by clicking on the target icon in their row, or children of the Parent by scrolling down the list (children are listed below siblings).

The user can also select nieces/nephews by clicking on the sibling names (or arrows) and selecting their children.

Two obvious UX problems we're seeing are that 1) users don't readily recognize the target icon as meaning "select this entity", even with a tooltip, and 2) the child entities are often getting buried under long lists of siblings. But we're also making the user have to remember the names of child items if they want to use search.

We are looking to keep a pattern that doesn't expose multiple separate dropdown menus through progressive disclosure (if this parent entity, show these children). Are there any good alternatives to explore?

Answer 1

Regarding the first problem that "users don't readily recognize the target icon as meaning "select this entity"...", I think you can get rid of the target icon at all and change the selection approach: let users select sibling by clicking on the sibling name and nieces/nephews by clicking on the arrow and selecting their children. This approach is used in file trees, for example, in Windows:

The second problem you mentioned is the child entities buried under long lists of siblings. If you mean the situation when the sibling is near the bottom of the list's viewport and after expanding, a user has to scroll to see the sibling's children, then you should use autoscroll and move the expanded sibling on the top.

Regarding "making the user have to remember the names of child items if they want to use search". If you have an only text field for search, here are the ways to make search more flexible:

• substring search - don't force a user to type (and remember) the whole name of the entity
• autocomplete - show a user the suggestions as Google does it in its search field
• regular expressions - advanced mode for technical user only

Answer 2

I would solve this structuring more the information, using more space between the parents and, less for the children.

Include a little transition so the user will know how its appearing each element and, auto scroll when you select for example "Parent 4".

Spacing: When you use 30px between Parent 1 and Parent 2, use 15px for Parent 1, Children 1, the user will know perfectly where they are.

Transition & Auto Scroll: Image the situation you tap on Parent 5 in the last instance of the dropdown, the system will autoscroll, putting Parent 5 in the top of the dropdown and after that, it will use a transition (like 0.5s/0.7s) to deploy the Childrens.

You also can add a little bleed to the Childrens for better clarity.

I attach two screenshots of one recent project, where I use almost the exact model.