Smashing Magazine - #353: Dashboards and Data Visualization

Dashboard design, better charts and how to make better decisions around data visualization. Issue #353 May 17, 2022 View in the browser 💨

Smashing Newsletter

Dear Smashing Friends,

I had a dream about a dashboard UI the other day. One of those designs with bulky yet tiny buttons that appear more like a legacy Windows application for accounting rather than an actual dashboard. Over the last years, that’s pretty much what my life has been all about: working on plenty of legacy applications that need to be transformed into beautiful digital journeys.

Soft4Doc dashboard design
A lovely dashboard design: Soft4Doc, curated for Smart Interface Design Patterns.

This isn’t easy, and it requires a lot of patience and commitment to prioritize what matters, and de-prioritize what doesn’t. Dashboards shouldn’t just display data gathered from multiple sources, but rather create an understanding of that data. And usually, this requires a healthy dose of data visualization, drill-down navigation and filters.

In this newsletter, we try to get to the bottom of this. We explore how to design and build better dashboard UIs, how to design better charts, and how to make smarter decisions around data visualization.

Later today, we’ll run a free Smashing Meets on UX Research, an online meet-up with two talks, a case study, and an interactive discussion around research. And as always, we also have plenty of lovely UX workshops happening soon, and we even have a video course on interface design patterns. We can’t wait to see you there, everyone!

Vitaly (@Smashingmag)


1. Designing Perfect Charts

Visualizations are a crucial part of any dashboard design. However, the most important part is also the trickiest one: choosing the right chart type to present your data. And while pie or donut charts are often a designer’s first choice, they might not always be ideal. Miroslava Jovicic helps you find the best chart type for your use case.

Data-heavy applications: How to design perfect charts

Drawing on her knowledge from designing data-heavy applications, Miroslava shares four questions you can ask whenever you need to choose a chart type. Depending on your answer, there are several charts that you might want to consider — from waterfall and column charts to scatter and histogram charts. Apart from helping you decide on the type of data chart, Miroslava also shares principles to make your charts even better. And if you need some design inspiration, Miroslava created a free charts UI kit for Figma, XD, and Sketch. (cm)


2. Practical Dashboard Design Tips

Dashboards need to present important data in a way that users can tell what’s going on at a glance. To get that information across quickly and efficiently, the design and layout of the dashboard become all the more important. But no worries, you don’t have to be a designer to build a great dashboard.

How to design and build a great dashboard

To help you clearly communicate key goals and metrics, the folks at Geckoboard published a checklist with 12 practical dashboard design tips — from being clear about your board’s purpose to considering data ink ratio and giving your numbers context. Handy guidelines you can follow along to achieve the results you’re looking for, no matter if you’re about to build a dashboard from scratch or have a dashboard in need of a redesign.

Another overview of useful dashboard tips comes from Adam Fard. He collected 14 dashboard UI best practices for stakeholders. They help you empathize with your users and enable you to create dashboards that solve problems with a minimal cognitive burden. (cm)


3. Storytelling In Dashboards

When talking about data visualization, there are two common categories: exploratory and explanatory data visualizations. As Susie Lu explains, in explanatory mode, you already know the outcome and can present the key points to your audience in a clear and delightful way with storytelling. However, in exploratory mode, in an interactive dashboard, for example, you usually don’t have a story but aim at making it easy for people to examine the data and come up with their own conclusions. Susie reframes this analogy and shows that, when done well, exploratory data visualizations do have a story.

Storytelling In Dashboards

In her blog post “Storytelling in Dashboards”, Susie explores why framing exploratory visualizations as a form of storytelling matters and how to design storytelling in dashboards effectively. A helpful mental model that Susie employs to improve the way we design a dashboard comes from game design: Think of dashboards as a choose-your-own-adventure story. A great read that helps us see dashboards from a new perspective. (cm)


From our sponsor

Take Your Work For Clients To New Monetary Heights

Take Your Work For Clients To New Monetary Heights
Discover how successful Wix Partner and founder of 120 Design Studio, Marshall Fox, works smart to earn five figures for the client sites he builds. In this video, Marshall covers everything from how to position your business as a premium service provider to adopting a clear marketing message. Watch Video.


4. From Good To Great

No one likes to discard parts of a design they invested hours in. But sometimes, it’s the only way to go if you want to provide real value to your users. As Adam Fard points out, this is the difference between okay and great design. The former is fairly easy to achieve. The latter isn’t.

From Good To Great In Dashboard Design

In his article “From Good to Great In Dashboard Design”, Adam compiled things he learned throughout his career with regard to dashboard design. He looks into research, decluttering, and data visualizations, as well as how these things can make your dashboard design better. A great read about finding the right balance to create a meaningful dashboard experience. (cm)


5. Upcoming Online Workshops

You might have heard it: we run online workshops around frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s an overview of our upcoming workshops:


6. UX Pattern Analysis

With a dashboard, you’re giving shape to the essence of the value your platform offers. Treat it like a spaceship cockpit; make every detail count. That’s the advice that Fanny Vassilatos and Ceara Crawshaw give to everyone who’s designing a dashboard. In their UX pattern analysis, they dive deep into dashboards and their anatomy.

UX Pattern Analysis: Data Dashboards

Fanny and Ceara explore different layout patterns, patterns for charts and graphs, as well as UX patterns for interacting with graphs — tooltips and hover states, toggling variables, filters, and personalization, for example — to help your users feel in control of what they are looking at. As Fanny and Ceara point out, dashboard design also means learning to love your data and have conversations about it with your team. That way, you’ll be able to make the right decisions and curate it appropriately. A fantastic piece of dashboard wisdom. (cm)


From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


7. The World Of Charts & Graphs

We all know pie charts, bar charts, and waterfall charts, but what about alluvial diagrams, sankey diagrams, or choropleth maps? The world of data visualization is even more diverse than one might assume. To help you find the right visualization for you project and explore rather unknown types of data visualizations, the folks at the infographic agency Ferdio created the Data Viz Project.

Data Viz Project

The Data Viz Project presents all relevant data visualizations, those you see often, just like the rather unknown ones. You can browse them by family, input, function, and shape, or just scroll through the complete list for some inspiration. Each data visualization comes with a short explanation that highlights potential use cases as well as real-world examples. One for the bookmarks. (cm)


8. From Data To Viz

You’re short on time and need support to find the right chart for your data visualization? From Data to Viz has got your back. It leads you to the most appropriate graph for your data, links to the code to build it, and lists common caveats to avoid.

From Data To Viz

The only thing you need to do is pick the main type of data you have, and a decision tree will guide you towards a set of possible options for your data and context. For each potential solution, you get an example of analysis based on real-life data using the R programming language. Handy! (cm)


9. New On Smashing Job Board


10. Recent Smashing Articles


That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!


This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#352: Front-End Tooling

Tuesday, May 10, 2022

Terminal tools, VS Code extensions, DOM events, bundle analyzer and accessible Vue.js. Issue #352 • May 10, 2022 • View in the browser 💨 Smashing Newsletter Dobryy vechir Smashing Friends, There will

#351: Interface Design Tools

Tuesday, May 3, 2022

With image clean-up tools, free icons, font utilities, accessible color palettes and image upscaling. Issue #351 • May 3, 2022 • View in the browser 💨 Smashing Newsletter Hei Smashing Friends, We all

#350: Front-End Debugging

Tuesday, April 26, 2022

With memory debugging, terminal tips, debugging strategies, DevTools and debugging tooling. Issue #350 • Apr 26, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, A few years back

#349: SVG

Tuesday, April 19, 2022

With SVG masks, SVG Grids, grainy gradients, SVG cut outs, image grids and conversion from bitmap to SVG. Issue #349: SVG • Apr 19, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing

#348: UX and Interface Design

Tuesday, April 12, 2022

On interface design, accordions, breadcrumbs, contextual menus, motion in UX and design patterns. Issue #348 • Apr 12, 2022 • View in the browser 💨 Smashing Newsletter Tâi-gí Smashing Friends,

You Might Also Like

NBA Shot Data, Inspirational Websites, Table of Contents, Navigation Redesign, AI Vocabulary

Friday, March 29, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 29 2024 A long read about NBA shot data aweebitofmapping.

The Design World’s 19 Most Beloved Travel Destinations

Thursday, March 28, 2024

Plus, designers share the AD projects that still inspire View in your browser | Update your preferences Architectural Digest AD PRO Logo WILD, WHIMSICAL MEADOW GARDENS ARE THE LANDSCAPE TREND TO WATCH

How Balsamiq uses AI

Thursday, March 28, 2024

A peek into our ChatGPT conversations ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.