Guidelines for designing TREsPASS visualisations

The range of data visualisation types goes from simple bar charts to real-time, highly interactive data visualisations that display ten data sources and its interpretation. Still, always a few basic rules apply. In order to streamline visualisations, we set a few simple base rules that improve every visualisation.

  • Keep it simple. Always choose the simplest way to convey your information.
  • Have a specific message you want to communicate. Identify the relationships and patterns of your data and focus on what you want to show.
  • Maximise the `data ink’ ratio: Data-ink is the non-erasable core of a graphic, the non-redundant ink (or pixels) arranged in response to variation in the numbers represented. In normal words, use “ink” to represent data, not for decoration.
  • Select the appropriate chart form and know its strengths and limits.
  • Use colour to highlight vulnerabilities and threats. Use size, and position to help the reader see what is important. Size and position draw attention to particular data points and show hierarchy. Colour adds emphasis, highlights particular data points, and draws connections between graphs. Consider that the hue, value, and intensity of the colour are significant and may have cultural or social connotations. Cultural reading conventions also determine how people read charts.
  • Use clear and understandable headlines and labels to describe the take-away message of the visualisation.
    • If there is a zero line, add elements that make clear what is below zero, and what is above. Colour and lines are usually good for this.
    • Try to highlight the important numbers on the X and Y axis.
  • Pay attention to the legend, which provides viewers with a means of quickly reading and analysing the risk scenario.
    • Designing a legend is also a means to determine which elements should be in a legend and which should not. Less is more in many cases.
  • Labels should be placed as close to the data as possible to give the reader access to the information.
  • Add hierarchy to your data. Avoid cherry-picking data, but do not treat all data equally. Data should have an order of
    importance. Design choices help communicate this hierarchy.
  • Offer multiple views on the data if possible. Different people prefer different representations. Each representation offers unique perspectives on the data.
Basic building blocks. A main colour palette and a secondary colour palette, which can be used for instance to differentiate countermeasures, or to differentiate physical and virtual steps. In general, the further the colour is to the right of the scheme, the more attention it needs (for instance, deeper red signifies that the item is more vulnerable). The various line thicknesses can be used to express various parameters, as well as the opacity of these lines. Almost all elements from this basic building blocks can be combined, so line thickness with colour, or opacity plus line thickness.
Basic building blocks. A main colour palette and a secondary colour palette, which can be used for instance to differentiate countermeasures, or to differentiate physical and virtual steps. In general, the further the colour is to the right of the scheme, the more attention it needs (for instance, deeper red signifies that the item is more vulnerable). The various line thicknesses can be used to express various parameters, as well as the opacity of these lines. Almost all elements from this basic building blocks can be combined, so line thickness with colour, or opacity plus line thickness.

More specific rules that should be applied to visualisations in TREsPASS:

  • Typeface is always Source Sans (mostly regular and semi bold).
  • Use uppercase for labels; this supports clarity. If possible, add some spacing between the letters.
  • A colour palette that uses a stepped gradient from yellow to red indicates how vulnerable something is. This colour palette can be supported by a secondary palette to indicate other elements like countermeasures or to highlight social engineered elements.

 

Example of a simple graph for the e3Fraude tool, using the TREsPASS visualisation guidelines.
Example of a simple graph for the e3Fraude tool, using the TREsPASS visualisation guidelines.
Visualisation for social action variety by year for incidents. Any similarity of the visualisation of the data on "fishing" to resemble a fish is coincidence, but does help a viewer to remember the data. Data courtesy of Verizon.
Visualisation for social action variety by year for incidents, using the TREsPASS visualisation guidelines. Any similarity of the visualisation of the data on “fishing” to resemble a fish is coincidence, but does help a viewer to remember the data. Data courtesy of Verizon, DBIR report 2015.
Left: Visualisation of incidents and breaches from 2008—2015. \\Right: Visualisation of incidents and breaches with a variety of social action from 2008—2015 as gathered for the DBIR Report. Social actions can be fishing, baiting, bribery, scam, extortion, propaganda, spam, and so on. Data courtesy of the DBIR Report, Verizon, 2015.
Left: Visualisation of incidents and breaches from 2008—2015. Right: Visualisation of incidents and breaches with a variety of social action from 2008—2015 as gathered for the DBIR Report. Social actions can be fishing, baiting, bribery, scam, extortion, propaganda, spam, and so on. Data courtesy of the DBIR Report, Verizon, 2015.