-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improved funnel visualisation #4535
Comments
Thanks for bringing this up @akbansa, we hope to put a lot of focus on funnels in the upcoming weeks. Will update soon with some wireframes/mockups for this. |
Awesome!
I'll be happy to help in the earlier phase of design and development.
On Fri, 28 May 2021 at 18:38, ***@***.***> wrote:
Thanks for bringing this up @akbansa, we hope to put a lot of focus on funnels in the upcoming weeks. Will update soon with some wireframes/mockups for this.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.
|
Thank you for opening this issue! #4402 contains additional context on what I think could be improved about funnels -- curious to hear any/all input or design ideas. |
@samwinslow Here are my thoughts (functional):
|
Before resorting to a typical funnel UI, I wanted to see if we could do anything creative A few (unfinished) ideas, none of which would really even need d3: Option 1(I particularly like this one.)
Option 2Handy so you can also see the funnel "bounces" in a linear view Option 3Option 4I don't love how the users column is displayed here, but otherwise I think this one is pretty straightforward. |
Love the general approach here. It's pretty visual too, and provides space for a lot more context. My only concern is that users don't find it intuitive and it requires a ton of getting used to. What I would suggest is moving forward with mockups, building this and then running some usability tests, and release A/B tested to see the impact, unless someone feels strongly on going with a more "traditional" funnel design? Keen on hearing your thoughts @kpthatsme @marcushyett-ph @jamesefhawkins |
What about more verbosity? Just like in trends you can choose between different chart types depending on what you want to visualise, so too with funnels you may want to see the data in different ways. A horizontal/vertical split is not too much to ask and might even benefit users with 14 steps in the funnel. |
I like these designs and particularly how the information is nested in option 1. Similar to @mariusandra mentioned - this design approach offers a big advantage for long funnels (e.g. greater than 5 steps) since you have unlimited vertical scrolling. However I'm not certain long funnels are very common and would probably want to optimize the experience for the majority building the best possible experience for short funnels (5 or fewer steps) initially. The vertical approach might not be quite as intuitive for people coming from other products where funnels are visualized horizontally, however (to me) its very clear in all the mocks that this is a funnel - so this might not be a huge risk. I think we should align on the relative priority of funnels before investing too much here - but @paolodamico suggestion of some usability tests sounds like a great next step |
Thanks for the input! I do think giving this priority is important, funnels is the second-most used insight (source). I'm leaning towards having both visualization options and allowing users to pick (with a smart default), wdyt @corywatilo ? In any case, we would definitely need to run some user tests for the vertical option, so worth moving forward with mockups. |
The other reason for going stacked (like this) is that long action names can be hard to see if you have >~3 funnel steps plotted. (H3ap also switched to stacked funnels at some point as well, fwiw.) That being said, I do see value in having an option to toggle the direction since there is a wide range of use cases here. |
To be honest, I'm not in love with this yet. But here are the things I played with:
Open question: What does the empty state look like before you have a completed funnel. (I can work on this once we nail down the layout a bit more.) |
I love the general approach of this, the amount of information this conveys is extremely helpful. Some thoughts,
|
Another rev on a unified UI. It's missing a couple things (accessing saved funnels, funnel history), but other than that, I think it cleans up a lot of stuff from the last one. This also goes more in the direction of a full screen UI. (If, in the future, we eliminated nav when you're inside a module - don't worry, I'm not proposing that today - this would work well.) Adding more steps could either reduce the column widths until a reasonable min-width, then you could scroll horizontally, or with a react component, a scroll wheel could zoom you in/out like @mariusandra suggested above. Anyway, this is more proof of concept, but I think the bones are nice. |
Some thoughts:
|
Love this! Other than what @mariusandra said, |
I really like this design @corywatilo One small piece of feedback (which is very similar to @paolodamico's 8).. I personally believe we should seamlessly integrate funnels with the other features in our product (so people can get the most out of it), e.g. see you have drop-offs then click to look at who dropped off, then watch their session recordings...etc. Based on this it would be awesome if both the "Successful" and "Unsuccessful" users in the bar chart could be interactive, e.g. seems obvious to me I could click on the blue bar (to get more information about those we succeeded) but not sure how I would get the same info about those who did not? (I hope that makes sense - if not I can try to mock it up to explain what I mean) |
This has evolved a bit, and I'm liking the progress. But first, some context. Get inside my brain with me for a minute...Last week, @mariusandra shared an illustration that stuck with me. He reminded me how Google Maps used to load a map in a pane. Now the map is the UI, and there are contextual panels floated on top. I've been thinking about what this means for our UI. Separately I've been using my iPad Pro (now that it has a trackpad) for 75% of my work, and there's something really fun about a full screen, native app-like experience. (By app, I'm referring to something with fixed panes, sidebars, etc - where you don't have a single scrollbar for an entire interface like a web browser.) The future is native-feeling. Packages like the zooming/scrolling animation @mariusandra shared will also go a long way to this. So how does PostHog go native-style?What I'm proposing:
Hover between a funnel step and you'll get an option to insert a step in between. (This would also be an option under the hamburger menu inside each funnel step, like Insert a step after, etc.) The right columnFor this particular view, the "Add a step" option is in the right column, similar to UIs like Github Projects and Trello. GitHub Projects avoids a "New" button because a new column is natural in this UI. Trello has a side pane with the kitchen sink. The benefit of a side pane is that it will work at any size screen, as we can collapse it when very tiny, but display it by default for typical users. FeedbackThis addresses all the feedback, in particular:
& 8. 💯 on this. All buckets of users are linked in blue, but I definitely want to further explore making it more obvious on how to jump into these sorts of user segments. Will come back to this next time I get the chance. |
Completely aligned @corywatilo, thanks for addressing all the feedback. One final thing we should be aware of is that the experience will feel inconsistent vs. other insights, and can have a bit of a learning curve as well on account of that. The concern above aside, I think this is ready to be moved forward. We can talk about next steps in the meting today. Happy to take this to mockups and nail down the final details. Noting down some details worth considering for the HiFi stage, |
One additional feature I think we should include is the ability to custom name steps (as we had planned naming series on trends). Here's an example from our own dogfooding https://github.com/PostHog/product-internal/issues/78. Try to understand what's going on just from the screenshot. What does each step represent? Pretty unhelpful unless you open the query and see how it's built. |
I think the table view is going to be clearer. At some point you could argue this should be a table after enough steps are added. Then you add a break down and your 5 steps become 75 distinct items. While this view is clear, it does take up a lot of space and really overloads the visualization. My next steps for tomorrow are to take this breakdown summary and map it to a table design.
Horizontal funnels just don't scale well when you get enough complexity. This case is difficult because we're using pretty verbose labels. If a user opts for a horizontal layout, we might consider enlarging the chart area to show more detail. This came up a bit during user interviews. There is definitely an expectation that funnels flow left to right. I think that could be based mostly on how this problem was solved in other products. Users might just be reacting to change here more so than the actual design. In the recordings, there was consistent (super small sample size btw) feedback that the stacked layout is learnable. Short term, if we're able to provide both layouts, and especially if we can show funnels at full width on dashboards, I think we can systematically move users towards the more scalable solution. |
I wonder if having a display option like compact (show only bar, label, and percentage) and comfortable (show everything including dropoff numbers, average times, etc) can mitigate this space problem for our horizontal graphs. Maybe the compact mode can even be something we auto enable for funnels with more than 10 or so (?) steps. What do you think? |
I think that's a great idea. But I think we should test it with users to see if it's really a problem for them. Part of this constraint is our multi-column layout. What if we could provide fast, easy funnel creation while still providing sufficient space to make either layout option viable? Maybe we add a full screen view to graphs? Maybe we pursue @corywatilo's full screen concept? There could a few solutions but I think we should base them on data. Let's identify the 80% use case for funnels. How many steps are typically used? How many have filters? What's our most complex case? That information will help us measure the success of each option. |
My 2ç:
|
I think this is a good starting place. If we find that we need some form of inline action to configure funnel step views, or say expand a breakdown group, we might consider stacking these pieces of content to make room for those inline controls. For now though, totally on board with the placement in C.
I think this is a compelling idea for getting started. We might even just add the new detailed metrics to the existing horizontal sankey funnel design and only build the vertical layout initially. I am going to continue with the breakdown illustrations today. I want to focus on a tabular layout for the same concept I shared yesterday. I had a couple other ideas to try for summarizing breakdowns in the visualization as well. |
I agree that Option C looks robust. Will build from that. With regards to wasted space on the horizontal view, the ability to scroll mitigates it somewhat for long funnels. We can see from another round of user interviews whether scrolling is too inconvenient. |
Edit: Here's a simple table translation of the funnel with breakdowns applied. In this example, data is grouped into steps with sub-items for each breakdown option. I have also restored the previous hover summary for breakdowns in the visualization. This in conjunction with the table should be sufficient detail for describing the performance of each step and any breakdowns applied. Note there is some content repetition in here... I am cleaning that up still. Thoughts? |
While working on #4855 I realized it might be valuable to include a prominent display of the average time for the entire funnel. It's slightly redundant information, but in the scenario where the user has created a more complex funnel, it'd provide a prominent and discoverable means of getting into the histogram view. Thoughts on this change? |
I've been having some fun with the left-to-right funnel view today, based on Option C above. One thing I realized is that placing the conversion / dropoff numbers under the bars allows for better use of horizontal space — you can fit 5-6 funnel steps on a 13" screen versus only 3. Great for at-a-glance viewing. |
I put together a quick iteration to see if we can make this work for the horizontal layouts. Appreciate you trying new ideas here! Thoughts on these changes? Each step is roughly 160px wide which means we should be able to get 4 steps in the initial view of the component. Not sure we should build this approach, but it would be worth testing with users to see if the addition of the legend is clear enough. Most of the challenge in this view is the repeated labels, so adding a legend makes sense, but I'm concerned the relative drop off rate might be confusing for some users. |
Would it look weird to alight the blue parts of the bars with the top? For example, it feels weird to see the blue "60%" next to the "> 120 (40%)" data, and the gray unmarked 40% next to the "-> 180 (60%)". |
Great point... here's an update. I think that's a good change. Edit - alternate with no legend in case this doesn't feel too cluttered. |
Ok catching up on everything. Re @clarkus
|
I think the overall average conversion time is the only outstanding item? We'd just repeat the absolute conversion rate from the last step of the funnel.
I think the table header is the place to clarify this. The spacing is a bit tight here, but we could also consider adding both rates - absolute rate for the step, relative rate compared to the previous step.
I want to resolve this as part of some longer-term changes for adding graph series, funnel steps, etc. I think the numerical markers are too bold, as well. I had another version staged, but I want to solve this across all insights, so I am going to tackle this as part of another issue.
Yeah I was just working with what I found in the current design kit. I'm not trying to communicate aesthetic changes as much as I am placement and functionality. For this early version, I'm fine retaining anything that's currently working well. This is another reason I didn't change the markers yet. They just don't feel critical to getting this right at this stage.
A tooltip is a good idea to reinforce that this is actionable. After the demo this morning, I think we should do another iteration that clarifies all the secondary states. I have this on my list for today.
👍 |
Here are a few updates that are mostly for discussion purposes, not so much direction on what we should build. We have a few components that are somewhat competing for jobs in the design above. I tried an iteration on the tooltip that aligns it with other insight patterns. When a breakdown is applied, it quickly becomes an unwieldy component. I'd like to reserve the tooltips here for describing the the breakdowns if they're applied. Otherwise I think we can rely on the table to reinforce the funnel visualization. You can see I also updated the table to better align with other table patterns. In the iteration to the right I added a concept for highlighting a specific step bar with an outline effect. The tooltip could reinforce that this is an actionable component, but I want to spend more time on making the metrics look more actionable, too. The tooltip just feels like a lot of redundant information in most cases. Thoughts, @paolodamico @samwinslow ? |
Indeed, that’s what I meant with the technical feasibility details.
Think that makes sense (either option or both), guess it’s a matter of seeing it in the mockups. If we can make it work by having both options it might actually be nicer as we provide some useful extra value.
Great! We’ll roughly keep the current components that we have right now and we can work on global aesthetic changes progressively. FYI not sure if you’ve seen the design components file we use for the app, but anyways here it is. Great and +1 on everything else. |
Great stuff on this breakdown stuff @clarkus! My thoughts:
Also FYI I've updated the prototype with the latest time to convert stuff. |
@paolodamico Yeah this is tricky... I've been pursuing the overall conversion rate in almost every scenario except drop-offs. The visualization is really illustrating this conversion rate, so reiterating that through breakdowns is where I was focused. Does that seem on track to you or would there be more value in showing the distribution versus the overall conversion rate? |
Here's one last concept that tries to dial in the visualization. The two main changes are the chart color and the bar width in left-to-right layouts. The main change I'd like to see is the chart color. Switching to the same primary blue we use for links and other actionable elements would reinforce that the bars can be acted on. The bar width is purely an attempt at making the right trailing whitespace feel less awkward. The bars are really one of the most flexible elements in this visualization. Meaningful labels, clearly formatted values, etc are the elements that take up most of the space on each step. Said another way, I don't think the bar width is critical to the success of the feature. Thoughts? |
Think the conversion rate is what makes the most sense, otherwise you need to perform extra math operations in your head, I just think we could clarify a bit more that this is that number. Perhaps through a different header name or a tooltip? Re latest design: love the newly aligned labels, the wider bars are slowly growing on me. Let's try and get some feedback on this, ultimately the bar width is something that's easy to change. Hopefully I'll be able to pick implementing this up next week. @clarkus I think it'd be useful to have the latest version of everything reflected in the "PostHog App" Figma. As we have a ton of designs here and in "App doodles" when you sit down to implement something is hard to know what's the latest version. |
The latest versions are posted at https://www.figma.com/file/gQBj9YnNgD8YW4nBwCVLZf/PostHog-App?node-id=2903%3A5558. I am still aligning configuration options, but the visualization and table portions should be ready to go. Posting here for visibility. |
We're going to cap this issue at the most recent designs (see above). We'll continue working on breakdowns, comparison ranges, and layout changes in #5230. |
Perfect! This issue was incredibly large now. |
Is your feature request related to a problem?
Better Visualisation of Funnels
Describe the solution you'd like
Thanks, @rajatkb for the suggestion!
Thank you for your feature request – we love each and every one!
The text was updated successfully, but these errors were encountered: