#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 Workshops]( 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]( - [The Fundamentals of UX Writing]( UX Yuval Keshtcher. May 18–26 - [UX for Mobile eCommerce Masterclass]( UX Rinaldo Ugrina. May 23 – June 6 - [Pushing CSS to The Limit]( Dev with Amit Sheen. May 25 – June 2 - [Designing Better UX With Top Tasks]( UX with Gerry McGovern. June 1–15 - [Figma Workflow Masterclass]( UX with Christine Vallaure. July 7–22 - [Smart Interface Design Patterns]( UX with Vitaly Friedman (6h video + UX training) - [Jump to all online 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 [Northwestern: Online Master’s in 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 - [UX Designer]( at Carnegie Mellon University (Pittsburgh, PA) - [Product Designer]( at Carnegie Mellon University (Pittsburgh, PA) - [Front-End Developer]( at Studio 24 (Cambridge, UK, hybrid or remote) --------------------------------------------------------------- 10. Recent Smashing Articles - [The Modern Way To Create And Host A WordPress Site]( - [Smashing Podcast Episode 46 With Vitaly Friedman: Who Is Elliot Jay Stocks?]( - [Rethinking Server-Timing As A Critical Monitoring Tool]( - [Top Tasks: To Focus On What Matters You Must De-Focus On What Doesn’t]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](