29:I[56264,["/_next/static/chunks/3fntmmi971322.js","/_next/static/chunks/1ymt1shyhmu-4.js","/_next/static/chunks/291ciwmgtp_xc.js","/_next/static/chunks/2owa30hnifmhr.js","/_next/static/chunks/2tie5rqwdsi89.js","/_next/static/chunks/2dnipz2c0692b.js","/_next/static/chunks/1mf5iq195c2sn.js","/_next/static/chunks/03wn0-bzh3abk.js","/_next/static/chunks/0_02m0ghanddv.js"],"GuestHistoryRecorder"] 2a:I[3004,["/_next/static/chunks/3fntmmi971322.js","/_next/static/chunks/1ymt1shyhmu-4.js","/_next/static/chunks/291ciwmgtp_xc.js","/_next/static/chunks/2owa30hnifmhr.js","/_next/static/chunks/2tie5rqwdsi89.js","/_next/static/chunks/2dnipz2c0692b.js","/_next/static/chunks/1mf5iq195c2sn.js","/_next/static/chunks/03wn0-bzh3abk.js","/_next/static/chunks/0_02m0ghanddv.js"],"EmailPreview"] 2d:I[27201,["/_next/static/chunks/3fntmmi971322.js","/_next/static/chunks/1ymt1shyhmu-4.js","/_next/static/chunks/291ciwmgtp_xc.js","/_next/static/chunks/2owa30hnifmhr.js"],"IconMark"] 2b:Tfad0, Smashing Newsletter

Issue #577 • Sep 22, 2026 • View in the browser

Hola Smashing Friends,

Design patterns are often perceived as off-the-shelf solutions, but they are a great conversation starter to avoid starting from scratch every single time. In this newsletter, we look at just that — from contextual menus and nested tables to patterns for designing for mental health.

And if you’d like to take some of those conversations further, we have plenty coming up! There are new upcoming online workshops, including two happening this week:

Figma Workflow Masterclass Design
with Christine Vallaure. Sep 23–29
Live Accessibility Testing Free!
with Manuel Matuzović. Sep 24

There are more workshops planned throughout October, covering many practical topics to help you sharpen your skills, explore new approaches and learn with designers:

Resilient & Maintainable CSS Dev
with Miriam Suzanne. Oct 1–15
Designing Websites That Convert UX
with Paul Boag. Oct 7
Accessible Frontend Patterns Dev
with Manuel Matuzović. Oct 12 – Nov 2
How To Measure UX And Design Impact UX
with Vitaly Friedman. Oct 20 – Nov 3
Building Modern HTML Emails Dev
with Rémi Parmentier. Oct 26 –29
Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. Nov 9–23
Design Patterns For AI Interfaces + video course UX
with Vitaly Friedman. Nov 16–24
AI-Ready Design Systems UX
with Christine Vallaure. Nov 30–Dec 4
Jump to all workshops →

We hope to see you there!

— Vitaly

1. Voice AI UX Patterns

From avatar calls to voice-augmented chat, voice-to-text dictation, and co-pilot transcripts, AI has unlocked new use cases and interaction patterns for voice. Sharang Sharma explores emerging Voice AI UX patterns, the perceived role of the AI agent within each, and the key design decisions and limitations that shape them.

For more AI patterns, experiments, ideas, and tools also be sure to check out Sharang’s site AgenticPath.

2. Design Patterns For Mental Health

Mental health and wellbeing apps have seen a boom in recent years. If you’re involved in developing, designing, or delivering mental health products or services, The Mental Health Patterns Library is for you. Designed to encourage best practices in the field, it shares principles, patterns, and examples that help you ensure your mental health digital services work for people.

3. Better Context Menus

Most web and desktop-based applications offer context menus, i.e. the “pop up” menu when you right click with your mouse. The team at Linear added an invisible detail to their context menu that makes the interaction faster and more intuitive: a React component creates a safe area where the mouse can move along the shortest path without triggering the sub-menu to close. Andreas Eldh explains in detail how it works.

A different solution to the problem comes from Costa Alexoglou. He uses SVG and tracking of the user’s mouse position to prevent the menu from closing inadvertently.

4. Visualizing Systems Behind Designs

Every design decision has a ripple effect in the ecosystem we operate in, but we are often so focused on our own product domain that we miss the bigger picture. Justin Farrugia shares a collection of system diagramming tools that enable you to zoom out and see how things connect. Fantastic little helpers to align viewpoints, understand causality, generate options, and simulate design decisions.

5. User-Friendly Nested Tables

Nested tables are often seen as messy and overwhelming. However, if done right, they can actually help users make sense of complex information, without jumping between screens. Damilola Bamgbelu wrote a practical step-by-step guide to designing nested tables that support scanning and enable fast decisions.

6. Bulk Upload UX

Many bulk upload features are lacking, so how can we do better? Drawing on her experience from improving bulk upload in an online recruiting tool, Livinda Christy shares solutions to common issues and challenges. She walks you step by step through the process of creating a hassle-free file import and shares tips for defending your design decisions in front of stakeholders.

7. Accessible UX Research, Now Shipping 📚

We’ve got exciting news! Our newest Smashing book, Accessible UX Research by Michele A. Williams, is finally shipping worldwide! Get the book right away or order the eBook for instant download.

Meet our brand-new book: “Accessible UX Research” by Michele A. Williams. Printed copies shipping now.

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. Download a free sample (PDF, 2.3MB) or get the book right away.

8. 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:

Figma Workflow Masterclass Design
with Christine Vallaure. Sep 23–29
Live Accessibility Testing Free
with Manuel Matuzović. Sep 24
Cascading Style Systems: Resilient & Maintainable CSS Dev
with Miriam Suzanne. Oct 1–15
Designing Websites That Convert UX
with Paul Boag. Oct 7
Accessible Frontend Patterns Dev
with Manuel Matuzović. Oct 12 – Nov 2
How To Measure UX And Design Impact UX
with Vitaly Friedman. Oct 20 – Nov 3
Building Modern HTML Emails Dev
with Rémi Parmentier. Oct 26 –29
Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. Nov 9–23
Design Patterns For AI Interfaces + video course UX
with Vitaly Friedman. Nov 16–24
Jump to all workshops →

9. Person Of The Week: Ruby Pryor

Please give a warm round of applause for our Person of the Week: Ruby Pryor. Ruby is the founder of Rex, a UX research and strategic design consulting firm specializing in Southeast Asia. For the past decade, she has worked in design and customer experience across Australia and Asia, including for Boston Consulting Group, Grab, and Nous Group.

Ruby is passionate about sharing her knowledge with others. When she’s not speaking at conferences or appearing on podcasts, she runs client workshops and teaches design and UX research to students worldwide through live masterclasses and cohort programs.

Thank you for everything you do for the community, dear Ruby! 🧡

10. 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, Vitaly Friedman, and Iris Lješnjanin.

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Follow us on Mastadon • Join us on Bluesky

Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com.
unsubscribe • update preferences • view in your browser

2c:T364f,Issue #577 • Sep 22, 2026 • View in the browser (https://mailchi.mp/smashingmagazine/577-design-patterns-voice-ux-tables-bulk-editing?e=45c4871904) https://www.smashingmagazine.com/the-smashing-newsletter/ ** Hola Smashing Friends, ------------------------------------------------------------ Design patterns are often perceived as off-the-shelf solutions, but they are a great conversation starter to avoid starting from scratch every single time. In this newsletter, we look at just that — from contextual menus and nested tables to patterns for designing for mental health. And if you’d like to take some of those conversations further, we have plenty coming up! There are new upcoming online workshops (https://smashingconf.com/online-workshops) , including two happening this week: * Figma Workflow Masterclass (https://smashingconf.com/online-workshops/workshops/figma-workflow-christine-vallaure/) Design with Christine Vallaure. Sep 23–29 * Live Accessibility Testing (https://smashingconf.com/online-workshops/workshops/live-accessibility-testing-manuel-matuzovic/) Free! with Manuel Matuzović. Sep 24 There are more workshops planned throughout October (https://smashingconf.com/online-workshops) , covering many practical topics to help you sharpen your skills, explore new approaches and learn with designers: https://smashingconf.com/online-workshops * Resilient & Maintainable CSS (https://smashingconf.com/online-workshops/workshops/modern-css-miriam-suzanne/) Dev with Miriam Suzanne. Oct 1–15 * Designing Websites That Convert (https://smashingconf.com/online-workshops/workshops/converting-websites-paul-boag/) UX with Paul Boag. Oct 7 * Accessible Frontend Patterns (https://smashingconf.com/online-workshops/workshops/accessible-frontend-patterns-manuel-matuzovic/) Dev with Manuel Matuzović. Oct 12 – Nov 2 * How To Measure UX And Design Impact (https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/) UX with Vitaly Friedman. Oct 20 – Nov 3 * Building Modern HTML Emails (https://smashingconf.com/online-workshops/workshops/html-email-remi-parmentier/) Dev with Rémi Parmentier. Oct 26 –29 * Deep Dive On Accessibility Testing (https://smashingconf.com/online-workshops/workshops/accessibility-testing-manuel-matuzovic/) Dev with Manuel Matuzović. Nov 9–23 * Design Patterns For AI Interfaces (https://smashingconf.com/online-workshops/workshops/ai-interfaces-vitaly-friedman/) + video course (https://ai-design-patterns.com/) UX with Vitaly Friedman. Nov 16–24 * AI-Ready Design Systems (https://smashingconf.com/online-workshops/workshops/ai-designsystems-figma-christine-vallaure/) UX with Christine Vallaure. Nov 30–Dec 4 * Jump to all workshops → (https://smashingconf.com/online-workshops/) We hope to see you there! — Vitaly (https://www.linkedin.com/in/vitalyfriedman/) ------------------------------------------------------------ ** 1. Voice AI UX Patterns ------------------------------------------------------------ From avatar calls to voice-augmented chat, voice-to-text dictation, and co-pilot transcripts, AI has unlocked new use cases and interaction patterns for voice. Sharang Sharma explores emerging Voice AI UX patterns (https://uxdesign.cc/8-voice-aiux-patterns-81324c8feaa0) , the perceived role of the AI agent within each, and the key design decisions and limitations that shape them. For more AI patterns, experiments, ideas, and tools also be sure to check out Sharang’s site AgenticPath (https://www.agenticpathdesign.com/experiments) . https://uxdesign.cc/8-voice-aiux-patterns-81324c8feaa0 ------------------------------------------------------------ ** 2. Design Patterns For Mental Health ------------------------------------------------------------ Mental health and wellbeing apps have seen a boom in recent years. If you’re involved in developing, designing, or delivering mental health products or services, The Mental Health Patterns Library (https://designpatternsformentalhealth.org/) is for you. Designed to encourage best practices in the field, it shares principles, patterns, and examples that help you ensure your mental health digital services work for people. https://designpatternsformentalhealth.org/ ------------------------------------------------------------ ** 3. Better Context Menus ------------------------------------------------------------ Most web and desktop-based applications offer context menus, i.e. the “pop up” menu when you right click with your mouse. The team at Linear added an invisible detail to their context menu that makes the interaction faster and more intuitive: a React component creates a safe area where the mouse can move along the shortest path without triggering the sub-menu to close. Andreas Eldh explains in detail how it works (https://linear.app/now/invisible-details) . A different solution to the problem (https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/) comes from Costa Alexoglou. He uses SVG and tracking of the user’s mouse position to prevent the menu from closing inadvertently. https://linear.app/now/invisible-details ------------------------------------------------------------ ** 4. Visualizing Systems Behind Designs ------------------------------------------------------------ Every design decision has a ripple effect in the ecosystem we operate in, but we are often so focused on our own product domain that we miss the bigger picture. Justin Farrugia shares a collection of system diagramming tools (https://uxdesign.cc/visualizing-the-systems-behind-our-designs-7a7c95b4cfb2) that enable you to zoom out and see how things connect. Fantastic little helpers to align viewpoints, understand causality, generate options, and simulate design decisions. https://uxdesign.cc/visualizing-the-systems-behind-our-designs-7a7c95b4cfb2 ------------------------------------------------------------ ** 5. User-Friendly Nested Tables ------------------------------------------------------------ Nested tables are often seen as messy and overwhelming. However, if done right, they can actually help users make sense of complex information, without jumping between screens. Damilola Bamgbelu wrote a practical step-by-step guide (https://medium.com/design-bootcamp/designing-nested-tables-the-ux-of-showing-complex-data-without-creating-chaos-0b25f8bdd7d9) to designing nested tables that support scanning and enable fast decisions. https://medium.com/design-bootcamp/designing-nested-tables-the-ux-of-showing-complex-data-without-creating-chaos-0b25f8bdd7d9 ------------------------------------------------------------ ** 6. Bulk Upload UX ------------------------------------------------------------ Many bulk upload features are lacking, so how can we do better? Drawing on her experience from improving bulk upload in an online recruiting tool, Livinda Christy shares solutions to common issues and challenges (https://medium.com/design-bootcamp/ux-case-study-bulk-upload-feature-785803089328) . She walks you step by step through the process of creating a hassle-free file import and shares tips for defending your design decisions in front of stakeholders. https://medium.com/design-bootcamp/ux-case-study-bulk-upload-feature-785803089328 ------------------------------------------------------------ ** 7. Accessible UX Research, Now Shipping 📚 ------------------------------------------------------------ We’ve got exciting news! Our newest Smashing book, Accessible UX Research by Michele A. Williams, is finally shipping worldwide! Get the book right away (https://www.smashingmagazine.com/printed-books/accessible-ux-research/) or order the eBook for instant download (https://www.smashingmagazine.com/ebooks/accessible-ux-research-ebook/) . https://www.smashingmagazine.com/printed-books/accessible-ux-research/ Meet our brand-new book: “Accessible UX Research (https://www.smashingmagazine.com/printed-books/accessible-ux-research/) ” by Michele A. Williams. Printed copies shipping now. 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. Download a free sample (https://smashed.by/accessibleresearchsample) (PDF, 2.3MB) or get the book right away (https://www.smashingmagazine.com/printed-books/accessible-ux-research/) . ------------------------------------------------------------ ** 8. Upcoming Workshops and Conferences ------------------------------------------------------------ That’s right! We run online workshops on frontend and design (https://www.smashingconf.com/online-workshops/) , 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. https://smashingconf.com/online-workshops/ With online workshops (https://smashingconf.com/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 (https://smashingconf.com/online-workshops/workshops/figma-workflow-christine-vallaure/) Design with Christine Vallaure. Sep 23–29 * Live Accessibility Testing (https://smashingconf.com/online-workshops/workshops/live-accessibility-testing-manuel-matuzovic/) Free with Manuel Matuzović. Sep 24 * Cascading Style Systems: Resilient & Maintainable CSS (https://smashingconf.com/online-workshops/workshops/modern-css-miriam-suzanne/) Dev with Miriam Suzanne. Oct 1–15 * Designing Websites That Convert (https://smashingconf.com/online-workshops/workshops/converting-websites-paul-boag/) UX with Paul Boag. Oct 7 * Accessible Frontend Patterns (https://smashingconf.com/online-workshops/workshops/accessible-frontend-patterns-manuel-matuzovic/) Dev with Manuel Matuzović. Oct 12 – Nov 2 * How To Measure UX And Design Impact (https://smashingconf.com/online-workshops/workshops/vitaly-friedman-impact-design/) UX with Vitaly Friedman. Oct 20 – Nov 3 * Building Modern HTML Emails (https://smashingconf.com/online-workshops/workshops/html-email-remi-parmentier/) Dev with Rémi Parmentier. Oct 26 –29 * Deep Dive On Accessibility Testing (https://smashingconf.com/online-workshops/workshops/accessibility-testing-manuel-matuzovic/) Dev with Manuel Matuzović. Nov 9–23 * Design Patterns For AI Interfaces (https://smashingconf.com/online-workshops/workshops/ai-interfaces-vitaly-friedman/) + video course (https://ai-design-patterns.com/) UX with Vitaly Friedman. Nov 16–24 * Jump to all workshops → (https://smashingconf.com/online-workshops/) ------------------------------------------------------------ ** 9. Person Of The Week: Ruby Pryor ------------------------------------------------------------ Please give a warm round of applause for our Person of the Week: Ruby Pryor (https://www.linkedin.com/in/ruby-pryor) . Ruby is the founder of Rex (https://www.rexhq.io/) , a UX research and strategic design consulting firm specializing in Southeast Asia. For the past decade, she has worked in design and customer experience across Australia and Asia, including for Boston Consulting Group, Grab, and Nous Group. https://www.smashingmagazine.com/person-of-the-week/ruby-pryor/ Ruby is passionate about sharing her knowledge with others. When she’s not speaking at conferences or appearing on podcasts, she runs client workshops and teaches design and UX research to students worldwide through live masterclasses and cohort programs. Thank you for everything you do for the community, dear Ruby! 🧡 ------------------------------------------------------------ ** 10. Recent Smashing Articles ------------------------------------------------------------ * Stop Treating CSS Container Queries Like Traditional Media Queries (https://www.smashingmagazine.com/2026/09/stop-treating-css-container-queries-traditional-media-queries/) * Building A UX ROI Case That Survives The Boardroom (https://www.smashingmagazine.com/2026/09/building-ux-roi-case-survives-boardroom/) * The Death Of The Button: Why The Best Interface Is No Interface (https://www.smashingmagazine.com/2026/09/death-button-why-best-interface-is-no-interface/) * The Many Faces Of September (2026 Wallpapers Edition) (https://www.smashingmagazine.com/2026/08/desktop-wallpaper-calendars-september-2026/) ------------------------------------------------------------ ** 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, Vitaly Friedman, and Iris Lješnjanin. Sent to truly smashing (http://www.smashingmagazine.com/about/) readers via Mailchimp (http://www.mailchimp.com) . We sincerely appreciate your kind support. You rock. Follow us on Mastadon (https://mastodon.social/@smashingmag) • Join us on Bluesky (https://bsky.app/profile/smashingmagazine.com) ============================================================ Weekly issues with useful tips for web devs. Email: ** newsletter@smashingmagazine.com (mailto:newsletter@smashingmagazine.com) . ** unsubscribe (https://smashingmagazine.us1.list-manage.com/unsubscribe?u=16b832d9ad4b28edf261f34df&id=a1666656e0&t=b&e=45c4871904&c=7964bf2a34) • ** update preferences (https://smashingmagazine.us1.list-manage.com/profile?u=16b832d9ad4b28edf261f34df&id=a1666656e0&e=45c4871904&c=7964bf2a34) • ** view in your browser (https://mailchi.mp/smashingmagazine/577-design-patterns-voice-ux-tables-bulk-editing?e=45c4871904) 1f:["$","article",null,{"className":"min-w-0 flex-1 overflow-hidden","aria-label":"#577: Design Patterns: Voice UX, Tables, Bulk Editing","children":[["$","$L29",null,{"emailId":"8bc5d1c7-ff30-46ed-9dff-3357358ad122"}],["$","$L2a",null,{"email":{"id":"8bc5d1c7-ff30-46ed-9dff-3357358ad122","subject":"#577: Design Patterns: Voice UX, Tables, Bulk Editing","previewText":"Issue #577 • Sep 22, 2026 • View in the browser (https://mailchi.mp/smashingmagazine/577-design-patterns-voice-ux-tables-bulk-editing?e=45c4871904)\n\nhttps://www.smashingmagazine.com/the-smashing-newsletter/\n\n\n**\n Hola Smashing Friends,\n------------------------------------------------------------\n\nDe","sentAt":"2026-09-22T14:22:04.000Z","classification":"marketing","imageCount":12,"thumbnailUrl":"https://mailspo-ingest.imraan-243.workers.dev/img/inbound/img/5858e9cc6b2f074261b21a97eb46d753b9453fef84475c9772f27010c8ae7ca9","emailType":"newsletter","typeConfidence":"guess","typeBasis":"no stronger signal","brand":"$27:props:brands:960","bodyHtml":"$2b","textBody":"$2c","bodyFallback":null}}]]}] a:null f:[["$","title","0",{"children":"#577: Design Patterns: Voice UX, Tables, Bulk Editing by Smashing Magazine | Mailspo"}],["$","meta","1",{"name":"description","content":"Issue #577 • Sep 22, 2026 • View in the browser (https://mailchi.mp/smashingmagazine/577-design-patterns-voice-ux-tables-bulk-editing?e=45c4871904)\n\nhttps://www"}],["$","meta","2",{"name":"robots","content":"index, follow"}],["$","link","3",{"rel":"canonical","href":"https://mailspo.com/emails/8bc5d1c7-ff30-46ed-9dff-3357358ad122"}],["$","meta","4",{"property":"og:title","content":"#577: Design Patterns: Voice UX, Tables, Bulk Editing by Smashing Magazine | Mailspo"}],["$","meta","5",{"property":"og:description","content":"Issue #577 • Sep 22, 2026 • View in the browser (https://mailchi.mp/smashingmagazine/577-design-patterns-voice-ux-tables-bulk-editing?e=45c4871904)\n\nhttps://www"}],["$","meta","6",{"property":"og:url","content":"https://mailspo.com/emails/8bc5d1c7-ff30-46ed-9dff-3357358ad122"}],["$","meta","7",{"property":"og:site_name","content":"Mailspo"}],["$","meta","8",{"property":"og:image","content":"https://mailspo-ingest.imraan-243.workers.dev/img/inbound/img/5858e9cc6b2f074261b21a97eb46d753b9453fef84475c9772f27010c8ae7ca9"}],["$","meta","9",{"property":"og:image:alt","content":"Smashing Magazine email creative: #577: Design Patterns: Voice UX, Tables, Bulk Editing"}],["$","meta","10",{"property":"og:type","content":"article"}],["$","meta","11",{"property":"article:published_time","content":"2026-09-22T14:22:04.000Z"}],["$","meta","12",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","13",{"name":"twitter:title","content":"#577: Design Patterns: Voice UX, Tables, Bulk Editing by Smashing Magazine | Mailspo"}],["$","meta","14",{"name":"twitter:description","content":"Issue #577 • Sep 22, 2026 • View in the browser (https://mailchi.mp/smashingmagazine/577-design-patterns-voice-ux-tables-bulk-editing?e=45c4871904)\n\nhttps://www"}],["$","meta","15",{"name":"twitter:image","content":"https://mailspo-ingest.imraan-243.workers.dev/img/inbound/img/5858e9cc6b2f074261b21a97eb46d753b9453fef84475c9772f27010c8ae7ca9"}],["$","meta","16",{"name":"twitter:image:alt","content":"Smashing Magazine email creative: #577: Design Patterns: Voice UX, Tables, Bulk Editing"}],["$","link","17",{"rel":"icon","href":"/favicon.ico?favicon.3lxqohtg4uvbd.ico","sizes":"48x48","type":"image/x-icon"}],["$","$L2d","18",{}]]

Search Mailspo