12/4/2019
Textual content Alignment on Dashboards
Yesterday, Steve Wexler posted a brand new weblog submit DON’T center, right-align, or justify text on a dashboard. Steve makes a case that solely left-aligned textual content ought to be used on a dashboard. Whereas Steve states in his weblog submit, « Or not less than have an excellent purpose for doing so. », he would not embrace many examples of this. I felt compelled to write down this weblog submit to supply some extra examples the place centering, right-aligning or absolutely justifying textual content doesn’t intervene with the interpretion of the info, and even an occasion or two the place it is vital that we SHOULD do that.
Be aware – Steve modified his unique weblog submit to make clear his considerations are about what occurs when you have got a number of strains of textual content and never single-line gadgets.
Let’s begin with the title of our visualization. Steve, and lots of others, advocate for setting the title within the high left nook of the visualization. As he and lots of others level out, the highest left nook is the pure start line for the place our eyes start when studying a visualization and we learn from left to proper in a z-pattern (not less than within the western world). I do not disagree with any of this. That is stable adivce. Actually, that is my default placement for my chart titles. Take a look at my Tableau Public Profile page and you’ll discover that the majority of my visualizations have the title left-aligned within the high left nook of the visualization. If utilizing Tableau Server or Tableau On-line, then one extra benefit of left-aligning the titles is that they may present up constantly on the thumbnail picture. If the title on the visualization is centered, then you definately threat slicing it off within the thumbnail picture.
That mentioned, additionally, you will discover on my Tableau Public Profile page that there are a variety of cases the place the title just isn’t left-aligned, for a wide range of completely different causes. When selecting the place of the title, I additionally take into account different components of the visualization. For instance, the visible steadiness, the grid design, the point of interest and the way a lot textual content is being proven. This is one instance.
In my Beautiful Trash visualization, virtually all the textual content on the visualization violates Steve rule, « DON’T middle, right-align, or justify textual content ».
- The title « BEAUTIFUL TRASH » is centered on the visualization to create steadiness.
- The scale of the subtitle textual content is ready particularly to create a completely justified textual content look.
- The bar chart labels for the day of the week and the miles pushed are middle aligned above and under the bar. This is quite common.
- The label within the annotation on the map is center-aligned.
These designs in regards to the textual content alignment create a visualization that’s centered. Whereas this instance just isn’t a typical enterprise dashboard, it showcases plenty of cases the place it will okay, if not preferable, to alter the alignment of textual content and never left-align all the textual content.
Let’s take a look at certainly one of Steve’s dashboards from The Big Book of Dashboards.
Discover on this instance that Steve facilities the 4 classes of the dot plot with jitter, in addition to the label within the middle of the chosen dot. This creates a superbly centered look on this dashboard. May he have left-aligned the class labels? Certain, however for the reason that chosen mark is centered it is sensible that the class labels and dot labels are centered. Does the centered textual content make it tougher to learn? No, as a result of it is just some phrases of textual content which are very simple for anybody to learn shortly.
Right here is one other instance from 5 Thirty Eight the place they visualize the Eurovision rating utilizing a slopegraph.
Discover that on the left aspect of the slopegraph they right-align the textual content labels and on the suitable aspect of the slopegraph they left-align the textual content labels. This creates a really good steadiness within the visualization, with the slopegraph performing as the middle level for all the textual content.
The instance that sparked Steve’s weblog submit was Breaking the Barriers in Baseball by Chantilly Jaggernauth.
Chantilly talks about textual content alignment in her presentation Design Secrets for a Non-Designer from the 2019 Tableau Convention. What stands out to me on this design is the attractive steadiness between the left aspect of her visualization the place she is right-aligning the textual content and the suitable aspect of the visualization the place she is left-aligning the textual content. I feel this design determination works very nicely right here. You is perhaps considering, « positive, this works nicely on this case, however most enterprise dashboards do not have such a alignment down the middle. » Agreed, however I am going to counter that the majority enterprise dashboards do not have paragraphs of textual content both. And whereas studying a paragraph of right-aligned textual content could also be extra cumbersome, studying a phrase or two is de facto not a lot hassle in any respect. So let us take a look at some extra examples that are not utilizing paragraphs of textual content.
One instance the place right-alignment of textual content is commonly used is for bar chart labels. Right here is an instance from my Complaints Dashboard featured in The Big Book of Dashboards.
Discover the right-aligned labels on the bar chart.
It is vitally widespread to right-align the labels on bar charts. Stephen Few does this on most of his bar charts and bullet graphs (examples here and here). Cole Nussbaumer Knaflic, creator of Storytelling with Information, right-aligns the bar chart labels here and right-aligns text on the top right hand side of the chart here (Determine 6.3 from her ebook Storytelling with Data). The Urban Institute Data Visualization Style Guide, which is a superb model information, particularly states « When utilizing a horizontal bar chart, right-align the class labels and middle them vertically with the respect to the bar. » Steve Wexler even makes use of this system on a number of his visualizations, most not too long ago in his Comet Chart. Let’s take a look at one other instance the place it’s essential to right-align the textual content on a dashboard.
« DO right-align textual content on a dashboard »
There’s not less than one instance the place it is rather vital to right-align textual content on a dashboard; when utilizing a desk of numbers. I’ve written about this earlier than in my weblog submit 5 Tips on Designing Text Tables. In most desk designs, you will need to right-align the numbers in order that the customers can simply scan the desk for distinction in magnitude. Right here is an instance of a spotlight desk from the Churn dashboard featured in The Big Book of Dashboards.
Discover how simple it’s to see the distinction between two digit numbers (ex. 60 and 70) vs. the three digit numbers. That is simple as a result of the numbers within the desk are right-aligned.
Along with textual content tables, BANs could be very comparable. These massive numbers are sometimes right-aligned or middle aligned and in both case it will make little sense to left-align a textual content label if the BAN have been right-aligned or center-aligned.
Right here is an instance of center-aligned BANs and labels from my Complaints Dashboard featured in The Big Book of Dashboards.
And this instance of center-aligned BANs and labels from the Churn dashboard featured in The Big Book of Dashboards.
This isn’t to say that BANs and their labels can’t be left-aligned. Right here is an instance from my London Buses Safety Dashboard the place the BANs and labels are left-aligned.
Total, Steve Wexler’s recommendation for aligning textual content is genrally good recommendation. Nonetheless, as with most of the « guidelines » in information visualization, now we have to contemplate the various caveats. It’s typically troublesome to create blanket guidelines to « do that » and « do not do this ». As defined on this submit, there might be many cases the place utilizing a distinct alignment for the textual content will create a extra balanced visualization or higher grid design. Within the case of the textual content desk or a spotlight desk, it will truly be finest apply to right-align the textual content. One of many causes I felt compelled to write down this submit was that I used to be nervous that folks would possibly learn Steve Wexler’s submit and apply the « all my textual content ought to be left-aligned » rule to their textual content desk. My recommendation is to think twice about all the components within the design of your dashboards and different information visualization. Whereas laborious and quick guidelines could be helpful, particularly to individuals simply beginning out, these guidelines can typically be utilized too broadly.
I hope you discover this info helpful. When you have any questions be happy to e mail me at Jeff@DataPlusScience.com
Jeffrey A. Shaffer
Observe on Twitter @HighVizAbility
