#426: Data Visualization & Dashboards

Designing and building better dashboard UIs, designing better charts, and making smarter decisions around data visualization. Issue #426 • October 10, 2023 • [View in the browser]( [Smashing Newsletter]( Dear Smashing Friends, It’s another exciting week here at Smashing! This time, the SmashingConf is taking place in the Netherlands — in Antwerp, to be exact. As always, it’s such a great pleasure meeting the most friendliest attendees who all share their experiences and learn from each other. We’re sure that it’s a time that certainly won’t be easy to forget! [SmashingConf Antwerp 2023]( Oliver Schöndorfer talking about the invisible power of UI typography. [SmashingConf Antwerp 2023]( The [SmashingConf venue]( is the magnificent Bourla Theatre. In this newsletter, we dive right into the complex world of data visualization: We explore how to design and build better dashboard UIs, how to design better charts, and how to make smarter decisions around data visualization. Stay creative and see you around! — Iris LjeÅ¡njanin (Senior Editor) --------------------------------------------------------------- 1. Financial Times Visual Vocabulary Violins, doughnuts, pies, slopes — data can be visualized in many ways. But which type of chart should you pick? To help you select the optimal visualization type for your data, the Financial Times Visual Journalism Team published the [Financial Times Visual Vocabulary](. [Financial Times Visual Vocabulary]( Available as a [poster]( and [website]( FT Visual Vocabulary summarizes the characteristics of nine different types of data relationships and the charts that can be used to tell their stories. The poster is available in English, Japanese, traditional Chinese, and simplified Chinese. A useful starting point for making informed and meaningful data visualizations. (cm) --------------------------------------------------------------- 2. Dashboard Design Patterns When designing a dashboard, you want it to present complex data sets at a glance. But what does effective dashboard design look like? How do you find the balance between displaying everything important and ensuring the dashboard is easy to use without overwhelming the user? [Dashboard Design Patterns]( The interdisciplinary research lab VisHub at the University of Edinburgh published a set of [dashboard design patterns]( to support the design and creative exploration of dashboard design. It dives deeper into every aspect of dashboards — from components and meta information to visual representation, interaction, page layout, and color. A [cheatsheet]( summarizes all the patterns on one page. (cm) --------------------------------------------------------------- From our sponsor Monitor Site Speed And Core Web Vitals [Debugbear]( Optimize web performance to improve user experience and rank higher in Google. [Get set up in minutes]( --------------------------------------------------------------- 3. How To Design A Dashboard Another handy companion on all your dashboard design adventures is Matt David’s free web book [How to Design a Dashboard](. It takes you through the complete process of defining, prototyping, building, and deploying a dashboard that supports decision-making. [How to Design a Dashboard]( In the book, Matt explores which metrics to monitor and how to arrange your visualizations to maximize understanding. Common pitfalls of deploying dashboards are also covered, just like tips for scaling your dashboards and improving usability and performance based on feedback from your audience. A comprehensive guide to dashboard design, no matter if you’re about to design your first dashboard or plan to enhance an existing one. (cm) --------------------------------------------------------------- 4. Upcoming Workshops and Conferences That’s right! We run [online workshops on frontend and design]( be it accessibility, performance, or design patterns. 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 a quick overview: - [Typography Masterclass]( UX with Elliot Jay Stocks. Oct 16–30 - [Strategizing Products and Customer Experiences]( UX with Debbie Levitt. Oct 18–26 - [Design KPIs Masterclass]( UX with Vitaly Friedman. Oct 31 – Nov 8 - [Accessibility for Designers]( UX with Stéphanie Walter. Nov 6–15 - [Smart Interface Design Patterns Video Course]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 5. User Testing Data Visualizations Do you test your data visualizations with real users before deploying them? The data, design, and analytics consulting firm 3iap argues that even the tiniest design elements can unexpectedly impact users’ mental models and cause confusion. To prevent your graphs and charts from being misinterpreted, they share [five simple questions]( you can ask users to validate your data visualizations. [Crucial questions to ask when user testing data visualizations]( The questions help you determine if the visualization communicates what you think it does, ensure that users understand the conclusions, and check if it nudges them toward a specific course of action. No worries, you don’t have to test with many users to gain valuable insights. As 3iap points out, the answers of only a handful of participants can help you better relate to your audience and, ultimately, make your work more understandable and impactful. (cm) --------------------------------------------------------------- From our sponsor Master Composable Web Architectures [Storyblok]( Dive into O’Reilly’s new report by Stefan Baumgartner, author of “TypeScript in 50 Lessons” and explore frontend composability, serverless backends & modular design. Available for free, courtesy of Storyblok, the beloved CMS committed to providing resources that empower you. [Download the O’Reilly Report today](. --------------------------------------------------------------- 6. Preventing Bias And Mistakes As objective as data might be, there’s a human factor that is easily overseen when it comes to crafting visualizations that accurately reflect it: bias and misunderstandings. Having worked with students and postdocs on thousands of data visualizations over the years, Claus O. Wilke, Professor of Integrative Biology, knows from experience that the same issues arise over and over when it comes to visualizing data. [Fundamentals of Data Visualization]( In his book [Fundamentals of Data Visualization]( he collected his accumulated knowledge from these interactions to help everyone create clear, attractive, and convincing data visualizations. You can read the complete manuscript for free on the [author’s website](. If you want to dive deeper into biases and the mistakes that people often make when analyzing data, Matt David’s free web book [Avoid Misrepresenting Data]( is another fantastic read. It provides guidance on how to avoid costly mistakes, explaining cognitive biases, analysis mistakes, and how to accurately interpret trends and predict and review outcomes. (cm) --------------------------------------------------------------- 7. React Data Visualization Framework If you’re working with React and want to visualize data, the data visualization framework [Semiotic]( is worth taking a closer look at. Created by Elijah Meeks, it offers several frame types to deploy a wide variety of charts. [Semiotic]( Semiotic covers frames for XY data (i.e., classical line charts and scatterplots), frames for categorical data (think bar charts, violin plots, and parallel coordinates), and frames for topological and network data, including flow diagrams, network visualization, and hierarchical views. Interactive examples and guides teach you more about the framework’s flexibility and power. A handy little helper. (cm) --------------------------------------------------------------- From our sponsor The World Of Composable Web Architecture Comes Together At Netlify Compose 2023 [Netlify ComposeConf]( Developers at businesses of all sizes are turning to composable web architecture for unmatched agility, speed, and efficiency. Compose 2023 gathers a diverse ecosystem of technology decision-makers, developers, engineers and more, to shape the path towards a modern, composable future of the web. [Join in person or virtually]( --------------------------------------------------------------- 8. News From The Smashing Library 📚 Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as [printed books](. Have you checked them out already? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Check out all books →]( [Success At Scale]( … and we’re currently working on a new book: [Success At Scale]( shipping in fall. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 9. Recent Smashing Articles - [A High-Level Overview Of Large Language Model Concepts, Use Cases, And Tools]( - [Gatsby Headaches: Working With Media (Part 1)]( - [Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 2)]( - [The Problem With WordPress Is Positioning, Not Plugins]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- 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](