How to visualise nested AND / OR groups?

Question

I'm wondering if anyone here can shed some light on working with visualising logic for beginning users.

I am struggling with finding a proper way to display logic such as:

"Item name #1 AND (Item name #2 OR (Item name #3 AND Item name #4))".

It's group within a group. My solution becomes a very literal horizontal representation and becomes very disorienting, while I'm looking for a way to display this sequence more vertically so it fits in the application window better. The problem is that it can contain more than 10 items if the user wants to target a very specific group.

The aim with the application is that it filters users down into a target group for further marketing use. It will be used by people who are not tech-savvy. Thoughts?

Rough sketch: https://i.stack.imgur.com/amhKg.jpg

Do you have a rough mock of what you have so far? – Mike M Aug 15 '17 at 14:26 — Mike M, Aug 15 '17 at 14:26
I have added a sketch of what I'm trying to achieve. – Wendy Wojenka Aug 15 '17 at 16:01 — Wendy Wojenka, Aug 15 '17 at 16:01

Mike M · Accepted Answer · 2017-08-15T15:15:54.663

Google Data Studio has a filter builder which uses AND / OR. It sounds like you need a display for this.

Google does it by tethering the OR group with an AND that connects them with a line. (It does take a lot of space though):

If you have just simple values, and you only need to display, you can squeeze them together to save space (you could probably get pretty small and still be legible):

If you need interactivity on the users part, you can have them add another AND group similar to the filter builder from Data Studio.

Will users be building their own filters, or is this just for display purposes? If they need to change the order, you could allow some drag handles to move an OR group up and down the chain.

I suppose this is indeed the closest to what I'm trying to achieve. Thanks for the input :) — Wendy Wojenka, Aug 16 '17 at 08:09

score -1 · Answer 2 · answered Aug 15 '17 at 14:32

-1

Are you asking for a vertical embedding UX for non-techies? Would the traditional Outlining methodology work for you? Use indents, letters and numbers.

Or if you need a better horizontal system with parens, use colors.

answered Aug 15 '17 at 14:32

jhurley

1,257
8
7

How to visualise nested AND / OR groups?

2 Answers2