UX and dataviz should talk more – Graph | Plot | Chart

Here’s a UX and dataviz question for you. Without moving your cursor (or touching on a mobile device) can you tell what will happen in the map below if you do either of these things?

Select a legend item
Select a country

Code

library("GPCDStools")
library("tidyverse")
library("plotly")
library("sf")
library("rnaturalearthdata")

lh_drive_countries <- read_csv(quarto_here("left-hand-drive-countries.csv"))

countries_drive_side <- countries110 |> 
  st_as_sf() |> 
  mutate(iso_n3 = as.numeric(iso_n3)) |> 
  mutate(side_of_road = if_else(iso_n3 %in% lh_drive_countries$iso_3n,
                                "Drive on left",
                                "Drive on right"))

gg_drive_side <- ggplot() +
  geom_sf(data = countries_drive_side,
          aes(fill = side_of_road,
              text = name_en)) +
  scale_fill_discrete(name = "") +
  theme_void(paper = cols_gpcds$neutral, base_size = 28) +
  theme(panel.background = element_rect(fill = cols_gpcds$neutral),
        legend.position = "top")

gg_drive_side |> 
  ggplotly() |> 
  layout(legend = list(
      orientation = "h", # Horizontal orientation
      xanchor = "center", # Center the legend box
      x = 0.5,            # Position the center of the legend box at the middle of the x-axis
      y = 1.1             # Position the top of the legend box above the plot area
    ))

Almost all of the interactive dataviz tools we use at GPCDS have functional legends. In this example, clicking a series removes it. That’s cool. But did you know that before we asked (or tried)? Probably not. Most of our clients and students don’t realise it either.

Vitaly Friedman was kind enough to mention us in a list of UX voices yesterday. We love UX. We love dataviz. And we wish those gals talked more.

Our founder Charlotte Hadley worked as an RSE specialising in interactive dataviz and she found a huge divide between how academics built webpages with dataviz:

Social scientists and humanities researchers would write a treatise about the interactivity of the dataviz above the chart/map/network. Users would have to scroll through paragraphs to get to the chart and many left the page not knowing there was a dataviz.
Researcher in other divisions just put the dataviz. No description.

Neither approach helped. The elements of the dataviz just don’t have affordances.

Affordances suggest how a user can interact with an element. The Interaction Design Foundantion has an incredible article on affordances, including this lovely quotation.

“When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction needed.”

Don Norman, Grand Old Man of User Experience

We have a suspicion about why affordances for these elements aren’t often seen. There’s been such a drive for decluttering and reducing the data-to-ink ratio that it can feel weird to add something to the legend that suggests “click me”.

There’s a lot more in the New Year we’ll be writing up about UX and dataviz. But we wanted to take a quick moment to thank Vitaly for recommending following us on LinkedIn and afford affordances a brief discussion.

Oh. Antarctica might not have a “drive on the right” law but functionally it’s a drive on the right country.