year
2023
role
Cube.dev: Fixing Charts
01.
Context
Cube.dev is a Business Intelligence Tool, and one of its core features is building charts and dashboards. However, there were some issues with the chart building functionality.
Let’s take a closer look at the chart: it’s a typical two-dimensional bar chart, but with an additional third dimension embedded in the hover effect.
02.
Problems
- Assume that one of the values will have a negligible value compared to the others. In that case, its hitbox will be smaller than one pixel, which will make it impossible for the user to target it and view the value.
- Too scattered values, leading to a jagged chart. In this case, the user’s gaze must search for the necessary value at different levels, making it significantly harder to compare the information.
At the same time, in the current implementation, the value can only be seen on each individual block when hovering. Therefore, comparing values becomes very difficult.
03.
Solution
- We will move the controls outside the chart. Now the user will always be able to switch between different values, no matter how small they are. The navigation block will also serve as the legend of the table.
- Next, we will make it possible to quickly and easily compare values. For this, we will move the values to a separate table below the main chart.
We will slightly increase the scale and add an additional Y-axis.
And now, everything together:
04.
Result
With small changes, we managed to reduce cognitive load, improve the readability of the charts, and make the data more visually accessible.