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.62k stars 1.29k forks source link

Improve funnels layout for small screens #8990

Closed paolodamico closed 2 years ago

paolodamico commented 2 years ago

Bug description

The funnels layout seems a bit cumbersome if you don't have a large monitor as the actual funnel visualization takes very little space (even on a 14-inch laptop). It's hard to actually interact with the funnel (I see at most one step) and particularly the table at the bottom.

Because the table at the bottom also contains the links to open the person modal (particularly for drop-offs), it's critical to be able to understand why my users aren't converting, and is not very intuitive that from here I can jump to watch recordings of why users dropped.

Expected behavior

I would expect to see at least 3-4 steps without scrolling and have clear indications that I can deep dive into drop-offs to understand why users didn't convert.

How to reproduce

  1. Just create any funnel

Environment

Additional context

Thank you for your bug report – we love squashing them!

paolodamico commented 2 years ago

CC @clarkus

clarkus commented 2 years ago

Related https://github.com/PostHog/posthog/issues/8929

mariusandra commented 2 years ago

Could we consider switching the funnel mode from "left to right" to the "top to bottom" until we sort this out?

Left to Right:

Screenshot 2022-03-14 at 20 56 14

Top to Bottom:

Screenshot 2022-03-14 at 20 58 23

I wouldn't go so far as to change old saved insights, but new ones could default to the more legible graph type.

clarkus commented 2 years ago

We could change the default type, but it doesn't really solve the problem, just makes it less likely to happen. Those layouts vary in a few ways, so it's more about their contents than the flow of information. I don't really think we should change this yet.

While reviewing I found an easy optimization we could make. At larger widths, we equally size the builder components and the funnel results. We could optimize this by setting a maximum width on builder components (640px usually covers it) and then let the funnel results fill the rest of the available area. I checked on it and it's possible with some breakpoint changes. See the thread in slack for specific examples.

mariusandra commented 2 years ago

Fair point with changing the default type.

Setting a responsive max-width definitely would already help a bit.

We can tweak the graph itself to save space. We could get all this green space back if we wanted to:

Screenshot 2022-03-15 at 08 40 12

... that's enough to show 2 more funnel steps without changing the experience.

clarkus commented 2 years ago

We can tweak the graph itself to save space. We could get all this green space back if we wanted to:

The column headers won't align with their contents if we make that change. I think it'll make that table be super hard to read. In your example above we're showing a single baseline rate, but once breakdowns are applied, the width of each value can vary greatly. I am working to see if I can optimize this anymore today, but I don't think it'll be as easy and cutting the green space. Working on this first so I should have something pretty soon.

mariusandra commented 2 years ago

I mean, obviously, a table should still remain a table after the space is cut, such that headers and cells align.

The space savings I was imagining are more about for example cutting "👨‍🎨 Completed" down to just "👨‍🎨 C." for the second, third, etc funnel step. Again, just throwing ideas here. Will wait for proposals.

clarkus commented 2 years ago

Makes sense. Maybe the table should be decoupled from the vis. The idea was to group corresponding values under the step in the table. That way as you scroll you can see a directly comparison for a given step. I will see what I can do to solve for both.

clarkus commented 2 years ago

I didn't make as much progress as I hoped, but I did find some opportunities to optimize the layout to better use the available space. These screens are based on our target viewport size (1280px). In a non-editing context, this gives the funnel results ~1000px of space to render. We can increase the amount of width as the viewport becomes larger or the primary navigation is hidden, etc. Figma

Note there are repeated values that don't add up in this example. They are representative of typical character lengths, values, etc. I've tried to optimize for clarity while still showing as much of a step as possible. I've decoupled the table from the left-to-right insight chart. This allows the visualized steps to be a uniform size based on the number of breakdown values included. As the user adds breakdown values, the steps will become wider. Table columns will be determined by the columns shown. By default, the values for each are pretty wide, so we won't show as many steps concurrently here as we do in the chart.

funnel redraw

This is very much a work in progress but it felt done enough to invite feedback. I will continue working on it and will also show other data states, insight states, etc.