Skip to content
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

Closed
akbansa opened this issue May 28, 2021 · 113 comments
Closed

Improved funnel visualisation #4535

akbansa opened this issue May 28, 2021 · 113 comments
Labels
enhancement New feature or request

Comments

@akbansa
Copy link
Contributor

akbansa commented May 28, 2021

Is your feature request related to a problem?

Better Visualisation of Funnels

Describe the solution you'd like

  • Show relative percentage at each stage
  • Show gradual decrease in numbers focusing highest attrition

Screenshot at May 28 08-23-55

Thanks, @rajatkb for the suggestion!

Thank you for your feature request – we love each and every one!

@akbansa akbansa added the enhancement New feature or request label May 28, 2021
@paolodamico
Copy link
Contributor

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.

@akbansa
Copy link
Contributor Author

akbansa commented May 29, 2021 via email

@samwinslow
Copy link
Contributor

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.

@akbansa
Copy link
Contributor Author

akbansa commented Jun 7, 2021

@samwinslow Here are my thoughts (functional):

  1. Supporting negation of events
  2. Provide a way to navigate through the list of user who has done events in a sequential manner (funnel usage)
  3. Relative dip in numbers
  4. Export ability

@corywatilo
Copy link
Contributor

corywatilo commented Jun 9, 2021

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.)

  • Shows the steps in a timeline view
  • Adds the concept of avg time between steps
  • Lumps users into buckets that you can click on to see a list of those users
  • Option to switch to relative percentages, to show percentages between each step instead of the entire funnel

image

Option 2

Handy so you can also see the funnel "bounces" in a linear view

image

Option 3

image

Option 4

I don't love how the users column is displayed here, but otherwise I think this one is pretty straightforward.

image

@paolodamico
Copy link
Contributor

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

@mariusandra
Copy link
Collaborator

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.

@marcushyett-ph
Copy link
Contributor

marcushyett-ph commented Jun 11, 2021

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

@paolodamico
Copy link
Contributor

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.

@corywatilo
Copy link
Contributor

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.

@corywatilo
Copy link
Contributor

To be honest, I'm not in love with this yet. But here are the things I played with:

  • Eliminates the separate Funnel query builder, in exchange for a unified workspace
  • Switching to horizontal
  • Showing a visual representation of the users who dropped off in between stages
  • Clicking an action name would act as a dropdown to let you change/swap the action
  • Hover state shows the ability to add a step in between existing steps. There's also a (+) button at the end to add a new step there
  • All user #s are clickable to view that subset of users
  • Filters moved below
  • Users table shows the progress for each step, bucketing the users in each group is a visual way. Toggle to see a more traditional table view.

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.)

Funnel 2

@mariusandra
Copy link
Collaborator

The quick feedback I have is that I absolutely <3 the idea of putting more tools inside the visualisations themselves, like the "+" button between the two funnel steps to add another one. If executed well, this makes the data feel tactile, and the UI smooth.

A similar "tactile" approach would be to sideline the "date picker" in line charts with the option to just swipe and zoom on the graph itself, something like this (first gif I found):
img

@paolodamico
Copy link
Contributor

I love the general approach of this, the amount of information this conveys is extremely helpful. Some thoughts,

  1. Is there a way to compact the main bar lines so visually looks more like a funnel and it's easier to understand? This structure seems to bring a ton of attention to the users dropped, but this is probably not the first thing you look at.
  2. I'm unclear on how you would actually build the funnel, particularly interested in making sure this can be incredibly quick. Perhaps some quick keyboard shortcuts to add & remove steps?
  3. The location of filters seems intuitive, particularly relative to the other insights pages.
  4. I love the idea of simplifying the user list at first instead of showing the entire user list table as to not overwhelm the user, but I'm curious if there's another reason for having this. Is there some additional value (extra info you're getting) on the grouped view of users I'm missing?

@corywatilo
Copy link
Contributor

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.

Funnel 8

@mariusandra
Copy link
Collaborator

Some thoughts:

  1. This looks really clean, and it's so simple we don't even need charts for this.
  2. I think the only thing missing from the mockup is the date range picker.
  3. We'll still most likely need a horizontal mode for when there are more than 6 steps... if you want to have a full overview (including all labels in full), which I think most people will. I think rotating this interface 90 degrees will be quite simple and will look nice as well. This could even go under "options".

@paolodamico
Copy link
Contributor

Love this! Other than what @mariusandra said,
4. I would move the filtering box to the top. I know we want to be more premium with vertical space, but I think that's just too confusing. Besides, most of the time (and particularly on first load) the box will be quite short.
5. The dropoff on step 1 seems confusing, maybe just remove it?
6. For the conversion time in the middle, maybe add the word "Avg" or something clarifying what the time is a bit more?
7. Not sure what the relative percentage option is, but based on the space I would just add both options in there (easier to screenshot too). Example (if I understood relative percentage correctly): "50% drop off from last step" & "12% drop off overall".
8. It's not clear you can click to see the user list from each step. Maybe it's actually useful to have some visual representation of where users drop off as we have today? Where would I click to find users that either continued or drop off in a step?
9. Based on your thoughts, I think we could start changing this to mockups. Let me know if you want me to help with this.

@marcushyett-ph
Copy link
Contributor

marcushyett-ph commented Jun 16, 2021

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)

@corywatilo
Copy link
Contributor

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:

  1. As mentioned earlier, killing the separate query builder pane, where possible, as we redo different modules
  2. Filters, display options, settings (and more) go in a sidebar that only the space it needs. This should stay fixed on screen at all times.
  3. The "main content" (viz, chart, table, etc) takes up everything else. (When possible, views like these funnel bars take up a min-height up to the max available space. (We avoid scrolling whenever possible, so long as the data can be clearly communicated without it.

image

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.)

image

The right column

For 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.

image

Trello has a side pane with the kitchen sink.

image

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.


Feedback

This addresses all the feedback, in particular:

  1. Option to change directions (column vs stacked)
  2. Filter box is no longer at bottom

seamlessly integrate funnels with the other features in our product

& 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.

@paolodamico
Copy link
Contributor

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,
2A. The chart type indicator is not clear. I think we need to clarify that you're seeing conversion at a point in time vs. conversion over time.
3A. Main numbers above funnel bars should probably be percentages.
4A. If the 3 dots is a context menu, there's no visual indication that you can sort the steps.
5A. Should we add a more obvious filter button to each step (like we have today)?
6A. What if the funnel has 20 steps? How would we display this in a readable way?
7A. Add the "+ New" button to clear the inputs.

@paolodamico
Copy link
Contributor

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.

@clarkus
Copy link
Contributor

clarkus commented Jun 30, 2021

For the break down by browser view, I sort of wonder if a table view would be more clear? We have a lot of repeated UI text on each row that makes the actual data feel less scannable ("completed", "dropped off", "from previous step", "average time"). We could still probably preserve the bars, but reduce a lot of redundancy.

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.

For collapsed, I think the stacked views of A and C look sharp. In both however, column view feels like we "waste" a lot of space in between columns. This probably works for a handful of steps and on a decent sized screen, but what happens when it starts overflowing? I guess the open question is: Does the breathability of leaving all the space in between steps outweigh the value in fitting more data on the screen?

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.

@alexkim205
Copy link
Contributor

alexkim205 commented Jul 1, 2021

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.

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?

@clarkus
Copy link
Contributor

clarkus commented Jul 1, 2021

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.

@paolodamico
Copy link
Contributor

paolodamico commented Jul 1, 2021

My 2ç:

  • I would go with Option C because the average time to convert is significantly clearer and more discoverable, but I would not align the labels on the vertical version (i.e. would keep the current layout). I think the aligned labels takes too much space, and this is a completely new view anyways, so I think we can be a bit less strict.
  • Refresh is underlined but the rest of the links are not, whichever direction we go we should be consistent.
  • Bringing some extra context on how users are currently using funnels. On average, funnels have 2 steps, 90% of funnels have 5 steps or less. Our largest case seems to be ~17 steps (source).
  • Agree with @clarkus I would build a single layout today and then understand if it's worth building a secondary layout. We don't even know if our other assumptions on nailing funnels are right or not, yet.

@clarkus
Copy link
Contributor

clarkus commented Jul 1, 2021

I would go with Option C because the average time to convert is significantly clearer and more discoverable, but I would not align the labels on the vertical version (i.e. would keep the current layout). I think the aligned labels takes too much space, and this is a completely new view anyways, so I think we can be a bit less strict.

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.

Agree with @clarkus I would build a single layout today and then understand if it's worth building a secondary layout. We don't even know if our other assumptions on nailing funnels are right or not, yet.

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.

C stacked

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.

@samwinslow
Copy link
Contributor

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.

@clarkus
Copy link
Contributor

clarkus commented Jul 1, 2021

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?

break it down

@clarkus
Copy link
Contributor

clarkus commented Jul 1, 2021

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?

Screen Shot 2021-07-01 at 3 35 52 PM

@samwinslow
Copy link
Contributor

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.

Screen Shot 2021-07-01 at 9 13 18 PM

@clarkus
Copy link
Contributor

clarkus commented Jul 2, 2021

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.

C horizontal - alt

@mariusandra
Copy link
Collaborator

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%)".

@clarkus
Copy link
Contributor

clarkus commented Jul 2, 2021

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.

C horizontal - alt

Edit - alternate with no legend in case this doesn't feel too cluttered.

C horizontal - alt

@paolodamico
Copy link
Contributor

Ok catching up on everything.

Re @clarkus

  1. 👍👍👍 on adding the total conversion rate and overall average time to convert. Think these will be super helpful for providing an overview of what's going on. Will let @samwinslow and/or @EDsCODE comment on technical feasibility of this.
  2. It can be very hard to understand what the conversion rate on breakdown values actually represents. The % could represent a) the conversion of that breakdown value vs. the previous step [e.g. Chrome @ Step 1 vs. Chrome @ Step 2], b) the percentage distribution of the overall step conversion rate (e.g. if step 1 to step 2 has a 40% conversion rate, a 20% in Chrome could either represent 10% of the 40% or even 25% (absolute percentage) of the 40%, .... so basically it could lead to quite a bit of confusion.
  3. Nit: Visually the numbers on each series look too small or the circles too large
  4. Some styles are similar but different from what we currently have (e.g. borders on tables, the expand/collapse icons, ...), it's fine if we want to keep that way, just want to make sure it's a conscious decision.
  5. On @samwinslow's new more compact design, +1 on trying new things and particularly optimizing for 4-5 steps which is the largest typical number of steps. Though, I'm also wondering if we're not losing too much discoverability on the conversion & drop off numbers (particularly that you can click on them). I like @clarkus's iteration because it at least clearly shows converted users. We could also add a tooltip with the legend information and "click to view users" CTA.
  6. I would keep the legend, particularly if we don't do the tooltip. It does add clarity to the design.

@clarkus
Copy link
Contributor

clarkus commented Jul 6, 2021

Ok catching up on everything.

Re @clarkus

1. 👍👍👍 on adding the total conversion rate and overall average time to convert. Think these will be super helpful for providing an overview of what's going on. Will let @samwinslow and/or @EDsCODE comment on technical feasibility of this.

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.

2. It can be very hard to understand what the conversion rate on breakdown values actually represents. The % could represent a) the conversion of that breakdown value vs. the previous step [e.g. Chrome @ Step 1 vs. Chrome @ Step 2], b) the percentage distribution of the overall step conversion rate (e.g. if step 1 to step 2 has a 40% conversion rate, a 20% in Chrome could either represent 10% of the 40% or even 25% (absolute percentage) of the 40%, .... so basically it could lead to quite a bit of confusion.

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.

3. Nit: Visually the numbers on each series look too small or the circles too large

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.

4. Some styles are similar but different from what we currently have (e.g. borders on tables, the expand/collapse icons, ...), it's fine if we want to keep that way, just want to make sure it's a conscious decision.

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.

5. On @samwinslow's new more compact design, +1 on trying new things and particularly optimizing for 4-5 steps which is the largest typical number of steps. Though, I'm also wondering if we're not losing too much discoverability on the conversion & drop off numbers (particularly that you can click on them). I like @clarkus's iteration because it at least clearly shows converted users. We could also add a tooltip with the legend information and "click to view users" CTA.

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.

6. I would keep the legend, particularly if we don't do the tooltip. It does add clarity to the design.

👍

@clarkus
Copy link
Contributor

clarkus commented Jul 6, 2021

Here are a few updates that are mostly for discussion purposes, not so much direction on what we should build.

asdf

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 ?

@paolodamico
Copy link
Contributor

paolodamico commented Jul 7, 2021

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.

Indeed, that’s what I meant with the technical feasibility details.

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.

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.

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.

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.

@paolodamico
Copy link
Contributor

Great stuff on this breakdown stuff @clarkus! My thoughts:

  1. Do think it's worth having the tooltip for breakdowns, while it may be duplicated information with the table, it does feel intuitive to hover over to get more details. Even without breakdowns it does feel like it can bring a nice interactive touch that can help users visualize more clearly (i.e. with more verbose descriptions).
  2. +1 on having the % from previous step on the table, this way we can provide all useful information in a single view and we don't have to have the type of percentage selector which is another thing to think about and figure out.
  3. Both on the tooltip and the "Conversion" row, I'm still a bit confused what the % represents in breakdown values, because it can represent a) the percentage distribution vs. the overall conversion rate for the step (e.g. if from step 1 to step 2 conversion rate is 40%, and I see a 10% conversion rate for Chrome, it means 10% of the 40% converted), or b) it's the overall conversion rate for that breakdown value specifically (i.e. all individual breakdown values summed for a step make up the total conversion rate for that step). Wdyt?

Also FYI I've updated the prototype with the latest time to convert stuff.

@clarkus
Copy link
Contributor

clarkus commented Jul 7, 2021

3. Both on the tooltip and the "Conversion" row, I'm still a bit confused what the % represents in breakdown values, because it can represent a) the percentage distribution vs. the overall conversion rate for the step (e.g. if from step 1 to step 2 conversion rate is 40%, and I see a 10% conversion rate for Chrome, it means 10% of the 40% converted), or b) it's the overall conversion rate for that breakdown value specifically (i.e. all individual breakdown values summed for a step make up the total conversion rate for that step). Wdyt?

@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?

@clarkus
Copy link
Contributor

clarkus commented Jul 7, 2021

C horizontal - alt

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?

@paolodamico
Copy link
Contributor

@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?

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.

@clarkus
Copy link
Contributor

clarkus commented Jul 8, 2021

@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.

funnel - top to bottom - break it down-1

funnel - top to bottom - break it down

funnel - top to bottom

funnel - left to right

@clarkus
Copy link
Contributor

clarkus commented Jul 20, 2021

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.

@paolodamico
Copy link
Contributor

Perfect! This issue was incredibly large now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests