Simplify And Improve UX For Targeting Conditions

[fpcorso]

We've talked about different ways to improve the UI/UX for the targeting conditions a few times so I wanted to have a central issue for continued discussion.

Some points to think about:

1. A lot of people get confused with the ! or aren't even aware it is an option
2. The And/Or continuously gets confused with as well
3. Could less used conditions be more discoverable in some way?

Also, here is a relevant thought on "audiences": https://github.com/PopupMaker/Popup-Maker/issues/573

[lkraav]

I'd recommend taking a look at AutomateWoo's UI elements for configuration triggers, rules (filters), actions. Possibly avoid reinventing wheels.

Definitely among best in class UX there, incl. configuring multi-level AND/OR combinations for filters.

Ideally, WP would provide such UI element primitives in core, so rising tide could float everyone's UX boat, but it is what it is for now. Maybe we'll get there one day when web components catch on further.

Perhaps @danielbitzer can chime in whether AW UI code is built with re-usability in mind.

Screenshot:

[danielbitzer]

@danielbitzer can chime in whether AW UI code is built with re-usability in mind.

On the PHP side a lot of this is reusable but the frontend will eventually be migrated to React and use the @woocommerce/components library so I would avoid using it in it's current form.

[danieliser]

@lkraav - To be fair that is pretty much where we started ;p.

We had near identical AND/OR condition builder as your screenshot several years back, before the current one.

The issue we are seeing constantly is that people regularly confuse OR with AND, especially when used along with both Is & Is Not type conditions.

I haven't seen an interface that really solves this with wall of forms.

What we are thinking currently is that it should read more like a paragraph with each condition being a sentence. Each field would be a _____ spot in the sentence.

This way it reads exactly how its applied.

That said we are still in early planning for this change, so we shall see. Lot of room for improvement though.

[danieliser]

@danielbitzer - Same, our forms are done using this library of mine: https://github.com/danieliser/WP-JS-Form-Sample-Plugin

It is being ported to React later this year as well.

That said we process conditions in both PHP & JavaScript due to the nature of caching and that many of our targeting must work for logged out users on cache heavy servers.

Would love to compare notes though, especially on available targeting rules.

[danielbitzer]

The issue we are seeing constantly is that people regularly confuse OR with AND

@danieliser we are having the same issue sadly. However, we also see plenty of instances where customers get it and really need the flexibility AW offers in this area.

What we are thinking currently is that it should read more like a paragraph with each condition being a sentence.

I like this approach. Hope it works for you!

Would love to compare notes though, especially on available targeting rules.

Sounds good. I remember we were chatting via email a year ago (I think it was mid Automattic acquisition) and I never got back to you. Sorry about that.