1

I have found something similar to my UI design here: Intuitive interface for Composing Boolean Logic?

enter image description here The problem I am having is I want to have a lot of functionality inline. In this example, the user can add new groups and have children or items within those groups. The bottom child group you can see two buttons above "Group Type*". The left bottom is to select an existing group and the right button is to make it a new group with a saved name for reuse. If the user does not choose either option, then the group will only exist within the context of the parent group. The lock button as you can see is when a user chooses an existing group. The user has to manually "unlock" the group to acknowledge that the group will be changed everywhere it is referenced.

The problem is that all of this functionality is very overloaded and quite messy. Just the line with the group name can have so many different possibilities. This is a very hard problem to solve I have found out, but I was wondering if anyone has any suggestions. I thought about making editing of groups open in a new "tab" so the user can edit the group in isolation. I don't know if this will really solve the problem though.

I am open to any and all feedback. Let me know if you have questions, thank you.

Improve this question

2 Answers 2

Reset to default
2

I once built a builder for SQL queries. You had the hierarchy on the left side and a detailed view on the right side. This allowed for the rules/conditions to be more complex.

query builder interface

Improve this answer
2

We have a similar situation in our e-commerce app for the product's categories.

enter image description here

  • At the top there's a button to Add a New Item to root

  • If an item contains subitems, there is an expand-collapse icon on the left (the little triangle)

  • When hovering an item or sub-item a right bar appear with these options:

    • Plus icon = Add New Sub-item
    • Zoom icon = Item Info
    • Pencil icon = Edit Item
    • Trash icon = Delete Item
    • Frame icon = Edit Item content

All these icons open a new window with the options to add or modify except the Trash Icon that open an Alert Modal.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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