Manuia le afiafi Smashing Friends,
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.
This community event is free for all. Get your free ticket.
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:
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 the 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)
From our sponsor
Transform Your Workflow With A Fully Integrated Form Management Platform. Build Better Forms, Faster.
Discover SurveyJS, an open-source JavaScript library suite for secure form creation and data collection in your application. Build enterprise-grade JSON-driven surveys and forms quickly and without manual coding. Collect and store responses while retaining full control over your data. Integrate with any backend system. Start with the free, full-featured demo.
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.
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:
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 them.
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)
From our sponsor
Join The Public Beta Of The Storyblok Ideation Room!
Bring your ideas to life in Storyblok! Create content with AI and connect your ideas to your stories effortlessly. Join the public beta of the Ideation Room for free and start drafting your ideas directly within Storyblok. Try the beta now!
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.
Meet Smart Interface Design Patterns, our friendly and practical video course on UX and design patterns, with Vitaly Friedman.
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 that 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?
It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.
11. Recent Smashing Articles
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
