May 17, 2022 Smashing Newsletter: Issue #353
This newsletter issue was sent out to 175,750 subscribers on Tuesday, May 17, 2022.
Editorial
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.
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.
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.
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.
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)
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.
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.
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 (7h 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.
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)
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.
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.
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)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.