PostHog / posthog

🦔 PostHog provides open-source product analytics, session recording, feature flagging and A/B testing that you can self-host.
https://posthog.com
Other
19.69k stars 1.16k forks source link

Replay UX improvements #21302

Open daibhin opened 3 months ago

daibhin commented 3 months ago

As part of https://github.com/PostHog/posthog/issues/21078 Team Replay will be working on the UX on Session Replay over the next quarter. This is a tracking issue for specific UX improvements & UI changes we plan on making

Current UI

At its best

Screenshot 2024-04-03 at 14 58 00

At its worst

Screenshot 2024-04-03 at 14 59 08

Feedback

General UI busyness

Currently I find this UI overwhelming even without the sidebar, and it feels like we’re only adding more and more functionality and UI complexity to replays. I wonder if it would be worth so that, when someone goes to /replays, we don’t show them the full list of replays and start automatically playing the latest video. Instead we show them a page for customizing filters first so they can choose what to engage with more decidedly? Plus we’re repeating info in a few places (e.g. we have Chrome Desktop Windows above the recording video, but it’s also highlighted in the list already). Feels like somewhere we could remove UI elements.

Quick vs Advanced filters

  • It wasn’t obvious that the “Choose quick filter” option wasn’t the actual filter options. I went to filter by email, but that just adds it as a quick filter option, which you then need to select + configure. I didn’t immediately get this was the intention. It also isn’t obvious that button is a dropdown at all as it doesn’t look like any other dropdown button.
  • Overall, it doesn’t feel substantially quicker / easier to add filters this way. The only step it skips is searching for the property. I feel like it would be easier / better if the search modal just automatically highlighted popular filters immediately, rather than setting quick filters separately.
  • Clicking on Action or event in advanced filters automatically applies the pageview event, which means I have to click again to search for a different action or event. Just eliminating this would probably remove the need for these separate quick filters. The Person or cohort button doesn’t do this, which is good.
  • If you want a “quick option”, I’d prefer it if I could configure a filter using the “advanced” options and then choose to save that config for later use, if that makes sense? That way, instead of this “Choose quick filter” button you can just have a list/dropdown of previously saved filters, and creating new ones means using the advanced filters to configure them. TL;DR, my preference as a user would be to just to make the advanced filters easier to use, rather than adding more UI options for quick filters

Related issues

Saved filters

daibhin commented 3 months ago

Stretch