Multiple drop-down lists based on conditions

Question

I am currently designing an email configuration tool which has a set of drop downs. They're all based on conditions, so every drop-down list triggers the next one and so on.

Below is a rough wireframe of how it will function:

I am trying to figure out the best way to display this. At the moment, I'm thinking of the following:

1. Lay this out in a row, left-aligned
2. Create a multi-step form instead

Does anyone have any better suggestions?

Answer 1

Split the configuration into two parts: Conditions and Actions.

Each condition should be on a dedicated line (row). Provide the user buttons (or links) to be able to add additional conditions and remove existing ones.

Subsequent rows (after the first) should give the user the option for AND/OR, and depending on your requirements, you probably want to prevent the first condition from being removed.

Something like this:

If required, you could do similar logic for the "actions" and allow the user to add multiple actions.

---

Handling condition groups

If you want to provide a more in-depth design that supports grouping conditions, then you could do something like this where the user can add either a "condition" or a "group condition".

As you can see, it starts to get complicated quite quickly, so you will need to decide if it's worth the extra complexity or not.

In this example, you definitely want the user to be able to remove the first condition, because they may want to start with a "condition group" straight away.

And if you really wanted to go crazy, you could allow them add groups within groups!