Nǐ hǎo Smashing Friends,
Over decades, we’ve learned how to create incredibly compelling and exciting digital experiences, yet too often they get shadowed by frustrating and annoying patterns appearing over and over. Why do birthday pickers dropdowns start at 2021? Why do filters freeze on every single input? Why do we keep showing mega-dropdown hover menus every time a user heads to the search box?
There are plenty of frustrating design patterns on the web today. Let’s figure out better solutions to all of them. Text version.
Just because we see the same patterns used everywhere. That doesn’t mean that they provide a good experience though. So let’s question them. Let’s revisit, reconsider and redesign these patterns. And come up with better solutions to seemingly obvious and omnipresent challenges.
In this newsletter, we highlight some of the better guidelines, practices and examples for better interface design components. If you’ve come up with an interesting solution recently, or just spotted one in the wild out there, please let us know via email or on Twitter, and we’d love to publish your story or your case study on SmashingMag as well.
In the meantime though, let’s dive into better interface design components: from buttons and text fields to command palette interfaces and signup confirmation emails!
Let’s keep making the web better!
— Vitaly (@smashingmag)
1. One Checkbox Or Two Radio Buttons?
Let’s say you have a question with a binary Yes/No answer. Should you use a checkbox? Or rather two radio buttons? And which should you use when you can use both? Confronted with these questions when working on a client project, Sara Soueidan decided to dive deeper and collected input from the UI/UX community on Twitter.
Of course, as with most things, the answer is: It depends — on the kind of content you’re working with and the kind of information you’re asking for. However, the responses that Sara received will help you see checkboxes and radio buttons from different perspectives, and, ultimately, make a more informed decision on which one fits your project’s needs. (cm)
2. Building Better Segmented Controls
Presenting all available options, segmented controls are an alternative to radio buttons and dropdown menus. However, a few years after building a segmented control component for their design system, the Lyft Design Systems team noticed that many teams preferred to build custom components over using the design system component. Instead of simply removing the control from the system, the Design Systems team decided to examine why their component wasn’t adopted and, of course, find out how to build better segmented controls.
Runi Goswami, product designer on the team, documented their quest in a case study. It not only gives valuable insights into segmented controls and how to make them work in favor of the user but also into dealing with consistency problems in a design system and how rethinking existing patterns might end up in a more robust ecosystem. (cm)
From our sponsor
Here’s Everything You Need To Resize Images In JavaScript
Learn different techniques to resize images in JavaScript, when you should avoid browser-side resizing, and the right way to manipulate and serve images on the web. Bonus: Know the serverless way to resize images in JavaScript with ImageKit.io!
3. Getting The Most Out Of Of Command Palette Interfaces
Command palettes provide a fast and non-disruptive way to interact with an application. They show up immediately, can be used with just the keyboard, and hide themselves from view quickly when not needed, which makes them a perfect fit for professional tools where you want to get a task done quickly and without losing focus.
One of the best-known examples of a command palette is probably Spotlight on macOS. But the UI pattern can be used for more than just Search, as Philip Davis shows. He collected four different iterations of the command palette that go beyond the usual Search use case: quick entry, contextual insert, grouping and nesting, and palettes in palettes. Inspiring! (cm)
4. Upcoming Smashing Online Workshops
We regularly run online workshops around design and UX: be it around accessibility, forms, navigation, or landing pages. 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.
Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.
For example, we have Paul Boag's workshop on designing websites that convert. We also have plenty of other topics to choose from. As always, here’s an overview of our upcoming front-end & design workshops.
5. Improving Signup Confirmation Rates With Sniper Links
Email confirmation can turn into a bottleneck during onboarding. The team at Growth.Design even found out that one of four users who sign up for a product will never confirm their email. Reasons for this vary: It might be friction in the onboarding steps, the fact that your confirmation emails land in your user’s spam folder, or they could get distracted by other emails in their inbox. A possible solution: sniper links.
As Dan Benoni and Louis-Xavier Lavallee, the minds behind Growth.Design, explain, sniper links have the effect that your new users will only see your confirmation email in their inbox, nothing else, even if your mail landed in their spam. At least in Gmail. To make it work, you only need a tiny link: You open your Gmail inbox, search for your domain in all folders, and copy the URL of your browser tab. Then you only need to update your signup flow with a “Confirm your email” button that links directly to the URL you generated. A little trick that can make a big difference. (cm)
From our sponsor
Learn Editor X Inside Out And Design Your Best Sites Yet
Meet the new Academy X, your complete educational resource from Editor X, the advanced web design platform. Find your learning path with live webinars, video tutorials, hands-on exercises and more. Take a deep dive now and start creating. Get skilled up →
6. Better Interface Design Components
What makes a good radio button? What about the good ol’ form design, with labels, buttons and inline validation? A good interface is a predictable interface which provides answers rather than posing questions. In his series of articles on selection controls, text fields and buttons, Taras Bakusevych dives deep into the mechanics and fine intricacies of designing better form elements.
For selection controls, Taras provides a handy cheat sheet on how to know when to use what control — along as all the states to keep in mind for radio buttons and checkboxes. In general, though, top-aligned labels seem to perform best, with conditional logic used to automatically show or hide fields and skip pages in a form, based on user’s answers. Taras provides these, and plenty of other tips in his ongoing series. And if you need to explore other components, Victor Ponamariov has got your back in his Twitter thread on all kinds of UI components (a curated list of 58 articles). (vf)
7. Frustrating Interface Design Patterns
Too often web experiences are frustrating, annoying and inaccessible. So for the last months and years, we’ve been exploring common design headaches and searching for slightly better solutions than the ones commonly used. As a result, we’ve been publishing some of these solutions in our series on “Design Patterns” on SmashingMag: starting from good ol’ accordions and date and time pickers to sliders and mega-dropdown menus.
Just last week we published a post around frustrating filters. Filters can be complex, interdependent and difficult to validate. When designing one, we need to ensure that we avoid auto-scrolling, refresh or blocking on every single input, show results asynchronously, avoid layout shifts and provide text input fallbacks for sliders. The article highlights plenty of examples, good and not-so-good-ones, and a little checklist to use, so we can avoid frustrations and make filtering experience a tad better.
And if you need to dive deeper into the world of enterprise filtering, Fanny Vassilatos and Ceara Crawshaw highlight some useful patterns and examples in their article on Enterprise Filtering, and enterprise data tables that provide ideas on live-filtering, attribute-filtering and batch-filtering. (vf)
From our sponsor
Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy
Earn your master’s degree online.
8. New On Smashing Job Board
9. Recent Smashing Articles
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
