Make dashboards's UX great

[paolodamico]

The dashboard UX experience is not great. As put by @clarkus very accurately put it,

There is a lot more than color to solving the problem of making dashboard charts easier to use. Legends, tooltips, descriptions, etc all lend towards making those chart easier to grok.

Specific problems:

• Tooltips are unclear, cumbersome and visually out of place.
• Interactions with annotations is cumbersome.
• Charts with multiple series are hard to read.
• A screenshot of a dashboard is not very helpful as it has no information to what you're reading.

Here's a good example.

[clarkus]

Updated designs for dashboard items or insight cards at https://www.figma.com/file/gQBj9YnNgD8YW4nBwCVLZf/PostHog-App?node-id=5931%3A32209. This should scale to every chart type. Note that this will require our minimum dashboard item width be 304–312px. This also removes the contrasting background colors in favor of a wider range of personalization colors that are more decorative and less fundamental to the chart display.

Prototype of the overlay interaction at https://www.figma.com/proto/PA3RZmpBykvBW1du69Kk0A/Prototypes?page-id=413%3A1949&node-id=414%3A1975&scaling=min-zoom&starting-point-node-id=414%3A1975

[paolodamico]

Totally love this! Left a bunch of feedback on Figma, but a couple of things I noticed,

• From the original issue, how do we want to display (and interact, e.g. can we add/remove) annotations?
• What happens if you have a huge time range? Scrolling vs zoom out
• Will tooltips work as usual with the regular insight view?

[clarkus]

Totally love this! Left a bunch of feedback on Figma, but a couple of things I noticed,

• From the original issue, how do we want to display (and interact, e.g. can we add/remove) annotations?
• What happens if you have a huge time range? Scrolling vs zoom out
• Will tooltips work as usual with the regular insight view?

I'll circle back to clean up the annotations idea. Thanks for the reminder. I think zooming is a non-solution. It just makes these charts unreadable. We can do some thing to makes longer time ranges scale here, but we're going to see some upper bound eventually. Ideally the user will make the dashboard item wider, but at some point we might hit some hard bounds that are hard to overcome. Tooltips should work identically to insight views.

[mariusandra]

Reposting for visibility, as I left some feedback regarding the look of the new dashboards (post first-implementation, sorry for not commenting earlier in Figma) here: #7726 (review)

And now I'm not sure where exactly to put this on Figma, so reposting here.

The main points:

• Can we somehow remove the grey background from all graphs everywhere, including from all dashboard and all insights? This background may feel nicer in theory, but 1) it reduces contrast of the lines themselves (harder on the eyes), and more importantly, 2) is really annoying if you ever want to screenshot or share an insight... e.g by copy-pasting to board slides, and then having to work to remove the slight grey hue to make your deck presentable.

• On figma, where most dashboard items are separated by a huge yellow border (grid), or there's a specific alignment of cards, this was not apparent, but in the implemented version (try it out and enable the dashboard-redesign flag), I just can't mentally not connect the low title/meta of a card, with the chart of the card below it. I read the title and look at the chart below... and then realise that the actual title of the chart is even lower below the chart. It's especially apparent on a huge dashboard when scrolling somewhere random and trying to quickly glance what's happening. The smooth grey borders on the cards with the tiny margin between them really does not lend to an obvious visual hierarchy. It's even worse if you have a less than ideally calibrated pro retina xdr screen that merges the grey and white into one mush.

• Finally, I'm still sad the background colors are going away. While more professional, the colors added a bit of fun, jazz, pizzaz, sparkle and joy to an otherwise dull entreprise application. I understand the issue of "the lines are not that readable", but in my opinion you should be free to make that decision... and then only use the backgrounds for charts that you want to somehow emphasize.

Like I said in the PR, these are just opinions, I'm not a user of PostHog in the traditional sense, and I can be convinced otherwise, but please ask around in the team and our users before making these decisions for all.

These small issues aside, the new design/layout is 🔥 🔥 🔥 !

[clarkus]

On figma, where most dashboard items are separated by a huge yellow border (grid), or there's a specific alignment of cards, this was not apparent, but in the implemented version (try it out and enable the dashboard-redesign flag), I just can't mentally not connect the low title/meta of a card, with the chart of the card below it. I read the title and look at the chart below... and then realise that the actual title of the chart is even lower below the chart. It's especially apparent on a huge dashboard when scrolling somewhere random and trying to quickly glance what's happening. The smooth grey borders on the cards with the tiny margin between them really does not lend to an obvious visual hierarchy. It's even worse if you have a less than ideally calibrated pro retina xdr screen that merges the grey and white into one mush.

I'd encourage you to check figma again - there are examples that illustrate all of this without the yellow grid. There are open comments where I'm collecting feedback on these ideas.

Charts need to be treated like static assets (images) to present well. They need space to be described. A lot of the design decisions here are to maximize the chart area so we can really show all the detail we need to show. In our current implementation we sacrifice chart readability in order to fit more stuff on the dashboard. I think we should readjust and make readable charts the priority and dashboard layouts as secondary.

I hear you on the placement of titles and such - it's a compromise and I am still working on that. There are a lot of things that I'm trying to balance in that grid. This updated grid is also based on our common viewport sizes. The minimum dashboard item size is constrained specifically to show well on a mobile-size viewport. Just trying to clarify that there is very much a goal that justifies the changes. There is a prototype with the intended design interaction for dashboard items at https://www.figma.com/proto/PA3RZmpBykvBW1du69Kk0A/Prototypes?page-id=413%3A1949&node-id=414%3A1975&scaling=min-zoom&starting-point-node-id=414%3A1975. Check that out to see what I am going with the changes. There's a lot of detail to fit into these cards.

Regarding cards, borders, etc, we literally use that pattern on every feature we've updated in the last 6 months. It's established and not new to this feature. Does this feedback also apply to other features?

Can we somehow remove the grey background from all graphs everywhere, including from all dashboard and all insights? This background may feel nicer in theory, but 1) it reduces contrast of the lines themselves (harder on the eyes), and more importantly, 2) is really annoying if you ever want to screenshot or share an insight... e.g by copy-pasting to board slides, and then having to work to remove the slight grey hue to make your deck presentable.

This has come up a lot and honestly it feels like an assumption or at least not a clearly defined problem. That background is in place to give more contrast between the chart and all the other stuff that can potentially overlay it. I don't think it's critical to the success of this, but it was intentional and I do think it's effective in terms of hierarchy. I drew a comparison in figma if you want to check that out. I will keep working on this, but I'm prioritizing using this in the product over screenshots / sharing for now.

Finally, I'm still sad the background colors are going away. While more professional, the colors added a bit of fun, jazz, pizzaz, sparkle and joy to an otherwise dull entreprise application. I understand the issue of "the lines are not that readable", but in my opinion you should be free to make that decision... and then only use the backgrounds for charts that you want to somehow emphasize.

This is something that isn't really offered by competitors, so it could prove to be an advantage for us. That said, simplifying things was a big goal with this change. While what we have is reduced in flexibility, it is still more than competitors offer. If we want to do this, I want to make the time to do it better than the current implementation. There are contrast issues, and it just opens up a whole other area of scale that is difficult to support. Our current categorical palette is very limited. That doesn't exist at all for dashboard background color scenarios. Do we disallow breakdowns on dashboards with custom background colors, or do we simplify things to get a good functional baseline for now? I'm going for simpler, but also wanting to better understand the problems we're trying to solve with personalization. Can we go for simple for now, and then try to inform this problem with research? Collaboration is also a big item on our roadmap, and I expect that will have an impact here.

Update: There are more examples of alternate layouts and background colors at https://www.figma.com/file/gQBj9YnNgD8YW4nBwCVLZf?node-id=6133:37402#134361317

[mariusandra]

Hey, thanks for all the clarifications. Like I implied with bad 🔥 emojis above, this is all moving in a great direction.

I probably should learn to use figma better as well. I don't seem to end up there that often.

Regarding cards, borders, etc, we literally use that pattern on every feature we've updated in the last 6 months. It's established and not new to this feature. Does this feedback also apply to other features?

Not as much. The difference is that other pages aren't composed of repetitive elements that need to rely on their borders to convey belonging to a group. There are other cues, and the information is just structured independently enough to not be a problem.

However I feel that the current dashboard borders don't convey belonging strong enough.

Basically, when I'm casually scrolling through something like this, focusing on the bold titles, and then the shiny donuts, and then the next set of bold titles, and the other donuts:

It's rather easy to get disoriented, and having been used to the "title > paragraph" style of content everywhere since forever, end up seeing a structure like this:

It's a small thing, and obviously I'm clever enough to make the right connection. Especially if there's less of a perfect grid, and the chart types are clearly different... but it's not intuitive.

If there's something I know about psychology, then it's that whenever something can be confusing to you, it can be confusing to other people. So I think this is a concern worth addressing.

I think there are clear ways to address this. Just look at this:

I know it's 🍑-ugly (did I ever mention I'm not a designer?), but the confusion when scrolling is gone, as hierarchy is enforced visually.

Alternatively stronger borders around the cards could communicate the same. The following in my opinion doesn't cause the same effect:

Nor this version:

I'm not saying these versions are better in all the ways the version you settled on are. Everything you said about why the top version here is better than the bottom one makes sense, and I agree the labels are much better at the bottom of the box, when looking at this:

I feel it doesn't translate to a grid of repetitive boxes, when the "box" itself isn't strongly enforced, as I feel it isn't now.

That background is in place to give more contrast between the chart and all the other stuff that can potentially overlay it. I don't think it's critical to the success of this, but it was intentional and I do think it's effective in terms of hierarchy.

It absolutely conveys hierarchy, but this gets lost in a repetitive grid of grey and white.

Regarding colors & pizzaz, I might be overestimating the "showing a dashboard full screen on a monitor, like when people still went to the office" demographic, which benefits most from an additional visual grouping mechanism.

...

Re "update": please post as a new comment next time :). I could have very easily missed it, as I was in the middle of writing this. Will post it now

[posthog-contributions-bot]

This issue has 2037 words at 6 comments. Issues this long are hard to read or contribute to, and tend to take very long to reach a conclusion. Instead, why not:

1. Write some code and submit a pull request! Code wins arguments
2. Have a sync meeting to reach a conclusion
3. Create a Request for Comments and submit a PR with it to the meta repo or product internal repo

Is this issue intended to be sprawling? Consider adding label epic or sprint to indicate this.

[clarkus]

Wrapped up outstanding feedback at https://www.figma.com/file/gQBj9YnNgD8YW4nBwCVLZf?node-id=1640:12571#136963100.

[Twixes]

Looks like the major points have been addressed with the redesign that's now out.