Over the past months, the Elastic team has been involved in a series of initiatives created to improve the readability and aesthetic of dashboards, the ongoing work on existing charts and components is one of these.
In addition to that scope, the gradual deprecation of older visualizations tools in favor of the newer Lens clearly showed the need for a new and better Metric chart, a component that could be simpler to use, more solid in terms of appearance and more functional in terms of available features. The old Metric component (now renamed Legacy Metric) showed some limitations such as we can see in the following image
Since the font sizes would change according to the length of the number displayed, text could appear misaligned and disproportionate among each other giving a hard time in reading values and an unpleasant experience. One side effect of this is also that small numbers (low number of digits) will appear larger than big numbers (numbers with a lot of digits) creating a wrong visual perception of the importance of these values.
The new component would rely on a more rigid design that improves consistency and fast readability. We created a series of breakpoints in order to have more control on the final result, while we also modified few alignments. Number are now aligned to the right side of the component in order to simplify the identification of bigger numbers (e.g. 4 digits will be immediately look bigger than 3 digits).
It is interesting to see the result of the application of principles such as the ones just described. If we use the new component and try to replicate the first image of this post, we can obtain the following display of elements:
As you saw, the new metric comes with a series of functionalities that overlap with other charts (gauge, bar). This was intentional and it has been designed in order to push for a better use of visual models that would make our dashboards cleaner and easier to read. When there are simple values to display, it is often better to rely on a less confusing or articulated component such as the new metric instead of other models such as Gauges, Bullet or even Bars.
We can finally get to the last important point of this post, what would our dashboards look like with this new component and when to decide that it would be good use?
The following image show a classic dashboard that some of the readers might know, it uses Legacy Metrics and Gauges Charts at the top in order to give a quick overview of how things are going and tries, with the help of gauges, to show some severity behind these numbers.
By replacing these top charts with the new Metric, our goal is to create a dashboard that is easier to read and understand, we can see how we are using less space and therefore we are shortening the distance between these numbers and the charts below.
The new component provide better alignments and therefore an easier readability of values that are now all the same size and in the same position, resulting in a less chaotic organization of elements.
We can also see how the side progress bar could easily help in providing what Gauges Charts were good at, an evaluation of the values represented in comparison with a maximum value that serves as an important limit.
We hope you enjoyed the walkthrough, please feel free to reach out with feedback or use cases, all contributions are more than welcome!