Complex interfaces come in different forms and shapes. Often we explore design patterns for structured data — with data tables, filters and search — among many others. However, sometimes things get even more complicated.
How do we design better dashboards? What about detailed maps with multiple overlays? Or perhaps AR or voice assistants? In this newsletter, we’ll explore them in all the fine detail. And if you'd like to dive even deeper, our growing UX library is always here to help!
We also have a few community events coming up soon:
- Smashing Hour on Design Systems with Ben Callahan (Tue, Nov 28, 8AM PT / 5PM CET),
- Smashing Meets Go Green (Thu, Dec 7), free online community meet-up on digital sustainability,
- Smashing Hour on Typography with Oliver Schondörfer (Mon, Dec 11, 8AM PT / 5PM CET),
- Smashing Online Workshops on UX, design and front-end,
- SmashingConfs 2024: Freiburg, New York, Antwerp.
We can’t wait to see you online and in-person this and next year. And we keep sending you a lot of positive energy, hope, optimism, and positive thinking for the week ahead!
1. Why You Might Not Need A Dashboard
We live in a time of data where dashboards and data visualizations are everywhere. They show us everything from our phone’s weekly usage to monthly spending and performance at work. And while they are usually considered intuitive, research shows that dashboards and data visualizations are often ineffective in conveying clear, actionable insight.
Irina Wagner came to the conclusion that many dashboards aren’t usable to most people. For certain user profiles (e.g., data scientists, researchers, or medical professionals), a dashboard might be the way to go. However, for the general audience, it might be a better investment to explore automation and AI to provide actionable contextual insights.
If you look for insights on dashboards, explore dashboard design patterns by Benjamin Bach, rules for better dashboard design by Taras Bakusevych and a guide to designing effective dashboards by Kamila Giedrojc. Happy reading! (cm)
2. Usability Of Augmented Reality
Augmented reality (AR) adds an additional layer of information to the real world. It can show you what the couch you plan to buy will look like in your living room and even bring history to life. The potential is huge, but AR features in mobile apps still have a lot of usability issues, as the Nielsen Norman Group found out in a recent study.
Poor discoverability, low-visibility instructions, and vague icons and signifiers are some challenges that study participants struggled with when interacting with AR. In their article “The Usability of Augmented Reality,” Sana Behnam and Raluca Budiu outline the findings from the study and share design recommendations for addressing the issues. A great reminder to not implement AR for the sake of AR but rather make sure that it adds value to the overall user experience. (cm)
3. Designing An In-Car Voice Assistant
Voice assistants in cars are often more an unused gimmick than an essential part of the in-car experience. However, a well-designed voice assistant even has the potential to make driving safer, as Casper Kessels found out. He spent months researching the role of voice assistants in reducing driver distraction and turned his findings into a set of guidelines for designing great in-car voice assistants.
The guidelines include 18 practical tips and do’s and don’ts for designing a voice assistant that keeps drivers focused on driving, builds trust and satisfaction, and prevents errors. While there are a couple of things to consider when designing voice assistants for driving that are different from typical voice assistants, Casper’s tips for making communication personal and preventing error loops are universal and can also be applied outside the in-car setting. (cm)
4. Upcoming Online Workshops
That’s right! We run online workshops on front-end 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 Management Masterclass UX
with Slava Shestopalov. Nov 30 – Dec 8
- Streamlining Your Websites Content Workflow
with Paul Boag. Dec 7–15
- Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. Jan 8–22
- UX Strategy Masterclass UX
with Vitaly Friedman. Jan 23 – Feb 6
- Resilient & Maintainable CSS Dev
with Miriam Suzanne. Feb 26 – Mar 12
- Live UX Interface Design Training (Spring 2024) UX
with Vitaly Friedman. Mar 8 – Apr 5
- Scalable CSS Masterclass Dev
with Andy Bell. May 9–23
- Smart Interface Design Patterns Video Course UX
9h-video + Live UX Training with Vitaly Friedman
- Jump to all workshops →
5. Natural Language Inputs
What if every input was a text input that accepts natural language? For example, you could just type “12pm” when you need to enter a time instead of choosing “12” from a dropdown, then “00” from a dropdown, and “pm” from another dropdown. That’s exactly the question that Jim Nielsen asked himself.
In his blog post “Natural Language Inputs,” he further explores the idea of allowing users to just type to enter their information. An interesting design pattern that completely rethinks how users input information and how designers and developers design for input. (cm)
6. System Status UX
Whether it’s communicating to a user that a file is uploading, saving is completed, or data is being fetched, a well-designed and well-written system status helps build trust and confidence. Meganne Ohata wrote a great deep-dive into system status UX and how we can make the dialogue between humans and computers more productive, helpful, and, generally, a positive experience.
As a rule of thumb, Meganne suggests thinking of system status as a way to tell the user what the results of their actions will be and to set expectations for what’s happening at the moment. In her breakdown, she shares examples of beneficial and failed communication, explores how distinct and eye-catching a system status should be, and looks at different UX patterns to communicate system status. The tips are easy to implement but make a huge difference for users. (cm)
7. Better Maps UX
How to systemize interactive map labels that can hold content for one destination address just like thousands of scooters? Linzi Berry shares insights into how the Lyft team designed a flexible map component that caters to all needs and use cases.
It can be combined with exact locations, objects, or stand on its own, it adjusts when zoomed, and it is big enough to meet tap target requirements and small enough to not block map interaction.
If you want to dive deeper into the UX of maps, also be sure to check out Michael Gaigg’s “Design Patterns For Effective Maps UX”. The repository highlights practical design patterns for planning, designing, and building better map experiences, as well as common mistakes and how to avoid them.
With layout considerations, filters, markers, pop-ups, focal points, interaction design, route directions, and much more, the collection is a goldmine of patterns that help you build maps users will love to use. (cm)
8. Smashing Book Library 📚
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?
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Image Optimization by Addy Osmani
- Jump to 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).
- UX Research
- Sustainability In Front-End and UX
- Dealing With Legacy
- Interface Design
- Accessibility and Inclusive Design
- Goodies and Freebies
- New Ways of Working in 2024
- Meet 2024
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.