Dashboards color schemes

[paolodamico]

When working on the designs for #1659, @lottiecoxon helped us create different color scheme proposals for the main dashboards 🙌 (full design here). Opening this issue to discuss the different proposals.

Current color scheme

Proposal 1

Proposal 2

Proposal 3

Proposal 4

[Twixes]

1 matches our website most, but it doesn't have much variety. Besides that option, I think the current one is pretty good.

[mariusandra]

Something to keep in mind is that the dashboard color is currently set by choosing the "color":

We have people using the dashboard who have selected a specific color for their dashboards. If we do update the color scheme to for example #4, what will happen to all the people who chose "green"?

Also, we should keep black no matter what.

[lottiecoxon]

Moving this forward

Would it be possible to limit the selection of colours our users can choose? For instance we keep the original colours but then add on some more (website similar) options. Therefore we don't take away colours from current users but give new users the option for some continuity with the branding?

I want to get this in motion asap

Options

1. Leave colours as they are

2. Leave original colours and add in some extra options

3. Make the colours unlimited to user they can choose whatever they like

[mariusandra]

Hey! Comments for the options:

1. Done!
2. Sounds good to me. We could tweak the original ones to be more in line with the palette, yet green should remain green..ish.
3. I'd advocate against this. It's not just choosing a colour for the background, but also choosing colours for the lines and/or pie chart segments. Even though these are currently generated algorithmically from the background colour, it's best to limit the list of colours available to not make them too hideous.

[lottiecoxon]

I started with the colours on the features page to start working from. Our colour scheme is bold and as it currently stands quite limited, I fear that these colours will be too loud.

But thanks to @embishh I have access to 'accessible colours' which is pretty nifty. I have created a bunch of colour combinations for the dashboard/website in general.

[lottiecoxon]

If anyone wants to have a go!

https://accessible-colors.com

[lottiecoxon]

We still need to add icons but this is what I have so far

[embishh]

Loving the color palette

[lottiecoxon]

I will make up some icons today and show progress asap - does anyone have any other feedback for the dashboard so far?

[paolodamico]

My 2c:

Color related

• While I love the contrast of the profile picture placeholder with the blue background in the top nav bar, I get the impression we're spending color there, hindering our ability to use the blue or other dark color to emphasize another element in the page. It also gives me the impression that this might bring more attention to the top bar when using it will be not as regular.
• Related to the above, the orange update indicator no longer feels as an action item requiring attention (though I like the color).
• I like the yellow and orange colors used in the actions tutorial section, however using them in those elements feels a bit saturated, I would either not add color on those, or use the same one.
• For the "active" state in the sidebar, I think (unsure) the gold from the profile picture might look better, but I like the current color too.

Random thoughts

• The sidebar seems to wide, one of the advantages of the large icons is that we can make the sidebar narrower so the screen space can be used by the actual page elements. Particularly relevant for insights & dashboards.
• Very personal preference (feel free to disregard), I'm not a fan of the large rounding and we don't use it (currently) anywhere within the app (we mostly use 2px).

[paolodamico]

Would like to revisit this as a lot of our design language has changed. We got some feedback from a user too that we offer too few colors for the dashboards. I also think it might be worth considering to do color accents in a way that doesn't interfere with the body of the chart as a single chart can have multiple series in multiple different colors (i.e. if we can always keep the main chart body white)

[corywatilo]

@lottiecoxon Maybe we can find some colors from the new marketing styles that we can bring over into the options?

[lottiecoxon]

did some colour collecting, these are shades found on our new web designs

[lottiecoxon]

the grey I threw in just for some extra options

[lottiecoxon]

RIGHT - made some serious developments with colours for graphs- 16 colours, colour blind friendly for the main three types (Prot. Deut. and Trit.) See here for the walkthrough on Figma - feel free to leave any feedback or comments !!

[lottiecoxon]

For those who don't want to read through the Figma file, this is the Collection of the 16 colours, followed by three versions that show how those with different colourblindness perceive them.

[corywatilo]

For clarification, are the latest ones at the very bottom of the Figma file?

Separately, one improvement would be to put the most different colors next to each other. (Not all graphs will use all colors - in many cases, just a few.) So it would make more sense to go red -> blue -> yellow vs maroon > red > pink. More variation with adjacent colors would be 👌🏻.

[paolodamico]

Thanks for the input here @lottiecoxon! Can we get your input on a few points? @corywatilo please weigh in too

1. These are the colors we would use both for dashboard backgrounds and for graph series, or only for dashboards? i.e. if a single graph has multiple lines, we would graph each line with each of the different colors.
2. If we're using these colors for graph series, what would be the ordering for the colors? I assume we'll want to mix them to maximize distinction (e.g. if the graph only has 3 lines, we would maybe want to do for instance an orange, green and purple).
3. Related to the above, what would be the default color?
4. Should we consider having an accessibility option where we have a separate set of colors optimized for color-blind people? I'm thinking we could potentially optimize for each group of users to provide each with the best experience.
5. Can we see a test with these colors in the new graphs UI ?
6. I think we need to change the way we accent color in dashboards. Changing the whole background color makes it incredibly complex to properly support having multiple series in a single graph. It'll also make it harder to introduce a dark mode. Thoughts / ideas?

[lottiecoxon]

In response to your 6 questions

1. Personally, I think we should use the colours as accents instead of backgrounds. Bouncing off the mock up @corywatilo made last week or so (image below) I think that having a wash of colour for the graphs or even the header could be a good way to go. Happy to mock this up today to show roughly what I mean.

2. For colour ordering I can make a few collections from the colours above for this exact issue - and then if the user wants to personalise the colour choices they can?

3. For the default colour I would say the orange

4. AH now this is a great shout, we could have a colour blind button in the top corner (a bit like we have a dark mode/lightmode button) I love this idea personally - not only because it shows we cater for disabilities but also normalises it for the everyday user.

5. yes - will work on this today

6. I agree, I think the blocks of bright colour is distracting and overkill (covered this issue in answer no.1)

[paolodamico]

Thanks @lottiecoxon 🙌🙌🙌! Not only for the responses but for your help with this, aligned and will wait for your input!

Only outstanding question is for 1) I actually didn't explain it clearly. I meant to ask if the colors should be used only for a) dashboard accents [as suggested on 6], or if we should use them too to b) represent different series in a single graph (example below from current version).

[paolodamico]

@clarkus I think it's worth finally tackling this once and for all, thoughts?

[clarkus]

@clarkus I think it's worth finally tackling this once and for all, thoughts?

Happy to work on this. I would like to see some success criteria here - I am not 100% clear what the goal is.

[mariusandra]

Having implemented the original colors, I feel the urge to reply.

Happy to work on this. I would like to see some success criteria here - I am not 100% clear what the goal is.

You're asking the right question! I've seen this issue come and go over the last year, and this has always been super subjective and inconclusive. Let's not do anything without a clear goal.

And to repeat, two things that I consider important.

1. Let's not change anything much for users who have selected any of the current colors. It'd be really weird if my blue and green dashboards suddenly turned yellow. No problem to tune the green color a bit, but the existing colors should remain in the list of options.

2. Nobody has complained about dashboard colors being off or wrong or bad or ..., as far as I can tell. I'm not sure what are we actually "fixing" here other than "it would be nice if I could use the logo colors here... brand unity and whatnot", which is 🤷 in this case, in my opinion.

[paolodamico]

Thanks for challenging this. Here’s the problems I see with dashboards colors (and agreed, if these are not problems worth fixing let’s close this once and for all).

From user feedback

• Colored graphs with multiple series are really hard to read.
  • In addition, the color structure inside is not color-blind friendly.
• Offer more color options to better categorize graphs.

My own POV

• A more cohesive visual experience. Use colors that fit better with our new design language (without changing them too much, agreed).

[clarkus]

Thanks for challenging this. Here’s the problems I see with dashboards colors (and agreed, if these are not problems worth fixing let’s close this once and for all).

From user feedback

• Colored graphs with multiple series are really hard to read.

  • In addition, the color structure inside is not color-blind friendly.

• Offer more color options to better categorize graphs.

My own POV

• A more cohesive visual experience. Use colors that fit better with our new design language (without changing them too much, agreed).

I think based on that problem area, #4076 is a better target for resolving specific accessibility issues with graph series colors. This is a fundamental shortcoming for all insight charts regardless of context.

For dashboard colors, I'd ask what problem we're solving there. Is it to easily differentiate charts? Is it just to make a dashboard feel like it's more your own? I think there are other things about dashboards that we don't fully understand yet, so we might benefit from more research to better set the problems we can solve there.

[paolodamico]

Well to the point about the problem, I do see this as a problem (not just in terms of accessibility), but for instance I find it quite hard to understand this (real example) graph at all.

In terms of what colors are used for / what problem are they solving. These existed before I joined so perhaps @mariusandra has better context, but I've heard from users that a) they use them to signal distinct categorizations of data (e.g. information from unique users vs. total volume, or marketing vs. product, ...) and b) make things look more personalized (just user preference).

It's really hard to come up with multiple colors for dashboards + colors for series, ... so in the past I made the suggestion that we update the designs so the dashboard color is just an accent and not the background, and we can keep the same series colors on dashboards and insights (will also make things more intuitive when moving between insights and dashboards).

Happy to chat about this on our standup if it makes sense.

[posthog-contributions-bot]

This issue has 2076 words at 26 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]

Well to the point about the problem, I do see this as a problem (not just in terms of accessibility), but for instance I find it quite hard to understand this (real example) graph at all.

Yup this is my main point - 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. Colors are part of it, or at least contrast, but I feel like there's more to the problem here.

[paolodamico]

Agreed! I've opened a new issue then to make dashboards great, #7517.

[mariusandra]

One more point. We currently have two sets of colors.

• Dashboards with a white background: these get a predefined list of colors.
• Dashboards with any other background: these get a calculated set of colors based on the background color.

The idea here is to create some kind of function that can spit out a "doesn't look too bad" list of colors automatically for any background, instead of handpicking ~20 colors for each background. I'd suggest keeping this approach, and perhaps tuning the function, if the line colors need to be improved.

[gustavoloureirodosreis]

How do you even change a dashboard background color right now? Seems absent on the product... I've looked into every single menu.

[Twixes]

Hey @gustavoloureirodosreis! You can set a dashboard tile's color, which shows up as a ribbon. We don't support full tile colors anymore – unfortunately the complexity in maintaining good contrast and visual cohesion was huge.

[gustavoloureirodosreis]

Yeah, I saw it... what about simply having a dark theme overall? That would already be an 80/20 situation.

[Twixes]

That's definitely on the to-do list, though we don't have plans to implement dark mode in the near term.

[gustavoloureirodosreis]

Where's the to-do list?

…

On Tue, Nov 8, 2022, 12:49 Michael Matloka ***@***.***> wrote: That's definitely on the to-do list, though we don't have plans to implement dark mode in the near term. — Reply to this email directly, view it on GitHub <#1763 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4YVWZB633I3HEBMPCCVXLWHJY7TANCNFSM4R6YWJEQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Twixes]

Well, this item wasn't documented before, so thanks for opening #12678. 😄 In general, this is our to-do list: https://github.com/PostHog/posthog/issues. It has 1.3k items, so prioritization is a challenge.

[gustavoloureirodosreis]

Can I help with this? I can create a PR about it

…

On Tue, Nov 8, 2022, 12:57 Michael Matloka ***@***.***> wrote: Well, this item wasn't documented before, so thanks for opening #12678 <#12678>. 😄 In general, this is our to-do list: https://github.com/PostHog/posthog/issues. It has 1.3k items, so prioritization is a challenge. — Reply to this email directly, view it on GitHub <#1763 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4YVW5URCJURG2PNWG7GYDWHJZ6DANCNFSM4R6YWJEQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>