One of the most frequent graphs employed at 15Five (and in the world at large) is a line chart showing changes in data over time with labels along the bottom indicating dates. The date axis is something that very few data visualization tools get right, in my opinion. It needs to be flexible enough for a wide variety of time scales because a chart could span a few days, several months, or many years. Most data visualization tools struggle to display this in a way that reduces clutter and repetition while also being intuitive to the user.
15Five is a B2B SaaS employee performance management tool with a suite of features to help companies increase employee engagement and productivity through 1-on-1 meetings, OKRs, weekly check-ins, 360° feedback, and employee recognition. It exists in the same space as Lattice, CultureAmp, and Workday.
Common pitfalls of time-based charts:
- Unnecessary repetition of labels:
In a time series of “Jan 2020, Feb 2020, Mar 2020, Apr 2020” there is no need to repeat “2020” for each label, it adds clutter to the chart and inhibits comprehension of the data.
- No delineation of major calendar milestones:
If a time-axis spans more than one year, it should mark the new year in some obvious way, such as with a vertical line.
- Not abbreviating months or days of the week:
There is no reason to spell out “February” when “Feb” is just as comprehensible and more compact. Not only is it shorter, but it is also more consistent in width. The same goes for days of the week: “Tuesday” vs “Tue.”
- Crowded labels:
When pitfall #1 and #3 (repetition and lack of abbreviation) are present, it usually results in crowded labels and/or labels being omitted to save space, such as skipping from “January 2020” to “April 2020.” Another manifestation of this issue is the use of slanted or vertical labels which are more difficult to read.
Below are a few examples from popular data visualization tools (Google, Asana, Zoho, etc) that all commit at least one of several common pitfalls when creating this type of time axis.
Like other data visualization tools mentioned above, 15Five’s time-based charts also suffered from some of these issues, but I knew we could do better.
Designing a better date axis is not so difficult if you are designing it for a specific set of data that doesn’t change. For instance, a chart in a printed annual report showing quarterly earnings over time. It is quite a bit more challenging to design a date axis for interactive dashboards that show a wide variety of date ranges in a wide variety of dimensions (some narrow, some wide).
My idea for a solution was fairly simple: create a time axis label component that consists of several rows. The first row is the most granular (i.e. days or dates), the second row is slightly less granular (i.e. months) and the third row, if necessary, is the least granular (i.e. years). This approach separates each time measure (day, month, year) on to its own row, which decreases repetition and increases readability.
Below is a typical chart showing a typical time axis on top and my redesign on the bottom.
Although this idea is fairly simple to explain, it becomes vastly more complex when thinking about how it will be put into practice for both design and code. For the next steps, I made sure I was accounting for all edge cases by designing many variations of the idea with different data sets and thinking through how the actual code of the component would work.
Because of the many different possibilities of date ranges, it was essential that I design as many variations as possible in order to identify any edge cases where the design might break. Below is an image of part of this process.
Mapping the logic
Designing the axes was only half the battle, so I took it a step further and designed a flow chart of the logic that the developers would need to code in order to display the right type of label in the right situation.
The previous step of designing many variations helped me to realize that the type of labels shown needs to be a product of primarily two things:
- The width of the chart:
Wider chart areas can hold wider and more detailed labels.
- The time span:
Does the chart span years or days? A chart showing 10 years shouldn’t try to label individual days.
Using these two variables I was able to design a simple flow chart that helped developers to code the logic that determines which type of labels to show.
This flow chart really helped jump start the coding process and helped to answer developer questions if I was unavailable. The developers were able to take this flow chart and my designs and construct the time axis component with very little involvement from me.
After the time axis component was coded, I was quite pleased with the results. It was flexible, easy to understand, and reduced chart clutter significantly.
Here are a few examples of the flexible date axis component showing widely different time ranges and chart widths.
Although I’m pleased with the result of this project, what’s missing is testing the changes with real users to confirm that it is easier to read and digest the information presented. At some point in the future I would like to run some user tests on these new designs to validate my ideas.
Additionally, I would like to share this with other companies that do a lot of data visualization so that we can improve these types of charts beyond the lucky users of 15Five.