Universal data visualisation design

by Penny Richmond

Universal design is the design of products, environments and buildings to make them usable to as many people as possible, regardless of their age, ability or anything else. It is grounded on the idea that a broad array of human abilities is ordinary and not special and that we should accommodate for this.

An example of universal design (thank you Louisa O’Brien) is the tile design on some of the older London Underground stations. In the late 19th Century many public transport users were illiterate. Each tube station in that time had a unique display of colour and pattern so that passengers could recognise where they are, regardless of their literacy.

Sir Eduardo Paolozzi's tile deigns for Tottenham Court Road tube station.

What aspects of a dashboard might some users struggle with? And how can we go about designing our dashboards in a more universal way?

Colours and Contrast

Approximately 10% of men are colourblind, 8% being red and green colourblind.

Facebook is predominantly blue because Zuckerberg is red-green colour blind. Zuckerberg says: “blue is the richest color for me — I can see all of blue.”

The prevalence of red-green colourblindness is the reason why the default colours in the Tableau desktop are blue and orange.

You can check if your colour palette is colourblind friendly using Colour Oracle

Any information portrayed by colour needs to be distinguishable in a secondary way, by shape, for example.

Both colour blindness and contrast sensitivity loss are common, so it is important to check the contrast between your text and / or data points and the background colour.

You can check your colour contrasts using this colour checker.

Someone with red-green colourblindness person may not be able to see the numbers displayed here.

Font size

The Information Lab’s Collin Smith recommends a font size of 11px or higher. Any smaller than that and a lot of people are going to struggle to read your text.

Funkify have a disability simulator that can blur your screen view to mimic what someone with poor vision may see.

Is your text large enough so that it may clearly be seen by someone with blurred vision?

Data visualisation not operable on a tablet / touchscreen device

Tooltips are (usually - but always for Tableau) disabled on touchscreen devices and they also can’t be read by screen readers. Any necessary information should be displayed without the use of tooltips.

Funkify also have a simulator that will disable your keyboard so you can see what it is like to operate your dashboard without a keyboard.

Can your dashboard be read by a screen reader?

Anything within the chart area in a Tableau dashboard (eg axes) cannot be read by a screen reader like NVDA or JAWS, but captions can. We can add captions to charts to provide a high level description of what is going on in the chart.  Tableau has default caption options that, when turned on, describe what data is being displayed, as well what fields are on colour and size.

Tableau Magic created a data table extension that, when dropped into a dashboard, will display the data for specific selected charts in the dashboard.

Avoid overuse of colour and / or shape

An overly stimulating chart with more than 5 colours and an overload of information is not only poor design for effective data visualisation, but it can also render the chart extra difficult to interpret for those who are neurodivergent (ADHD, Autism etc). The main insights should be clearly displayed in the title or subtitle.

Is the main takeaway of your chart clearly stated in the heading or subheading?

Can you think of anything else?

If so.. send me a tweet! @PennyMRichmond

:)

Avatar

Penny Richmond

Thu 29 Apr 2021

Tue 20 Apr 2021