Matching visual hierarchy to information hierarchy

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:

info-hierarchy
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:

colour-hierarchy
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.

cvd-filters
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 use an 15% transparency. We have also applied a thin outline to the circle symbols to subtly lift them from the basemap.

pie-chart-clustering

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s