In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Data visualisation

Why do we use data visualisation at Airbus?

Visualizing data is essential for many of our users. But the human brain is only able to partially perceive the data in a 3D way: it is only able to fully perceive the big picture of data deployed in a 2D way.

As designers, our goal is to communicate information clearly, efficiently and aesthetically.

What do users want to see on charts?

Accessibility first

Before even starting to think what do your users want to see, ask yourself if they can see it.

Accessibility is a strong principle of the Airbus Design System. Anyone should be able to understand and visualize the information we want to share. With the UI kit, it is possible to create accessible interfaces thanks to the colourblind palettes for areas, and colourblind markers for lines.

DataVisualisation01

Consistent experience

Consistency is at the core of Airbus Design System.

Dataviz is no exception, so here are a few good visual practices to apply when creating charts. The chart is placed on the convenient layout, and most of the time contained in a card with a 24px padding. It is clearly untitled for the user to understand the subject at a glance.

DataVisualisation02
DataVisualisation03

Tips : If you want to show the data is loading on a chart on a mockup, you can find this skeleton in the skeleton tab of the UI kit.

If we dig into the structure of one chart, the chart zone is structured most of the time with two lines, the X and a Y axis. These are legended by a label and the unit of measure. We use dotted light rulers or/and columns to facilitate legibility of the chart.

Visualisation on the chart

Before drafting a chart, we should consider the story we want to tell with this representation : what does my user want to know? What message do I want to highlight? What could I show? What should I show, or not show? How will I show it?

The graphic elements of the charts (bar, lines, etc.) are filled with Airbus colours. In this example, we added colorblind-friendly markers.

The legend is placed by default at the bottom, but for some use cases (pie chart, full screen graphs, etc.), it could be on the right side as well.

DataVisualisation04

Original data on the table

Never forget that charts are designed for specific users. It’s very probable that users will need to access the raw data. For instance, popovers can be used to allow them to download the data, or to view it on a data table.

DataVisualisation05
How do users want to interact with?

From a data to a big picture of filtered information

It’s very common that users have millions of data to analyse. As a chart may just be a little window on an almost infinite cloud of data, we will want our users to be able to orientate this window, and just see what he needs to. Filters can enable them to select only what they want to see.

DataVisualisation06

From the big picture to details

If we want to reveal the objective big picture, the data we display should be evolutive and maniable. Our users should be able to zoom in and out, and to navigate inside the graph.

In this example, we decreased the cognitive workload, by highlighting only the hovered line.

Indeed, sometimes there is too much information :  we can’t show everything on a 4-columns graph. This is why the graphs can be adapted to 6, 8 or 12 columns if needed with modularity. The X-axis can also be interactive, allowing the user to explore through time.

DataVisualisation07

From details to extra information

We can also offer more to see by framing the view to focus on a specific part of the screen.

There are also other way to bring extra information to the user. For example, tooltips help showing information in a context on hover, and popover offer actions to the user related to the chart on click.

DataVisualisation08

From a visualisation to another

On dashboards, it’s very common that users will need to access a lot of information on the same page.

It’s fine, but keep in mind the cognitive load of numerous charts close together can be hard to handle for the user : seeing further than a static dashboard is necessary. For example, the user should also be able to expand the little charts to a full screen window.

DataVisualisation09
DataVisualisation10

From visualizing to sharing

When users went through the process of analyzing the data you are showing them, they may want to share, edit, annotate it. When designing data, it’s important to keep in mind that users’ workflow may not stop at the end of the visualisation.

DataVisualisation11
When do we use charts?

To tell a story

Every chart tells a unique story, and colors, or at least nuances, are our material to illustrate it. Here are example palettes that can be used according to the context, but designers can create their own according to business needs using Airbus official colors.

DataVisualisation12

The colors have been chosen among the Airbus official colors, and selected to make the charts readable. Be aware that using too many colors will blur people’s interpretation : a good guide is that with more than 5 to 10 variables or elements, individual meaning begins to fade.

DataVisualisation13

Line chart: to show an evolution

A line chart reveals trends or changes over time to show relationships within a continuous data set.

Line chart is used for continuous data (falls on a continuous sequence).

DataVisualisation14

Bar chart and other: to compare categories

A category chart compares discrete values that are spread across categories. The most commonly used category chart at Airbus is the bar chart.

Bar chart is used for nominal data (data sorted into categories) and discrete data (has clear spaces between values).

DataVisualisation15

Pie chars and other: to visualize proportion

A proportion chart shows how quantities of different consistent categories make up a whole, equals to 100%. One of the most popular charts is the pie chart.

Pie chart is used for arbitrary data (Arbitrary numerical scale).

DataVisualisation16

Histogram and others : to analyse how data is distributed on intervals

A distribution chart displays frequency, how data spread out over an interval or is grouped. At Airbus, one of the most popular is the histogram.

Where a bar chart compares categorical data, a histogram compares the frequency of quantitative data. In a histogram, the bars are adjacent to each other, to compare them.

Histogram is used for continuous data (falls on a continuous sequence).

DataVisualisation17

Flow Charts : to visualize flows between entities

A flow chart summarizes dependencies and interactions between several entities.

DataVisualisation18
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top