1

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:

enter image description here

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?

2
  • Run some competitor analysis/benchmarking: Check what other platforms do. Outlook and Gmail at least have something like this to set the rules for automatically dealing with specific emails. You'll probably find similar mechanisms in other email clients too. Jul 23 at 20:33
  • Outlook and Gmail is a good idea. I'll have a look at rules and see how that work.
    – AmanSahota
    Jul 24 at 11:08
3

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:

enter image description here

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".

enter image description here

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!

4
  • I like your solution very much. How would you handle associativity with multiple conditions? "If A AND (B OR C)" means something different than "If (A AND B) OR C". Maybe by indenting?
    – Johannes
    Jul 22 at 16:50
  • @Johannes: Do you expect users to have overly complicated conditions? You could simply just make a statement that AND will take precedence over OR. This would allow "IF (A AND B) OR C" by default, and then the user could do "IF (A AND B) OR (A AND C)". In the second example, yes they have to specific condition A twice, but that would be the trade-off in keeping the UX simpler. If you start grouping it's going to make it more complicated to add and move conditions to different groups.
    – musefan
    Jul 22 at 16:56
  • @Johannes: I have updated my answer with a possible solution for nested groups for you to consider.
    – musefan
    Jul 22 at 17:05
  • I like the idea of "groups"!
    – Johannes
    Jul 24 at 12:04

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.