Replay UX improvements

[daibhin]

As part of #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

At its worst

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]

• Move "Playback from file" to header under ellipse chore: move file playback to header ellipse #21537
• Move user info into the right hand panel (decided to put it in the preview popover) chore: cleanup recordings list #21544
• Simplify user sidebar info (with extra in hover popover) chore: cleanup recordings list #21544
• Tertiary button to change time on on bottom left hand of player chore: timestamp button #21565
• Container query on inspector sidebar feat: improved inspector positioning #21736
• Collapsible user list on left hand side feat: improved inspector positioning #21736
• Full width bottom bar (move left and right columns into the same level as the player) Not necessary
• Make inspector timestamp and sync scrolling buttons clearer chore: use a single timestamp format #21653

Stretch

• Playlists as tabs with overflow inside a dropdown button
  • Include default tabs for "All sessions" (rename "Recent") and "Errors"
  • Move playlist creation to be inline
  • Allow updating of playlist filters without immediately saving
• Table view of recordings
• Show next / previous recordings for a user

[daibhin]

Achieved everything we needed to here last quarter. We now have a new issue with any outstanding improvements: #24561