October 10, 2023 Smashing Newsletter: Issue #426
This newsletter issue was sent out to 209,551 subscribers on Tuesday, October 10, 2023.
Editorial
It’s another exciting week here at Smashing! This time, the SmashingConf is taking place in Belgium — in Antwerp, to be exact. As always, it’s such a great pleasure meeting the 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!
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.
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?
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)
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.
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.
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.
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)
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.
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, explains cognitive biases and 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 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)
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 →
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.