Experiment: Improving actions UX?

[paolodamico]

Changes

This PR introduces an experiment (A/B test) to attempt to address #1755. Almost every change in this PR (except for a few tangential adjustments are behind a feature flag). The following specific changes are introduced:

Actions page

• Add a more concise description of what actions are.
• Add details (with graphics) on the key benefits of actions.
• Add a more useful empty state for when user has not created an action.
• Stop creating default Pageviews action that may be a bit confusing.
• Minor styling adjustments.
  
• EDIT: Fixes a bug that caused any filters on actions to apply to all match groups.
• EDIT: Fixes that whenever trying to remove one action group, all action groups were removed.
• EDIT: Fixes remove button not showing up for all match groups.

Insights

• Improve UI of actions, events & filters selection, particularly adding clarity to how a filter relates to a specific action/event.

• Added a prompt to use actions when selecting raw events, again communicating a key benefit of actions.

• Improved UI of action/events selector to better distinguish actions and events (language, changed active color to make it more clear what the user is currently viewing, and added icon to further assist in this distinction).

Other

• Renamed plain events to "Raw events" to better communicate the impact and purpose of actions.
• Removed live actions page.
• Defaults to showing Actions when selecting the Events tab from the sidebar.

Checklist

• N/A. All querysets/queries filter by Team (if this PR affects any querysets/queries)
• N/A. Backend tests (if this PR affects the backend)
• Cypress E2E tests (if this PR affects the front and/or backend)

We may need to sort out #1840 as this PR client-side PostHog analytics (without pageviews or autocapture) to support feature flags on development.

[mariusandra]

Loving the UX improvements!

• After checking my pet peeve of "how does it look on mobile" I noticed a small UX alignment issue if the text is smaller than the max width:

• The blue "Action or raw event" button on insights page is confusing. I don't see a "+" in front of it and I think it should also be left aligned. I think the button should say something more like "+ Add graph line", as its intent feels vague otherwise. The "+" would help though.

• When I just open /insights, without any changed filters, the dropdown is very empty:

• I'd advocate for removing the autocomplete dropdowns and just keeping them open all the time. There's no reason they need to be another dropdown. We do nothing with the whitespace behind the dropdown.

• The "New Action" button is strangely aligned and its intent is not clear. I'd change it from a button to a link with for example the text "Manage all actions", plus the "open extrenally" icon, kind of like in the toolbar:

[Twixes]

Action creation in new version crashes for me when adding a new match group of type Autocapture or Page view (Custom event works fine).
Besides that issue, the new UX seems clearer and more polished to me. Though @mariusandra raised very fair points.

[jamesefhawkins]

Agree with Marius' points.

In addition:

Wording

We're now referring to actions as "actions" and "tags". Is this confusing?

We discussed "Tags" and we felt that they don't cover the fact you can add logic to them. However, "Power Tags" seems cheesy. Having thought harder, I feel like "Filters" (with everything nested under "Events" in the left menu structure) would be better.

There is some conflict with filters on the graphs

Toolbar

I think the toolbar's UX could be better, given many users could go there to create an action.

"Inspect" is actually the best way to create a new action, whereas "Actions" just displays the existing ones. I feel like these should both be in the same place as "Actions". "Inspect" makes me feel like it's going to let me see the xpath but nothing else.

If we do this, we should change the wording here

(Whilst here, perhaps we should just remove stats from the toolbar for now as that adds confusion whilst it doesn't do anything)

Insights page

I'd suggest this shows 'Raw Events' as selected by default (since that will work for everyone), then 'Filtered Events' as an alternate option if we make the wording change above.

[paolodamico]

Thanks @Twixes, @mariusandra & @jamesefhawkins for the thorough feedback, great catches!

• Most UX points I agree with and have been addressed in the latest push.
• @Twixes can you send me more details on the exception being raised? Can't replicate the issue you described.
• @jamesefhawkins regarding wording I think we can try keeping actions with all these changes and see the results. Wdyt?
• Regarding the toolbar I mostly agree too, perhaps we can get those changes in this experiment too, thoughts @mariusandra ?