Image for post
Image for post
© Reaktor

The Internet is full of useless information, disguised in beautiful and pseudo-scientific visuals. Search for “infographics” on Pinterest and this becomes very apparent. It’s kinda sad because succeeding in information visualization is not that hard. You’ll just need to keep a few things in mind. This article is a quick beginners primer to get started with the art of meaningful information design.

Content and goal

Cosmetic decoration, which frequently distorts the data, will never salvage an underlying lack of content. — Edward Tufte

Your message needs to be relevant for the user or target group. Otherwise your commucation is wasted. So before you fire up Illustrator, devote some time answer these five questions:

  1. What are the real goals of the communication?
  2. What is the core insight you’re communicating
  3. Who are you communicating with?
  4. Why is your insight relevant to the target person or group?
  5. Where, when and how the communication occurs?

Pick the right tool

Good design is a lot like clear thinking made visual. — Edward Tufte

Image for post
Image for post
Bar chart is a stronger tool for comparison than pie chart. Our brains are more suited for comparing lenghts than areas.

Choose the tools and level of visuality to suit the context. If you want to provide accurate information, don’t push too much visual eye candy. If you’re designing an engaging ad, you’ll probably need some kick-ass graphics.

Tools for visualizations

Image for post
Image for post

Bar chart, Histogram, Line chart

Image for post
Image for post

Function graph, Area chart, Scatter plot

Image for post
Image for post

Bubble chart, Cartogram, Flow chart

Image for post
Image for post

Venn diagram, Pie chart, Radar chart

If you want to communicate, think of your visualizations not as art, but as tools for understanding. — Alberto Cairo

Gestalt principles

Gestalt psychology holds a set of descriptive principles about how we visually perceive objects. These principles are in action in nearly everything we do graphically as designers.

Image for post
Image for post

Similarity: Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics.

Image for post
Image for post

Proximity: Objects that are closer together are perceived as more related than objects that are further apart.

Image for post
Image for post

Connectedness: Elements that are visually connected are perceived as more related than elements with no connection.

Image for post
Image for post

Continuity: Elements arranged on a line or curve are perceived as more related than elements not on the line or curve.

Image for post
Image for post

Closure: When looking at a complex arrangement of individual elements, humans tend to first look for a single, recognizable pattern.

Image for post
Image for post

Common fate: Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.

Image for post
Image for post

Symmetry: People tend to perceive objects as symmetrical shapes that form around their center.

Image for post
Image for post

Good shape: People will perceive and interpret ambiguous or complex images as the simplest form(s) possible.

10 tips for better visualisations

  • Decide what, why and to whom you want to communicate
  • Learn what went wrong with failed visualizations
  • Study the basics of visual design: composition, typography and color
  • Remember the principles of Gestalt psychology
  • Don’t use graphic design for pointless eye candy
  • One or two different fonts are usually enough
  • Use colors purposefully
  • Exaggerated use of saturation hurts eyes
  • Try to fit the visualisation in one view
  • Bar charts eat pie charts for breakfast

Examples of great visualizations

Image for post
Image for post
Henry Charles Beck: London Underground Map 1931
Image for post
Image for post
London Underground Map 1948
Image for post
Image for post
London Undergound Map 2014
Image for post
Image for post
© Nicholas Felton: 2013 Annual Report
Image for post
Image for post
© Francesco Franchi: Infographics
Image for post
Image for post
© Density Design: Desalination Dissolution

Find more examples from my Information Visualization Pinterest board.

Image for post
Image for post
© Darkhorse Analytics

Further studying

Information visualization fails

On the web

Blogs

Books

Software

Thank you for your ideas: Hannu Oksa, Johan Himberg, Esa Hallanoro, Mathias Lindholm, Mikko Romppainen, Tuomas Husu, Oskar Ojala, Karri-Pekka Laakso.

Written by

Dad. Geek. UX Director. Democracy activist. Founder of Silakkaliike and Safepoint community. Building a collective of researchers, scientists and activists.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store