Smashing Magazine - #462: Dashboards UX

Dashboard design patterns, designing for experts, real-life dashboard examples, UX guide for data dashboard design. Issue #462 June 25, 2024 View in the browser

Smashing Newsletter

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.

A Smashing Hour with Dave Rupert
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,

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?

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)

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.

10 rules for better dashboard design

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.

Data Dashboards UX

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.

The UX Efficient Frontier

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.

Smashing Online Events
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.

How to Design a Dashboard

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.

Smart Interface Design Patterns
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.

User Area Design — Guidance for Dashboards

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.

Are data dashboards vanity projects?

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
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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#461: Accessibility And Inclusive Design

Tuesday, June 18, 2024

EU Accessibility Act, how to make a strong case for accessibility and accessibility in design systems. Issue #461 • June 18, 2024 • View in the browser Smashing Newsletter Good morning Smashing Friends

#460: Storytelling

Tuesday, June 11, 2024

Free storytelling masterclass, how to design with product storytelling and storyboarding for designers. Issue #460 • June 11, 2024 • View in the browser Smashing Newsletter Dobra večer Smashing Friends

#459: UX Motion and Motion Design Systems

Tuesday, June 4, 2024

Motion design systems, UX motion choreography, motion audits and how to document motion. Issue #459 • June 4, 2024 • View in the browser Smashing Newsletter Kalí méra Smashing Friends, How do we design

#458: Design Systems

Monday, June 3, 2024

Design systems for healthcare, car interfaces, insurance companies, digital publications and universities. Issue #458 • May 28, 2024 • View in the browser Smashing Newsletter Dobré odpoledne Smashing

#457: Figma Organization

Tuesday, May 21, 2024

Cleaner Figma files, Figma workspace template, organization template, multi-brand Figma kit. Issue #457 • May 21, 2024 • View in the browser Smashing Newsletter Shikamoo Smashing Friends, How do you

You Might Also Like

100 Interior Photographers to Hire Now

Thursday, July 18, 2024

View in your browser | Update your preferences ADPro Ready, Set, Shoot! You've spent months—years, even!—perfecting your client's space. Now it's time to capture it for your portfolio, or (

Do this in your next PR pitch subject line...

Tuesday, July 16, 2024

Exciting announcement before we jump into subject line tips! Along with Nora, Kirsten is now also available for 1-1 consulting. Since we founded Wolf Craft, Nora has worked 1-1 with creatives to help

#465: CSS

Tuesday, July 16, 2024

CSS container queries, style queries, custom functions, native CSS mixins, inline conditionals, transition to auto. Issue #465 • July 16, 2024 • View in the browser Smashing Newsletter Grüezi Smashing

Accessibility Weekly #405: New Class Action Lawsuit against AccessiBe

Monday, July 15, 2024

July 15, 2024 • Issue #405 View this issue online or browse the full issue archive. Featured: New class action lawsuit against AccessiBe "On June 24, 2024 Tribeca Skin Care, a small skin care

Crafting a talk

Sunday, July 14, 2024

Issue 203: Developing an idea worth sharing ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility

Reflections from Config

Sunday, July 7, 2024

Issue 202: Thoughts from the annual Figma conference ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏