Retention table styling update

[lottiecoxon]

Updating the Retention table for better readability

I am pretty sure the design of the retention table hasn’t been touched in months, and why would it, it is fit for function. But (as all designers are plagued with) it could always be made better. 

I believe that with some spacing alterations and stronger border design this funnel table will be much easier to read/scan.

Before :

What works

• Colour. The shade of blue and the tonal scale works very well. Though it could be said that the blues used here aren't exactly linked to the blues we currently have in the new design system.
• Dimensions of cells

Describe the solution you'd like

After

In the new proposed design I have taken the original components, spaced them out through the separation of cells and introduction of negative space. Adding in a curved edge allows for a softer more dynamic funnel table that is easy to read and interact with. The colors have been taken from the data blue tonal scale found within the categorical data palette in PostHog Design System One. The data blue is a soft neutral blue that is slightly different from the Brand Blue (that is also used for links).

This is subtle change to the table and hopefully doesn't throw users off. It shares all the main core components of the table, yet it gives the user a clear view of the information with an updated, on brand color scheme.

Describe alternatives you've considered

Updating just the layout to ease readability

This alternative would mean only changing the layout and the negative space of the table, while keeping the familiar color scheme. The issue here is that while this would help with transition towards the new layout, it still doesn't fix the brand continuity problem- that the colors shown in this table don't fully match up to the colors used for data visualisations.

Fixing the color continuity problem

Wanting to keep within a similar aesthetic I experimented with blue, navy and greens found within PostHog Design System One color palette. Green felt too positive when showing data - as green is usually paired with success. While the Navy lacked some much needed color and felt a little too similar to shades of grey. While the brand blue felt closer to what we needed I didn't want to mix up the link colours with tables, it could be confusing to not know where you can click links or not and thought best to avoid this color for the table.

Additional context

I used the Coolers Contrast checker to make sure the table design was visibility checked

I referenced PostHog Design System One - Categorical data palette

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

[clarkus]

@lottiecoxon three points of feedback:

• Probably fine to stick with the data-blue as a default color. It has sufficient contrast, and it follows the categorical palette ordering.
• The smaller retention values look a lot like input elements in this example. Do you think we could do anything here to further distinguish those from inputs so users aren't confused? It could be the same rounded-rectangle you have but maybe with the striped background to differentiate?
• Since we're showing numeric values, right-aligning would make each cell easier to scan and compare to adjacent cells.

[lottiecoxon]

Updated design with changes made to right alignment and striped background for specific cells.

The only issue with the right alignment is that we still need to put in the Asterisk into certain cells and so this throws off the alignment - I have tried to fix it below but it does seem pretty close to the edge.

[lottiecoxon]

After reading this article on Web design for photosensitive people I think we should try find another pattern for the bottom cells in our retention tables - WIP finding other solutions.

[lottiecoxon]

I experimented with 4 alternatives that avoided patterns of stripes or similar contrast patterns seen below.

But settled on the filled dotted pattern as it seemed the most noticeable as a pattern away from stripes.

[clarkus]

If we change the border color for the last cells in each row, then I have less concern with them being confused for input elements. I read the article on considerations for photosensitive users, and it generally only applies to high contrast striped patterns. If we use lower contrast patterns, I don't think it'll be an issue for photosensitive users. Some striped pattern or other contrasting cell type would alleviate the need for an asterisk. We're also showing a tooltip on hover that describes the period as 'in-progress".

Looks good overall. We can probably drop the asterisk.

[lottiecoxon]

Would it be feasible to have a pale blue border on a plain cell? I believe that the best version would be this but also happy to also go with the pale stripe if not.

Variation A

Variation B

[clarkus]

@lottiecoxon I think either of those options will work. Want to pick the one you prefer and go with that? Thanks for working on this!

[lottiecoxon]

I vote we stick with variation A with the clear cell as it's probably easier to implement and looks more sleek !