Affordances and Signifiers: applying design theory to your dashboards

When designing objects, be they hotel room taps/faucets, iPhones, or cars, the creators grapple with the concepts of affordances and signifiers. These terms were introduced into design by Don Norman, author of The Design of Everyday Things, based on earlier work by JJ Gibson.

What are these and how can we apply them to our dashboard design?

  • An affordance is something an object (or dashboard) can do. A tap/faucet can run hot or cold water, for example.
  • A signifier is an indicator of some sort. In our tap example, this might be red/blue dots signifying which way to turn the tap to get hot or cold water.

How many times have you tried to use a tap in a bathroom and not known which way to turn it for hot or cold? This is a frustration of modern life: apparently a sleek design is more important than signifying (red/blue) the affordance (hot/cold).

Dashboards have affordances and signifiers. How you implement them will influence their success. Let’s use an example. I’m going to use an excellent dashboard by Eric Brown. It allows you to compare gestation periods of different animals.

Let’s play a game. Here are the rules: take a look at Eric’s dashboard and, without using your mouse, identify all the ways in which you can interact with the dashboard?

Click here for the interactive version. Creidt: Eric Brown

How many did you count?

There are eight intentional affordances Eric built into this dashboard. Did you spot them all?

How many of those eight affordances have a signifier?

Here are the affordances:

8 affordances (there are further affordances in the tooltips)
  • 1, 5 and 6 are drop down filters. Drop-downs are a staple of interacting with dashboards, and web pages. But why put the three filters in different places?
  • 2, the light bulb, is a hover-help tooltip. Hover over the light bulb and you see a description explaining how the compatibility score is calculated. That’s great if you’re familiar with the “hover-for-help” trope, but if you’re not, then, well, it’s just a light-bulb. How would you know it contains an explanation?
  • 3 and 4 allow you to click on the animal to highlight it in the scatterplot and see more details.
  • 7 is the colour legend. If you click on one of the colours, it highlights all animals in the scatterplot in that category. Does the dashboard tell you you can click on the legend?
  • 8 allows you to click and see the datasources.
  • Note – did some of y ou think you could click on the silhouettes of the whales in the top right? If you’re a Tableau expert, you might have thought you could. But, no, that is just a legend. It has no interactivity.

That’s a lot of stuff you can do with this dashboard. But only some have signifiers.

We could solve the problem by ensuring every affordance has a signifier. Here’s what that could look like:

All the affordances!

Here are the main changes I made:

  1. Move all drop-down filters into one place
  2. Added instructional text to the scatterplot and colour legend
  3. Removed the hover-help tooltip and placed the calculation explanation in the bottom right, above the data source links

I could now claim to have fixed the “problems” with Eric’s dashboard. Anyone now coming to the dashboard with no prior training in it, or dashboards in general, now has a signifier for every affordance. If they invest the time in reading the dashboard, they will be able to interact fully.

Should I always create a visible signifier for every affordance?

No. Sometimes you are designing dashboards for an internal audience. They may be familiar with dashboard interaction, or you can train them. In which case you could remove the signifiers.

The thing you need to do when designing a dashboard is consider your audience, and how you can communicate to them that they can interact with the dashboard. Skilled users know to click and experiment, or can be trained to do so. New users don’t have that knowledge or confidence. Your job is to make these decisions consciously, not by accident.

Although this example isn’t in my upcoming book, The Big Book of Dashboards is pakced full of successful dashboard designs and tips. Sign up for details here.

Note: Eric’s dashboard is excellent, it looks super and is a pleasure to explore. He’s graciously given me permission to use in this post, and I thank him for that. 

Visual Design Tricks Behind Great Dashboards

At the Tableau Customer Conference this week, I did a session entitled “The Visual Design Tricks Behind Great Dashboards”.

You can watch the recording here. (registration required)

Here are the resources I shared.

Design Tricks

seasonality-in-us-road-fatalities

For all the design tricks, including the impact/difficulty breakdown, check out my Design Month posts.

Books

Visualizations referred to in the talk

both

I hope you enjoyed the session! What other design tricks would you add?

 

Do you have a world class dashboard? Want to share it?

BBD image
I’m delighted to announce I am working on a book: The Big Book of Dashboards will be published by Wiley later this year. I’m co-authoring with Steve Wexler and Jeff Shaffer.

The book will be a compendium of real-world dashboards, each a valuable solution to real-world problems. There will be sections on the real world challenges faced when building and maintaining dashboards.

So where do we get these amazing examples from? Why, the community, of course! Do YOU have an amazing, world-class, beautiful, high impact, dashboard? If so, we want to hear from you.

Please use the form below to tell us about it. If we like what we see, we’ll get in touch to discuss the dashboard in more details with you. If it has sensitive data, you will need to be prepared to share it with anonymised data.

Your dashboards don’t have to be in Tableau!