[Replay] UX feedback

[corywatilo]

We keep adding features to Replay (which is awesome!) so I thought now could be a good time to step back and look at how we can improve the UI more holistically.

Some of this might be worth mocking up hi-fi.

---

I think I caught everything and linked to the right comment 🤞

1. handling windows a. showing which window is current b. can't search for recordings by window count - https://github.com/PostHog/posthog/issues/24570
2. handling view type a. showing inspector / switching to waterfall b. waterfall retention is low (was released without fanfare and had no follow-ups)
3. the inspector list a. too many ways to filter the list? b. more dense display of navigation timings c. primary click action d. data:ink ratio / 3000-ify the inspector
4. interactions on a recording a. pinning b. commenting c. full screen button position d. skip inactivity button position e. rewind and fast forward f. new icon for "replay this recording"
5. layout a. controls hug the viewport b. whole filter block impact on vertical space c. add filter button impact on vertical space d. show different windows as tabs
6. person display
7. url display
8. device type not showing in event properties for filtering
9. seek bar pill colours

[pauldambra]

this one is interesting...

we can receive events/logs/network items etc from a window even when it isn't the "active" window for the recording

so we can't tell only from the event list that a user switched windows.

we can update the "item list" with a new event "user switched window or whatevs" once we've calculated the active segments for the recording data

but it makes me wonder... how do we show someone that an item is backgrounded... right now you could figure this out using the UI but only if it occurs to you (and it never did to me before now)

you could hide them and have a "9 items from background windows hidden" that lets you expand them under the new window switched item

but then really you need a state anyway to show that an item is from the background. that feels like a great debug signal

[pauldambra]

this also interesting...

waterfall is the odd one out here.

inspector adds something alongside the playback

waterfall switches to a different view entirely

so we've combined two different things

1. show me the inspector
2. show me the waterfall for this instead of everything else

(i haven't looked at how much waterfall is used... we also don't disable that button when it isn't valid for a recording - yuck)

[pauldambra]

digging in a little... the waterfall view has terrible retention - need to

• follow up with folk who did view it
• probably disable it when it's not valid for a recording

[pauldambra]

so here we have "Tabs" (events, console, network, doctor) and "mini filters" e.g. errors, everything, auto

the mini filters change based on what tab you're on

they are sort of checkboxes e.g. they have an on or off state and sort of radio buttons e.g. if you select "all" then it will unselect all the others

the tab further filters things e.g. network tab is really a filter to say "only network items"

and then the search box further filters again

and the window id filter (which is doesn't affect which window we display - that's a separate control) then further filters the list

so, yep, everything at the top of this panel is about filtering the otherwise flat list of "items"

[pauldambra]

fly-by... this caused me to check that window id filter usage since i was going to suggest removing it.

almost nobody uses that filter - but when they do use it (looking at only a few recordings to be fair) they appear to be doing legitimate debugging and are switching the view to investigate things

that might only mean that the inspector should be easier to parse so you don't need to filter it but folk are definitely using this (probably counts as a power user feature maybe)

[pauldambra]

yep, and some of these are only populated if you have web vitals capture active and web vitals managed to capture them

👍

[pauldambra]

this is interesting because expanding is almost always the primary action for me... but then it's hard to know if that's because I already know that's "supposed to be" the primary action

certainly feels like we've had this feedback before 🤔

---

i think i'd rather have a "hide posthog properties" checkbox than "search properties" my guess is there are fewer custom properties per event

in the toolbar debug pane i went with a single search at the top but let you choose if you were searching events or properties (a little messy but at least only one searchbox to worry about when looking at multiple events

[pauldambra]

yep, the inspector relatively regularly gets feedback that it's hard to use... i think it's already pretty info dense but it's not particularly 3000-ified

we could tinker here but it's such a core part of the page - and could be so cool - that i think it would be useful to get more of your brain time on this @corywatilo - or maybe chat it through sync with david and I... new starter into the team on sep 16th might be a good time to do that though 🤔

[pauldambra]

I ran an experiment a while back calling this "save" instead of "pin" and saw no difference in usage.

pinning does two things

1. it adds it to a playlist
2. it keeps that recording for a year instead of 90 days - we don't upsell this anywhere and maybe should

playlists then combine two concepts

1. saved filters
2. pinned recordings

@daibhin has been doing some background work separating things out so we can split those two up.

I'd be in favour of separating these two jobs

1. i want to keep this recording for longer - make this an explicit action we can upsell (and maybe rate limit / monetise 🙈)
2. i want to group these recordings - move this to notebooks entirely

[pauldambra]

Yeah, we don't really have a notebooks champion active any more. So comments are possible (and cool) in a notebook only we don't surface the comments on the recording at all.

The comments themselves only live in the content of the notebook so they are only surfaced in notebooks and (not impossible but) hard to load separately to the notebook

We could make comments on a recording a special type of annotation (since a comment is only an annotation scoped to a timestamp in a particular recording) and then we can create/display them in notebooks, or in recordings, or search for them etc etc

this falls into the job of curating and sharing that we definitely see folk doing "hey sam, look here's another person trying to click on the checkout hero image" that lives somewhere between replay, discussions, notebooks, and annotations

[pauldambra]

It sort of is... 🙈

Just we also have comment, share, pin, and kebab menu which don't live with the other things

I've got a feeling @daibhin recently reorganised this will leave him to comment since he's been thinking about this

[pauldambra]

same... @daibhin recently reorganised this will leave him to comment since he's been thinking about this

[pauldambra]

button ordering rewind, play, fast-forward -> 👍 💯

"showing keyboard icons vs plain text" -> as in a proper icon not "→"?

[pauldambra]

yep 💯 should be totally do-able

[pauldambra]

in this list view we're relatively lazy and take any of the distinct ids we see during the recording and then let the shared Person component figure it out

so this is something we could be improving across the product - feels timely with the person profiles changes 🤔

[pauldambra]

this is another thing we could get better at in multiple places

in a list like this we don't need to keep showing rvenvy.com or in the waterfall view where we can hide repeated information and highlight differences

again feels like something we can improve in replay but share more widely

[pauldambra]

🤔 hmmm I'm onboard with vertical space saving but this pattern of a product area having tabs is part of the visual language of the site.

I think I'd want to improve other parts of the vertical layout and then come back to this.

we used to have filters in the playlist area and moved them out...

[pauldambra]

OMG I LOVE THE IDEA OF HAVING THE TABS LISTED AS TABS!

(we see some recordings with > 10 windows but (i think) the vast majority will have < 3 or 4

so, worrying about edge cases aside I love this

[pauldambra]

could definitely have "add filter" alongside the other controls above it instead of in its own row

we have metrics so we can check this is true, but folk don't add too many filters so I bet on a high res screen you have enough space

[pauldambra]

device type is relatively overloaded but I'm guessing you don't have mobile recordings added

i think something has gone funky with property filtering

but $device_type is definitely being received

🫠

[pauldambra]

@daibhin there's a lot here but super worth going through!

https://github.com/PostHog/posthog/issues/24561#issuecomment-2308932829 this one is a definite bug (IMHO) and I think you're more familiar than me with this component (maybe an argument for me to work on it though 🙈)

[pauldambra]

new icon for "replay this recording"

[pauldambra]

yes! we do highlight some when you have event filters they match... but we could have a colour that runs through the replay UI for each of the event types

we delay loading properties (for perf) but once we have properties loaded we can do clever things in here too e.g. "group identify - organisation" instead of "$groupidentify"

[neilkakkar]

https://github.com/PostHog/posthog/issues/24561#issuecomment-2308932829 this one is a definite bug (IMHO) and I think you're more familiar than me with this component (maybe an argument for me to work on it though 🙈)

@pauldambra that taxonomic filter shows events (and also person properties), while what you're searching for seems to be an event property, so wouldn't show up in that list 😅 - this bit has been confusing on replay because to filter by event property I first need to choose an event, and add a filter inside for the property. I wonder how much slower do things get if we add an event property filter here that just looks at all events.

[pauldambra]

that taxonomic filter shows events (and also person properties), while what you're searching for seems to be an event property, so wouldn't show up in that list 😅 - this bit has been confusing on replay because to filter by event property I first need to choose an event, and add a filter inside for the property. I wonder how much slower do things get if we add an event property filter here that just looks at all events.

Doh! Yep... of course... ok so UX not bug 👍 humans probably don't think of the distinction "to filter a replay I first need to select an event so that the appropriate properties can etc etc etc" - but yep, will be slow (relatively) to hit "All events" 🤔

[pauldambra]

related https://github.com/PostHog/posthog/pull/24657

[pauldambra]

and see https://github.com/PostHog/posthog/issues/13360

[pauldambra]

extra feedback from private slack thread: https://posthog.slack.com/archives/C074A08LP1B/p1726146510827999?thread_ts=1726137139.126629&cid=C074A08LP1B

the "matching events" ticks are too subtle in general we could be doing way more with the seekbar ticks... emoji reactions, highlighting filter results better, highlighting notebook comments