June 25, 2024 Smashing Newsletter: Issue #462
This newsletter issue was sent out to 199,827 subscribers on Tuesday, June 25, 2024.
Editorial
Dashboards aren’t easy to design. They come with data, filters, customization options, presets, permissions, roles, and 3rd-party widgets. Plus, they must deliver insights to expert users, who are often skilled in a complex and obscure domain.
In this newsletter, we explore how to design dashboards — with design patterns, examples of real-life dashboards, and design guides. If you’d like to dive deeper, we’ll run a full-day workshop on Practical Charts Masterclass at our lovely SmashingConf Antwerp 🍫 later this year.
Ah, don’t forget to tune into our Smashing Hour today where Geoff Graham spends a full hour with Dave Rupert, speaking on front-end and web components, among many things!
In the upcoming weeks and months, we have a few friendly events coming up, and perhaps you’d love to join in as well:
- SmashingConf Freiburg 2024 🇩🇪 — The Web, Sep 9–11
- SmashingConf NY 2024 🇺🇸 — Front-End & UX, Oct 7–10
- SmashingConf Antwerp 2024 🇧🇪 — Design/UX, Oct 28–31
That’s it! Thank you so much for your kind and ongoing support, everyone — we hope to see you this year!
Sending a lot of positive vibes your way,
— Vitaly
1. 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)
2. Better Dashboard UX
Simple dashboards that offer an at-a-glance preview of the most critical information and an easy way to navigate directly to various areas of the application are often considered ideal. However, they are quite challenging to build. Drawing on his experience from working on enterprise projects and designing countless dashboards, Taras Bakusevych put together a guide to help you master the challenge.
In the guide, Taras summarized ten practical rules that you can follow to build better dashboards — no matter if it’s your first dashboard or if you already have some experience. You’ll learn how to define the purpose of your dashboard, choose the right representation for the data, define the structure, work with multiple widgets, and more. (cm)
3. Data Dashboards Benchmarking
When it comes to data, the real challenge doesn’t lie in gathering it but in deriving meaningful insights from it. To find out what makes a great dashboard UX, the team at Creative Navy analyzed several data visualization tools, among them highly-customizable multi-purpose software like Grafana, SEO platforms like Semrush, and template-based tools like Looker Studio.
Apart from highlighting design patterns that work well, Creative Navy also points out what could be improved in each tool. To provide actionable tips for anyone working on a dashboard, they conclude their analysis with a list of must-have features, nice-to-have features, and common UX challenges to watch out for. Fantastic insights into real-world dashboard UX. (cm)
4. The UX Efficient Frontier
Imagine you want to book a train ticket. As a customer, you’ll want the simplest experience possible. But if you’re an employee of the railway company who uses the booking interface all day, you need a lot more information than a customer. ‘Simple’ won’t cut it for you. You need a product tailored to your specific professional usage.
So how can designers find the sweet spot between not too simple and not too complicated? Morgane Peng introduces a strategy that helps you design relevant products while taking people’s business and interface expertise into account: the UX Efficient Frontier. A great reminder that ‘efficient’ is not always simple and ‘simple’ is not always efficient. (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:
- Design Patterns For AI Interfaces ux
with Vitaly Friedman. July 9–23 - Fast and Budget-Friendly User Research and Testing workflow
with Paul Boag. Jul 11–25 - Behavioral Design Workshop UX
with Susan and Guthrie Weinschenk. Aug 22 – Sept 5 - Creating and Maintaining Successful Design Systems workflow
with Brad Frost. Aug 27 – Sept 10 - Jump to all workshops →
6. How To Design A Dashboard
Business Intelligence tools have made it easy to create visualizations and dashboards. However, as tempting as it might be, if you skip crucial steps like defining the problem and prototyping ideal designs, you risk the dashboard being ineffective for the people who use it.
In his free web book How to Design a Dashboard, Matt David explores how you can use design thinking to create highly impactful dashboards. He introduces you to what dashboards are and what makes them useful and shares best practices for dashboard design. The bulk of the book guides you through the design thinking process for dashboards, along with resources and examples to aid you at every step of the process. (cm)
7. Smart Interface Design Patterns
Recently, we’ve finally launched “Smart Interface Design Patterns”, a 10h-video course with Vitaly Friedman, focused on fine little details that make for better interface design. In the course, you’ll explore 100s of hand-picked examples. With 35 lessons available today, and more added every few months. Check the free preview.
The course is created specifically for product designers and UI engineers who’d love to be prepared for complex UI/UX challenges. And if you’d like to dive even deeper, there is a live UX training with UX certification that happens twice a year. There are some happy-bird-tickets left. Jump to the details.
8. Guidance For Dashboards
Whether you’re a novice designer about to work on your first dashboard or an experienced designer who wants to improve their dashboard design skills, the folks at Creative Navy wrote a comprehensive dashboard design guide that has got your back.
The guide covers everything from where to start when designing a dashboard to setting goals and painting a clear picture of what you are trying to achieve with the dashboard. It also looks into common design challenges you might face, how to solve them, and best practices for different types of dashboards. (cm)
9. Do You Even Need A Dashboard?
Dashboards and data visualizations are everywhere, showing us everything from our weekly phone usage to monthly spending and performance at work. And while they are usually considered intuitive, dashboards and data visualizations are often ineffective in conveying clear, actionable insight.
Irina Wagner came to the conclusion that many dashboards aren’t even usable to most people. She argues that certain user profiles, such as data scientists, field scientists, researchers, and medical professionals, possess the data literacy needed to interpret data visualizations. Still, most B2B and B2C users lack such proficiency.
So, instead of relying on dashboards for the general audience, it might be a better idea to explore automation and AI technologies to bridge the data literacy gap, as Irina suggests. A thought-provoking perspective on a hot topic. (cm)
10. Recently Published Books 📚
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?
- Success at Scale by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- 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
Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁
You can always unsubscribe with just one click.
Previous Issues
- Data Visualization
- Dashboards
- Accessibility
- Storytelling
- UX Motion
- Design Systems
- Figma Organization
- How To Name Things
- CSS
- JavaScript
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.