Smashing Newsletter: Issue #517

Editorial

How do we design complex products? What design patterns do we use? The domain might be very complex, stakeholders want to see more data, legacy is impossible to manage, and there are layers and layers of content, navigation, poor metadata, and very little attention to usability and accessibility.

In this newsletter, we shed some light on some of the design challenges product teams are facing today — on designing better conversational experiences, dashboards, AI interfaces, complex navigation, and spatial experiences.

On Wednesday, we’re launching Christine’s wonderful workshop on Figma Workflow Masterclass and later this year, we also have more workshops and conferences coming up. We’d love to meet you and your wonderful team there!

In the meantime, wishing you a truly wonderful rest of the week — with a bit less stress, and a bit more time for yourself and your loved ones. And thank you so much for staying around and reading these very words!

— Vitaly

1. Conversational Design

How do we design better conversations between users and products or services? So that every interaction feels natural, helpful, and respectful? Conversational Design is a wonderful free practical guide on just that, beautifully written and kindly shared by Erika Hall.

One of the points that Erika brings up is to spend more time listening to users’ language — how they speak, how they call product’s features, how they talk about their typical day and their typical tasks. And then pull out all the nouns and verbs to understand what customers actually do, and the words they use to describe what they do. We can then use these notes as a reference for labels and phrases for actions.

And then we write the interface — as storyframes. By starting to design in a text editor. By using the right words and imagining how we would explain a product to a friend, in a conversation, or in an email. In its essence, that’s the start of a conversational design. Erika’s book is a fantastic reference on designing better conversations, but also better digital experiences. (vf)

2. Design Patterns For AI Interfaces

So you need to design a new AI feature for your product. Does it have to be an AI chat, and if so, how would you choose the right layout and composition for input, output, and refinement journeys? In our recent article on Design Patterns For AI Interfaces, Vitaly has highlighted a few useful guidelines to keep in mind when designing better AI experiences.

And if you are looking for specific suggestions on layout and composition, Sharang Sharma has published a wonderful overview with a map of emerging AI UI patterns and real-life examples of each — from AI chatbots and side panels to semantic grids and infinite canvases. A helpful reference to keep nearby! (vf)

3. 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)

4. Your vs. My

Pronouns and punctuation might appear like a small thing, but they shape user’s relationship with your products. “My drafts” suggests a higher degree of ownership, and “Your drafts” suggests that an assistant is speaking to a user. And of course, we could also use simple, neutral “Drafts” as a label, too. So which do we choose?

To decide on the right pronoun, Diana MacDonald suggests to ask “Who else is in the room?” If there’s no one except the user (settings), we skip the pronoun. If the product is talking to the user (onboarding), we use “Your presets”. If the user is talking to the product (buttons), we use “my”, e.g., “Save my draft”.

In general, “My” works for user-created content, actions, and preferences. For example, for personal inbox, dashboard, delivery orders, and purchases. And “Your” works best for system-initiated content for a user, such as onboarding, instructions, buttons, error messages, and labels. Just don’t misrepresent the system’s decisions as the user’s decisions. A helpful reminder for never-ending design discussions! (vf)

5. Upcoming Workshops and Conferences

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:

Figma Workflow Masterclass Design
with Christine Vallaure. July 23–29
Building Interactive, Accessible Components with Modern CSS & JS Dev
with Stephanie Eckles. Aug 18–27
UX Strategy Masterclass UX
with Vitaly Friedman. Aug 20–29
Accessible Typography for Web & UI Design Masterclass Design
with Oliver Schöndorfer. Sep 11–19
Dataviz Accessibility Workshop Dev
with Sarah L. Fossheim. Sep 22 – Oct 6
Behavioral Design Workshop UX
with Susan and Guthrie Weinschenk. Sep 18 – Oct 3
Smart Interface Design Patterns 🍣 UX
with Vitaly Friedman. Video course + UX training.
How To Measure UX 🍎 UX
with Vitaly Friedman. Video course + UX training.
Jump to all workshops →

6. Top. vs Side

So you need to organize a 3-level navigation menu for a complex product. Do you break it apart into top navigation and side navigation? How do you make that decision? Fortunately, in his article on Top vs. Side Navigation, Taras Bakusevych provides some guidance and some ideas.

People often use relatively wide displays, and with it comes limited vertical space and an abundance of horizontal space. Side navigation shows more relevant options at once, and vertical scanning is easier and faster. But expanded side nav takes a lot of space, so it must be collapsible.

Top navigation, on the other hand, eventually runs out of space (“More”) and doesn’t scale well. Side navigation works better for many top-level items and tree/folder structures, but top navigation works when users perform only a small number of tasks and rarely navigate between sections. A helpful overview that will save a headache every now and again! (vf)

7. Design Patterns For Mental Health

Asking for help is difficult. It makes us feel scared, vulnerable, and uncomfortable. But it is also a sign of strength and bravery. The world is challenging and difficult and unfair and not fully knowable. And getting through it alone can be painful and overwhelming. And our digital products must support people at times when they need our help the most.

Design Patterns For Mental Health is a growing library of design patterns for people involved in developing and delivering digital mental health support. It features examples and principles of how to help people feel safe in engaging and expressing themselves, and why we need to suspend assumptions on what users want or need.

We’ve also put together a few useful resources around designing for mental health which hopefully will give you some good starting points as well. (vf)

8. Spider Metro Map

Finding the closest subway near a particular location can be an exercise in patience. Walking distance and the straight-line distance (Euclidean distance) are vastly different, and sometimes you might have a construction going on, but you are late for a meeting.

Spider Metro Map Carlos Enrique Vázquez Juárez is a helpful design pattern to help users estimate how far they are from the five nearest stations and get a rough idea of travel distance. Lior Steinberg has built a live demo and a GitHub repo that you can apply to your project right away.

Just a helpful little pattern to choose a place to stay, and would be lovely to see labels and filters indicating time to reach the station by foot or by bike. (vf)

9. Meet Accessible UX Research, A Brand-New Smashing Book 📚

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. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”

“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print shipping in August, eBook available for download later this summer. Pre-order the book, and save off the full price.

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

July 22, 2025 Smashing Newsletter: Issue #517

Previous Issues