-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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
Make dashboards's UX great #7517
Comments
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 |
Totally love this! Left a bunch of feedback on Figma, but a couple of things I noticed,
|
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. |
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:
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 🔥 🔥 🔥 ! |
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?
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.
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 |
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.
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.
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 |
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:
Is this issue intended to be sprawling? Consider adding label |
Wrapped up outstanding feedback at https://www.figma.com/file/gQBj9YnNgD8YW4nBwCVLZf?node-id=1640:12571#136963100. |
Looks like the major points have been addressed with the redesign that's now out. |
The dashboard UX experience is not great. As put by @clarkus very accurately put it,
Specific problems:
Here's a good example.
The text was updated successfully, but these errors were encountered: