Interfaces for data presentation: the influence of design principles on our perceptions of data

Interfaces built to explore, visualise or otherwise present data are often our first encounter with datasets.

Bringing together diverse data sources to tell a story involves design choices that control how a person will receive and interact with the underlying data.

When people think about presenting data, their thoughts will typically, and perhaps correctly, jump to the type of chart they could choose - whether to use line or area charts, where to place their legend or how many bins to use on the bottom axis. But interfaces - whether they are just simple spaces where charts live or more fully fledged dynamic platforms - also influence how we perceive data.

Features like date filters or toggle switches provide the interactivity that exposes different data scales and can control the shape of the data story presented to us. More than this, the design choices we make when creating interfaces to explore data have explicit or implicit influences on how people interpret that data.

What are design heuristics and why are they useful for presenting data?

Interface design is largely governed by a set of design principles, also known as heuristics. One of the most famous sets of heuristics was first established by Danish usability expert Jakob Nielsen in 1994 and influences practically all of the computer systems that we interact with daily. Nielsen’s set of 10 Design Heuristics established a set of conventions for designers to follow, ensuring that the interface they create is not abstract but usable and accessible.

Figure 1: Jakob Nielsen’s 10 Usability Heuristics for Interface Design

Consider the freedom a user should have to explore data

Nielsen’s 3rd Heuristic: User Control & Freedom

Building a chart that allows users to switch the variables presented on the y axis is a nice idea, but this might disguise key data narratives. We can imagine a scenario where adding this flexibility into the system might result in the user plotting primary keys on the top axis instead of the significant variable we want them to see.

The amount of control that a user has to interact with a data visualisation should ultimately depend on the richness of the dataset itself - is it appropriate for the user to find their own story in the data or is it better to tell them a specific story?

Control and freedom are directly related to the components we choose to add to data interfaces. Adding a date filter to a time-series chart allows a user to see data stories from different scales. A close-up range of the last two days might be very appropriate for a monitoring service, whilst a long view of historic records might be more beneficial for research purposes.

Figure 2: a set of components that add interactivity to web interfaces built to explore data.

But with each component we add, we increase the complexity of the system and, as a result, potentially broaden the gap between the user’s mental model of how the system works and the way the system actually works.

Design aesthetic and minimalistic ways to explore data

Nielsen’s 8th Heuristic: Aesthetic & Minimalist Design

Uncluttered layouts help us to digest information in logical and coherent ways. This principle is as relevant to the design of a lamp as it is to the design of an interactive bar chart.

If I buy a highly decorated, ornate lamp take it home and try to turn it on - only to find that it has so many branches and spirals that it continuously falls over - I’m going to struggle to use it. The same thing is true of my bar chart. If the button I need to add another bar is hidden amongst a multitude of other buttons - each with different functionality - it will be very difficult to quickly achieve the chart’s desired purpose.

Figure 3: two identical bar charts with differing sets of buttons for interactivity.

Aesthetic and minimalist design does not only have a cosmetic value for interfaces but also a very practical one. The presentation of features on our interface - or the presentation of elements inside our visualisations - forces us to decide the importance of the different data stories that we want users to interact with.

Make data interfaces more efficient to use

Nielsen’s 7th Heuristic: Efficiency of Use

An important part of building efficient ways to explore data involves the number of clicks as well as the ease of clicks that have to take place before a user can see the visualisation they are trying to get.

Aside from useless clicks, interface designers can put pop-ups or filters in place that are valuable in helping the user. But it isn’t always the case that a user would recognise this value. Data designers should consider how they can present something - a key narrative - to the user immediately, without requiring interaction. This approach might mean displaying search bars on top of visualisations - rather than on separate pages - while presenting a broad fitting narrative inside the visualisation until further interaction takes place.

Design choices can and should make it faster for us to find the information we seek.

Representing hierarchy between data sources

Presenting data from multiple sources inside a single interface forces designers to make choices about the significance of one source over another.

During the design of a dashboard platform to present data generated by citizens and official sources for the UBDC’s Waterproofing Data project, a question arose regarding the different types of citizens generating flood-related data submissions. Some of these people were part of climate response teams, and others were regular citizens with no occupational relation or knowledge of submitting this type of data observation.

All datasets are equal, but some datasets are more equal than others.

Our current design provided no visual way to distinguish between these two categories of citizens. People with climatology experience were potentially more dependable than other citizens and likely to provide more insightful data submissions. In not acknowledging this, was the interface denying the user valuable information that would help them drill through noisy data and find truthful signals?

Representing this hierarchy inside the platform comes down to the methods and tools chosen by the designer. An extreme option might involve hiding traditional submissions by default - forcing the user to turn them on; this might significantly impact the level of respect given to hidden citizen submissions. By contrast, no differentiation means that the interface places equal importance on both submission categories.

A compromise would be to add a subtle change to the icon used for a submission from those with climatology experience to indicate that the person submitting the data is more of an ‘approved’ source.

Figure 4: two designs for representing icons on the Waterproofing Data project’s maps.

Style choices affect our perception of a dataset’s complexity

The choice of styles and features used to present data will help to form a person’s perception of that dataset’s complexity. Even the tool used to build or generate a chart has embedded within it a design system built for a specific purpose. Visualisations built using Python packages such as Matplotlib or Seaborn belong to the realm of data science and are equipped to satisfy analysis requiring box plots or representations of standard deviation. Whereas those created with tools like Datawrapper are simpler, cleaner and more appropriate for news reading audiences.

The inclusions of scientific terms, workings or methodology inside charts as well as some font and typography choices will create an impression of complexity.

Designing a platform to present data from the UBDC’s CCTV object detection project involved translating a series of research-specific visualisations created using R for a web platform aimed at a wider public audience. Higher levels of complexity can be desirable inside scholarly communication but suddenly become overwhelming to people approaching the same data inside a web platform - not least because of the amount of attention a person is willing to devote to charts inside an academic paper versus a web interface.

Figure 5: two visualisations of the UBDC’s CCTV Object Detection dataset varying in style and context.

Rather than presenting multiple narratives simultaneously, our design for the web interface seeks to hide these levels of complexity behind interface features that allow users to explore narratives in the dataset. This approach gives them authority and should be easier to comprehend outside a research context.

Design principles are crucial

Moving from written to visual communication of data inside user interfaces means that design principles become crucial to delivering our story, argument or research goals. As creators of interfaces used to explore data, we can apply interface heuristics to data visualisation to help control the different scales of data stories we present to our users. But as readers of interfaces used to present data, we can think critically about the presentation of features on our screens. Pausing to consider the tools available to us to manipulate the underlying data or support our exploration helps us understand the narratives that the creator wants us to see.

Andy Clarke

As a Data Scientist, Andy works on building clear, engaging ways to present and tell stories with data. He is responsible for the design and development of data visualisations, charts and dashboards to complement the Urban Big Data Centre’s research projects and data services.