Matching visual hierarchy to information hierarchy

Charley Glynn
Oct 12, 2017 · 3 min read

If you want your map to be successful in portraying it’s story or message then it’s important to start with user requirements.

It’s important to fully understand the users requirements in terms of information hierarchy and match the visual hierarchy accordingly — that is to say that they will notice the MOST important information first and the LEAST, last. In cartography this is often referred to as figure/ground.

At work recently I was involved in the cartographic design of one of our latest apps — here is a blog post explaining our pie chart clustering solution that forms part of it.

The app displays point features on a map and groups them into four discrete categories. In this post I will explain my thought-processes and reasoning for choosing the colours that I did; matching the visual hierarchy to the information hierarchy.

The data could be categorised and styled in various different ways but the user in this instance is MOST interested in whether or not the features are A or B. They can also be either 1 or 2 but this information is of SECONDARY importance. It is also MORE important to highlight 1 before 2. Therefore the user’s information hierarchy looks like this:

The user’s information hierarchy

Although A1 and B1 have equal importance they need to be distinguishable from each other and have more visual importance than A2 and B2.

Here are the colours that I chose:

Matching colours to the information hierarchy

My first consideration was choosing two colours that are easily distinguishable and for this purpose also accessible — meaning they are discernible to those with colour vision deficiencies (CVD). For this I used the preview modes in Adobe Illustrator which simulate different CVD but there are many tools available (QGIS has this function which is cool for map-makers). So, this gave me the colours for A and B.

Previewing the colours to ensure accessibility for CVD

I then used the saturation and brightness levels to separate the 1’s from the 2’s. This gave me the corresponding colours I required whilst making them appear LESS visually important.

In the app we then applied these colours to simple circle symbols and used a 15% transparency. We have also applied a thin outline to the circles to subtly lift them from the basemap.

I would highly recommend Colorbrewer for grabbing colour palettes and I have personally found this resource very useful recently. The colours I have used above are from the Material palette.

This is just one example of the MANY thought processes that cartographic designers go through to ensure that our maps are successful in meeting their user requirements.

Note: I first posted this on my old blog back in November 2016.

happy husband, doting dad, Everton fan, music, film & design fan, cartographic designer @OrdnanceSurvey #cartography #GeoDataViz

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade