Toolbar UI/UX improvements

[paolodamico]

This issue introduces a proposal for an incremental improvement to the toolbar, ideally together with #2349.

• Full Design: Figma
• Relevant frames: Everything in the "🔍Floaty Button Thingie" page.

Please note that the design introduces two different proposals for how to interact with the toolbar once it's in an engaged state, please share your thoughts on this too.

Of particular importance when implementing this is that we have to instrument everything, one of the key reasons for working on this is to make sure we have great analytics to decide how better to proceed with this feature.

Additional context

Should address,

• Toolbar feedback: Improvements on creating actions #1530
• Quick dragging of Toolbar causes inadvertent selection in Safari #1624
• When defining actions, show a border around matching elements #2143

[mariusandra]

Some thoughts in random order:

• It's a bit hard for me to step back from the design I worked on and look at the new mockups objectively. I'll try my best, though please solicit more opinions from other people! :)
• It's definitely less "in your face" when at the edge of the page. Would this version only be in the edge? We can make the current version also "snap" to the edges
  
• There's no "X" button to hide and unauthenticate the "floaty button thingie".
• Of the two options in "engaged state", I like the one with the checkboxes. I think it's an upgrade from what we have now. It makes it obvious that these are things you toggle on and off without having to learn it. However the "page stats" checkbox is slightly different than the others and I'm not 100% convinced it works like so. I don't have anything better to propose though.
  
• What would the "loading" state look like? It takes about 5 seconds to get the data for the heatmap for posthog.com.
• In the action box, the "new tab" icon seems like too much. I get the intent I think (open the big action edit page?), but I always think back to mobile interfaces with thick fingers and this is too close to the other UX elements to be easily clickable. I'd just remove it and perhaps add an "open in app" button when inside the action.
  
• We currently use different colors for heatmaps depending on if it's a much clicked (darker red) or rarely clicked (lighter red) element. Is something similar planned here?
• The color scheme for the elements seems quite nice though.
• This "action" view is missing a few features: 1) "inpsect" / "select another element" 2) add match group, 3) how many elements are matched (they might be off screen)
  

All in all, this new design looks a lot cleaner than what we have now, yet the one we have now looks more fun... 😜

[paolodamico]

Thanks for the feedback @mariusandra, I particularly understand how difficult it is to step back from something you designed/created before. It's hard. I will definitely ask for more feedback from you and everyone else before we move forward with the implementation. Regardless, I agree with almost all your comments and will address them.

FYI as these improvements were not prioritized for Release 18 (#2366), I will table this for a bit.

[paolodamico]

Focus customer reported today that after running several onboardings with different team members, almost all of them seemed confused by the current workflow / interactions (particularly having to click the flag and then the number to enable the action creation process). It seems this is a very relevant flow for this focus customer too.

Maybe we could revisit some changes from this issue to implement soon? Though I think it be worth to make sure we scope it down to the minimum required to avoid distractions. @clarkus @mariusandra (when you get back) for thoughts.

[clarkus]

Sure I'll take a look at this.

[clarkus]

Related #5581

[paolodamico]

For inspiration, just noticed this nifty button/toolbar thing from Netlify,

[rcmarron]

I've been playing with the Toolbar recently, and I've been noticing a couple of pain points

• The UX of clicking the numbers to launch the panel that @paolodamico mentioned above is definitely super odd. It took me a while to figure it out at first. Similarly, it's confusing to click the small icon to turn the feature off afterwards.
• I often end up with a disjointed experience with components on different sides of the screen. (e.g. the button is on the right and the panel I'm working with to the left). It's not terrible, but it can be hard to "realize where I am in the experience." I think it's particularly confusing because we're layering on top of the customer's page.
• @mariusandra has mentioned this before, but the current design is difficult to extend to new features. We can't end up with a super long list of floating icons :-)

One solution that I've been thinking about is the button just expanding in a full panel when clicked, and that panel then has the space for a more standard navigation inside of itself. Something like the following:

Obviously, it needs to be fleshed out more, but I think a design in this direction would help us address a good amount of pain points and use more standard components/interactions.

[Twixes]

BTW here's a similar design I made a year ago. 😄 Marius was in favor of keeping the more "organic" style we still have though.

[mariusandra]

The interface will have to integrate the following states:

1. Inspect elements on/off
2. Heatmap elements on/off
3. Actions elements on/off
4. Heatmap list on/off
5. Actions list on/off
6. Feature flags list on/off
7. Inspect/Heatmap/Actions element window on/off

[clarkus]

Related #6202

[daibhin]

Toolbar 3000 was launched: #17276