Site Loader
Dunedin | Christchurch
Dunedin | Christchurch

Best Practice Visualisation

Design with  purpose

The point of a visualisation is to communicate its data in a quick and meaningful way while remaining accurate. A visualisation should serve a clear purpose and not overwhelm the users with unnecessary details.

Well-known design patterns

When you understand the data you are working with, how it is organised, and how its parts relate to each other, you should use well-known design patterns to communicate your data.

Design elements to reveal the data

Apart from the design pattern you choose, an effective visualisation is also about how you design and make individual data elements stand out and reveal the data.

  • Position
  • Orientation
  • Size
  • Shape
  • Color hue, brightness and saturation

Data visualisation pitfalls

  • Color abuse
  • Misuse of pie charts
  • Visual clutter
  • Poor design
  • Bad data

Best practices for visualisations

Adding context to KPIs

KPIs are a great way to communicate some of the big ideas inside your app. However a KPI value does not provide any context to the number and calculations that are happening behind the scenes.

To help bring context to your KPIs, include supporting information next to the value in smaller text. For example, you can compare the current KPI value with the value from the previous year. You can also add a small chart (line or bar) without axes or values to provide information about the current trend.

Color accessibility

The spectrum of colors is narrower for people who have some type of color-based visual impairment and so they may interpret your visualisation differently.

A red or green KPI status can be confusing. You can use shapes with colors as performance indicators to make your designs more accessible. For example, use a red empty circle to denote bad and a green full circle for good or add a triangle as a warning symbol that only appears when a KPI status is at an unacceptable level..

Filter and icon placement

Filers and icons are an essential part of data visualisation but it can be difficult to know where to place them or what information to put first. You can often anticipate where the user will begin to read and what information will read first based on a few well-established design principles.

  • Left placement
  • Top placement

Information hierarchy

When not all of your information is equally important, you want your reader to prioritize some visualisations over others. You can show a hierarchy of information by using a few key design best practices. For example, you can use different sizes to emphasize some visualisations.

Page placement also plays a part in information hierarchy. The information at the top of a page is perceived as more important than information at the bottom of the page because it is read first. Information on the first page is perceived as more important than information on the last page.

De-cluttering your apps

Too much information in an app makes it difficult to see what is important. A simplified design subtly guides the reader and allows them to stay focused.

Less is more

Users often try to include too much information in one app. Line charts with several measures can be confusing and difficult to interpret. Try creating several smaller apps to spread this information out onto the page.

Post Author: Jon Foote