Closed paolodamico closed 2 years ago
CC @clarkus
Could we consider switching the funnel mode from "left to right" to the "top to bottom" until we sort this out?
Left to Right:
Top to Bottom:
I wouldn't go so far as to change old saved insights, but new ones could default to the more legible graph type.
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.
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:
... that's enough to show 2 more funnel steps without changing the experience.
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.
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.
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.
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.
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.
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
Environment
Additional context
Thank you for your bug report – we love squashing them!