• 3 minute Read

Learning From Data Viz Pioneer Edward Tufte: 5 Lessons For Interface Designers

Above all else, show the data.

Learning From Data Viz Pioneer Edward Tufte: 5 Lessons For Interface Designers
Photos: Rawpixel via Shutterstock

Think about how much data you sift through on a daily basis. You might search Amazon for a new book, read the latest headlines on nytimes.com, browse Spotify for the best soundtracks, and check your wearable to see if you’ve logged enough steps–and that’s only a tiny sliver of the data that floats around the world each day. The numbers can be mind-boggling.

The solution isn’t to limit the amount of information users have access to, it’s to design interfaces that are meaningful without being overwhelming. After all, users are happy to engage with complexity if they believe the data is valuable to them.

Edward Tufte, a pioneer of modern data visualization, believes that “clutter and confusion are failures of design, not attributes of information.” In his book The Visual Display of Quantitative Information, Tufte argues that information complexity presents an opportunity for great storytelling because when designed well, “visual displays rich with data are an appropriate and proper complement to human capabilities to sort, filter, prioritize, select, edit, highlight, group, pair, focus, organize, condense, reduce, choose, abstract, isolate, cluster, aggregate, summarize, itemize, review, flip through, scan.”

Tufte wrote the book in 1983–years before interaction design became the vibrant field it is today. But his work is as relevant as ever. In it, he spelled out five design principles that provide a great foundation for how to design data-centric user interfaces today.

1. Above else, show the data.
The human capacity to make sense of and search for patterns is the key to successful data-centric design. Every screen and interaction should focus on displaying information that lets users take action or glean meaningful insights that appeal to them. Interface designers want to create compelling visual flows and narratives to help users identify relevant patterns. The content on the page needs to be structured, weighted, and prioritized in a way that helps users engage with the information. Secondary content that supports the most important data—related products, marketing information, page navigation—should be positioned and designed so that it doesn’t distract users from their primary purpose.

2. Maximize the data-ink ratio.
Tufte introduced the concept of “data-ink ratio” to explain the proportion of data-ink (the non-erasable ink in a chart that represents data points) versus non-data ink (the erasable ink that represents decorative elements such as lines, boxes, and backgrounds). Without data-ink, a graphic loses its content. He calls for a high ratio of data to ink to let the most important content take centerstage. Similarly, a data-pixel ratio defines the number of pixels used to display data divided by the total number of pixels drawn by the interface (including other UI elements and controls). Data-centric interfaces should have a high data-to-pixel ratio by dedicating the majority of interface pixels to data and avoiding unnecessary ornamentation.

3. Erase non-data ink.
Every element needs to support users in their primary goals. Any ink that is not directly related to displaying data won’t help the user and can add clutter. Sure, every interface needs elements like branding and navigation. But it’s the designer’s responsibility to ensure those elements take a backseat to the data.

4. Erase redundant data-ink (within reason).
Not all data is created equal. Just as editing an essay is an important part of the creative process, every piece of content displayed in a user interface needs to be assessed so that you’re not offering redundant information that may distract from unique data points and insights. For example, “edit” buttons in each row of a table of address book contacts provide users with a direct way to modify each entry, but they also clutter the UI. Instead, hiding edit buttons by default and showing them only when users mouse over each table row helps reduce users’ cognitive load.

5. Revise and edit.
With so many moving pieces that impact the user experience, designing and developing data-rich interfaces can be daunting. You’re never going to get it on the first try. So be open to reworking. Your users will thank you.

About the author

Heiko Waechter is a Group Experience Director at Huge with over 10 years experience in interface design and user experience for online and digital channels, producing award-winning work for some of the world's largest brands.



More Stories