Best UI/UX For Several Levels Deep Selection

Question

Disclaimer - I am a backend developer who has to sometimes do frontend development.

Our web application has entities. Entities correspond to database tables. Entities have fields. Fields correspond to columns in the database table. Entities are related to each other via foreign key fields. So, entities can have a belongs-to and has-many relationships with each other.

I have to implement a screen which will allow selecting fields. Selection process will start from an entity, let's call it primary entity. The user can select fields from the primary entity or its related entities (belongs-to as well as has-many). They can select fields from entities related to those related entities and so on.

My first stab at it:

The screen would be divided horizontally. Bottom section will be hold the selected fields. Top portion will initially show primary entity, its fields and its relationships:

The user can drag and drop fields from entity A into the bottom portion. If they want to select fields from Entity B which is related to Entity A via Field Y, they would click on the 'Belongs to Entity B via Field Y' link. This will cause the top portion of the screen to be re-rendered like below (via ajax):

I may add logic to not show the "Has Entity A's via Entity A's Field Y"on the second screen. The Back button will take them back to screen 1.

How would you implement UI for such a requirement? Note, that two entities can have multiple relationships (via different fields). Entities could be related to themselves via a chain of relationships.

Answer 1

Without all the details and user info this is hard. I do not envy you.

Here's some general thoughts that may help iterate through some more ideas.

Try swiching layout to left side bar with controls and the right area the drop area. That way the user has less distance to cover when dragging.

This is where it gets complicated as new additional controls will appear based on their selection.

Ideally if they switch entities they would still be dragging from the same area as before.

This is where my understanding drops significantly and your problem gets harder. But generally, you want to comnect the new relationship with the users action. From your mock up, it seems that selecting a field triggers the relationship, but the field that is the real relationship may not be the one they dragged. If the related field will always be what's in the field box control or always what's in the drop box, then you can hide/show buttons on/near a field based on relationships found. Choose near whereever their mouse/field in question is located.

If not, well you can't really do that for consistency, etc.

Is the main goal to select fields or explore relationships?

If relationships, lose the drag and drop and sub with checkboxes. Visually group the first set with A and as more relationships or entity field selection is available you can the just show the field options for the new entity. You'll have to think about where it adds especially if there's a lot of entities and fields possible. If it's too far down they might not see. Then the right side has more room to explain the relationships.

Finally good luck and definitely find some users to test or at least get feedback.

General questions and advice

• Why are they doing this? What are they really trying to do.

• Lose any info absolutely necessary. Example, does the user care about the relationship or really just wants more fields to select from? Or do they not care about the entity just fields and their relationships?

• Match labels, text, interaction to user not the system. How would this be done physically?