search

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
21.48k stars 1.28k forks source link

Session recordings nice-to-haves (based on my own usage) #12197

Open annikaschmid opened 2 years ago

annikaschmid commented 2 years ago

Background:

I watched ~ 30 session recordings to find out how some of our ideal customers are using dashboards.

This is how I went about it:

  1. I filtered erecordings by event viewed dashboard and by persons/cohorts where org_name contains XYZ
  2. I browsed recordings until I found a) recordings that showed the list of dashboards an organisation had set up and b) the insights the organisation had added to the dashboards -> the playlist mode was super useful for this
  3. To immediately jump to a viewed dashboard in a recording, I used the recently introduced search and "only show matching events"
  4. To read all the content on the screen recording, which was important for this type of research, I used the browser zoom, speed at 0.5x and the time indicator/video progress bar/orange dot to navigate to the specific second of the recording I was interested in. Less interesting sections I skipped with the + 10 seconds

For the type of research I have been doing, I would say PostHogs existing functionality supported 95% of my requirements. One killer feature would be to export full-page screenshots for certain time stamps. Can we do that or do we just capture the visible area of the user's screen?

Here is a list of recording nice-to-have's I captured alongside my research:

  1. I would like to copy a link to a recording / share the recording. If I have a couple of filters, the link to the recording includes all the parameters for the playlist. In one example, where I filtered by event and organisation, it was 700 characters long. Can we make this prettier? e.g. https://app.posthog.com/recordings?filters=%7B%22actions%22%3A%5B%5D%2C%22events%22%3A%5B%7B%22id%22%3A%22viewed%20dashboard%22%2C%22type%22%3A%22events%22%2C%22order%22%3A0%2C%22name%22%3A%22viewed%20dashboard%22%2C%22properties%22%3A%5B%5D%7D%5D%2C%22properties%22%3A%5B%7B%22key%22%3A%22org__name%22%2C%22value%22%3A%22posthog%22%2C%22operator%22%3A%22icontains%22%2C%22type%22%3A%22person%22%7D%5D%2C%22date_from%22%3A%22-30d%22%2C%22date_to%22%3A%22%22%2C%22offset%22%3A0%2C%22session_recording_duration%22%3A%7B%22type%22%3A%22recording%22%2C%22key%22%3A%22duration%22%2C%22value%22%3A60%2C%22operator%22%3A%22gt%22%7D%7D#sessionRecordingId=183c7ad2ffb19e6-008425b5185c33-1a525635-384000-183c7ad2ffc1dac
  2. I would like to capture a screenshot of the recording without the "play" icon when the video is paused
  3. A lot of the videos are a couple of minutes long, but only consist of inactivity. Those recordings are not useful to me. Can PostHog show me "useful" recordings?
  4. If a lot of content is visible on the screen in a very short time (e.g. scroll), it is very hard to navigate jumping back and forth. +/- 10 seconds doesn't give me enough intervals/granularity and moving the dot on the timeline neither. I was wondering if I could jump to the next event, if that would be more useful. Details here: https://posthog.slack.com/archives/C03PB072FMJ/p1665408584591729 https://github.com/PostHog/posthog/pull/12202
  5. Could we better visualise when a user "clicks" something? e.g. when I am trying to understand if a user just hovers over a report or tries to click on it, it is not very clear (unless the UI changes, but that only highlights successful actions).
  6. If I have a two hour screen recording, but all the action happens in the first 10 minutes, the events on the timeline are all squeezed together. It's impossible to navigate them, and then I have a whole bunch of "empty time" that takes up all the space and is actually not useful
Screenshot 2022-10-11 at 16 38 22
  1. If I create a new filter or I go to the second page (or onwards) of available recordings (e.g. 21-40), can we pre-select the first recording in the list, instead of saying 'no recording selected'? e.g. https://app.posthog.com/recordings?filters=%7B%22actions%22%3A%5B%5D%2C%22events%22%3A%5B%7B%22id%22%3A%22viewed%20dashboard%22%2C%22type%22%3A%22events%22%2C%22order%22%3A0%2C%22name%22%3A%22viewed%20dashboard%22%2C%22properties%22%3A%5B%5D%7D%5D%2C%22properties%22%3A%5B%7B%22key%22%3A%22org__name%22%2C%22value%22%3A%22posthog%22%2C%22operator%22%3A%22icontains%22%2C%22type%22%3A%22person%22%7D%5D%2C%22date_from%22%3A%22-30d%22%2C%22date_to%22%3A%22%22%2C%22offset%22%3A0%2C%22session_recording_duration%22%3A%7B%22type%22%3A%22recording%22%2C%22key%22%3A%22duration%22%2C%22value%22%3A60%2C%22operator%22%3A%22gt%22%7D%7D#sessionRecordingId=183c7ad2ffb19e6-008425b5185c33-1a525635-384000-183c7ad2ffc1dac (fixed in https://github.com/PostHog/posthog/pull/12213)
  2. If I click an event below a recording, the recording jumps to this time stamp. This works as expected. Additionally, I would expect the screen to auto-scroll back up to put the recording in the visible area, so that I can analyse the recording from this point onwards
  3. When I load a session recording from a link, it briefly brings up the previous experience of full screen mode, before jumping to the playlist view. Can it immediately go to the playlist view? e.g. https://app.posthog.com/recordings?filters=%7B%22actions%22%3A%5B%5D%2C%22events%22%3A%5B%7B%22id%22%3A%22viewed%20dashboard%22%2C%22type%22%3A%22events%22%2C%22order%22%3A0%2C%22name%22%3A%22viewed%20dashboard%22%2C%22properties%22%3A%5B%5D%7D%5D%2C%22properties%22%3A%5B%7B%22key%22%3A%22org__name%22%2C%22value%22%3A%22posthog%22%2C%22operator%22%3A%22icontains%22%2C%22type%22%3A%22person%22%7D%5D%2C%22date_from%22%3A%22-30d%22%2C%22date_to%22%3A%22%22%2C%22offset%22%3A0%2C%22session_recording_duration%22%3A%7B%22type%22%3A%22recording%22%2C%22key%22%3A%22duration%22%2C%22value%22%3A60%2C%22operator%22%3A%22gt%22%7D%7D#sessionRecordingId=183c7ad2ffb19e6-008425b5185c33-1a525635-384000-183c7ad2ffc1dac
benjackwhite commented 2 years ago

Random thoughts:

  1. Reading content on the page: Given that we have the full DOM as an iframe, there is nothing stopping us pulling out all the text on the page into some sort of markdown-esque heirachy based on the DOM. Quite a power-user feature but probably not that hard to build

Responses:

  1. Copy a link - We could definitely minify this with a server side cache of the page. Saved playlists might be the better approach here though.
  2. Screenshots - Ideally not as this is really complex to do (no browser screenshot API, server side rendering would be an non-trivial amount of work) but we could do a html dump of the page? Alternatively we could have a screenshot button which hides the play icon and tells the user how to do this on their own OS? (e.g. cmd+shift+4 for macOS)
  3. Filter based on activity - yes we can do this! I even have a PR in progress to be picked up after billing
  4. Granular skip times - this makes sense. Need to figure out the UX here but could be a keyboard modifier or a select box to move "event by event" https://github.com/PostHog/posthog/pull/12202
  5. Clearer click UI - Maybe... not sure how easy it is to style these things but we could certainly try.
  6. Timeline zoom level - We could have a "zoom" button to zoom into the bar so it is only N minutes long in total. I think we could experiment here and then perhaps get some design input if its tricky.
  7. Select first recording in page when paginating - yes we should just do this.
  8. Scroll up to the recording once clicked on an event - could work yup.
  9. Flashing issue - pretty sure this is because we have it behind a feature flag. We should just go for rolling this out fully to be honest which would fix this