GeoDataViz design principles

Introduction

For the purpose of these principles a data visualisation refers to any graphic output using geographic data whether that be a map, dashboard, chart, graph, animation or infographic etc.

German industrial designer, Dieter Rams, once asked himself a question, 'Is my design good design?' The answer formed the basis for his renowned ‘ten principles of good design’.

Inspired by this the GDV team created our own list of design principles to promote good geographic data visualisation.

They are ‘what works best for us’ but are also intended as a useful guide for anybody making a data visualisation.

It is certainly not our intention to lecture others on what is right or wrong. The purpose of our principles is to offer some useful guidelines that we believe are relevant in helping with good design.

It is important to remember that these are principles and not rules; there are no rules as such. Anything goes, but the final distinction is between a design that works well and one that does not.

A well-designed data visualisation communicates its message clearly and provides a pleasing user experience. We believe that the following eight principles are fundamental to the successful design of any data visualisation:

Understanding of user requirements
Consideration of display format
A clear visual hierarchy
Simplicity
Legibility
Consistency
Accessibility
Good composition

See the following sections for more details on each of these design principles.

Design principles

Understanding of user requirements

This is absolutely vital to the success of any data visualisation! An effectively designed visual is one in which the intended message is clearly communicated to the user. This is only possible by fully understanding what that message is and how the visualisation is intended to be used.

The design process must start by identifying and fully understanding real user needs. What information does the user require? How will they be using the visualisation? It is important that all design decisions along the way consider the answers to these questions in order to create the visualisation that the user really wants. A user will often evaluate a product or service by comparing their response to their expectation.

Focussing on needs allows the map design to concentrate on the elements that deliver the most value to the user, hence the greater chance of making the visualisation a success; similarly it will lead to the avoidance of including unnecessary information that will only result in distraction or cause confusion.

Consideration of display format

To achieve maximum clarity a data visualisation should be designed from the very beginning with its final display medium in mind. There are numerous output formats and various types of media on which they can be disseminated. Each has its own merits and its own limitations so there needs to be sound consideration and a valid reason for the choice that is made.

Things to consider are a map’s scale, a data visualisations resolution and colour mode (generally RGB for screen and CMYK for print), the size of paper or screen, the type of paper or screen; and interactivity and functionality options.

These considerations may lead to known rules, for example the minimum point size that can be applied to the visualisations text in order to still be legible, or the lightest shade of a particular colour that can be perceived on a particular device. When setting such rules one may consider the optimal display or if the user base is varied then a lowest commonly used denominator may be preferred.

A clear visual hierarchy

The aim here is to draw attention to certain elements of the visual and push those of less importance further down the visual plane - although certain features are less important they may still be required, if not then they should be removed. This helps the user differentiate between features and helps them comprehend the visualisations message effectively.

The concept of figure-ground is key as it helps the user to distinguish between the main focus of the visual (figure) and that which is background or contextual information (ground). The required contrast can be achieved using various methods:

colour - hue, saturation, brightness, temperature
shape
size
orientation
texture or pattern
proximity - how far away features are from one another
graphical effects - such as drop shadow and outer glow
text - font, weight, style

Simplicity

Good data visualisation aims to portray information in an appropriate way in order to transform information into knowledge. The inclusion of unnecessary information makes this process less effective and one should always assess that information’s value to the user against clutter and confusion.

Kelly Johnson’s KISS (keep it simple stupid) principle is often referred to in design. It states that simplicity should be a key goal and unnecessary complexity should be avoided. Quite often the decision to leave things out can have a greater impact on the overall design than what is left in. There can be a temptation to over-embellish which risks confusing the user or diverting their attention away from the main message.

The following two quotes sum this up perfectly:

‘Less is more.’ - Mies van der Rohe

‘It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away.’ - Antoine de Saint-Exupéry

Legibility

All elements within a visualisation need to be legible, meaning that they are readable, understandable and recognisable. All need to be large enough and clear enough relative to the viewing scale and the media on which the final visualisation will be displayed.

Legibility of most features depends on colour and size which ultimately make them noticeable and recognisable. Symbols need to be simple enough to recognise and offer good contrast against the background.

Text can be made legible with a good choice of font, good colour contrast against the background, suitable font size, character spacing and the use of masks or halos. Like any other feature text can also be made more recognisable by choosing a representative colour, for example, blue text is immediately recognised as being related to water.

The proximity of visual elements to each other is also important to the overall legibility. Overlapping symbols and text should be avoided where possible in order to make the information clear to the user.

In map making legibility can be achieved through the process of cartographic generalisation. This can take many forms; from simplification to amalgamation and will be dependant on the scale and use of the map.

Consistency

Consistency provides a visualisation with balance. It enables features to be perceived as being organised into groups and allows them to belong to a family of products through a shared identity.

For a family of products or for a web map stack - a suite of styled maps to cover a set scale range - a degree of consistency in feature styling allows the user to maintain a sense of location awareness and scale. As well as being aesthetically preferential, a consistent approach can also put the user at ease.

Consistency also leads to effective communication through the concept of familiarity. If the same symbol is used repeatedly to depict the same feature, then once the user understands what that symbol represents they can recognise it immediately thereafter. Familiarity breeds confidence.

Conversely, inconsistency can lead to confusion and poor communication of a visualisations intended message.

Accessibility

Accessibility factors to consider in the design process include distribution formats, user disabilities, cost and intuitiveness in use.

Many data visualisations are presented in electronic format. This brings about a need to consider the file type/format which instantly limits the software that can be used to view it; and to decide on the devices and platforms for which the visualisation will be offered, for example which web browsers or mobile platforms are supported.

User ability is another consideration. The visualisation should be intuitive to use and not rely upon a good knowledge of cartography or any other technical understanding. Furthermore a good design will try to be as inclusive as possible. Something like colour vision deficiency (CVD, often referred to as ‘colour blindness’) is likely to be prevalent amongst users as it effects an estimated 8% of males and 0.5% of females in Western Europe, the USA and Japan. It is possible to design with this in mind by choosing more CVD-friendly shades of colour and ensuring suitable colour contrast. Likewise, the sizing of text and feature legibility places expectation on the eyesight of the user. Other levels of ability might also be considered depending upon the likely user scenarios.

Accessibility is also affected by the control mechanisms placed on the map, for example licensing and copyright restrictions. Open data – the idea of making certain datasets freely available to everybody for use and reuse – is one way of increasing accessibility in this instance.

Good composition

Composition concerns the arrangement of all the different visual elements. It is both how the visualisation is structured and positioned, and how the it works alongside any additional information. All visual elements should work together to provide a clear and complete understanding to the user. Their style should also be harmonious or complementary.

This is a really important stage in the design process as failure to get the composition right can undermine all effort that has gone before it and result in a wholly unsuccessful data visualisation.

The aim here is to achieve balance but the ‘visual path’ that you want to take the user on should also be considered; the elements that they view first can be influenced by mimicking traditional reading patterns. It’s worth noting here that the ‘visual centre’ is slightly above the actual centre and it is here that you may want to focus your user’s attention. These considerations can have a considerable effect on the overall user experience.

‘Elements are arranged with consideration of several factors into a harmonious whole which works together to produce the desired statement – a phenomenon commonly referred to as unity.’

- Wikipedia