March 1, 2022 Smashing Newsletter: Issue #342
This newsletter issue was sent out to 176,409 subscribers on Tuesday, March 1, 2022.
Editorial
I was born and grew up in Minsk, Belarus. That’s where I spent nights playing Prince of Persia. That’s where I’d wait in front of a bakery nearby for the smell of freshly basked Narochansky bread. That’s also the place where our family went to peaceful protests on the streets, even then back in the 90s heavily suppressed by an armed regime with a brutal force.
I was surrounded by incredible friends from all over. Nobody cared if it was Belarus, Ukraine or Russia, or any other place in the world. We didn’t have much, but what we did have, we valued enormously. I remember us collecting chocolate wrapping paper, reading dictionaries together, discussing books, playing hockey outside, dreaming about the bright future while looking at the sky, together.
Today, people in Ukraine can’t do that. I’ve been dozens of times in Ukraine, and I have very close friends in this wonderful country — incredibly kind and passionate people who want nothing but a better world for their families and the people around them. Some of us at Smashing have Ukrainian origins, and we have close connections to our Ukrainian friends and colleagues.
It’s shocking and horrifying to see the streets of Ukraine being shelled, civil homes being bombed, people hiding in shelters, people leaving their homes, families torn apart. We need to be united in our fight against the war, for democracy, for those dreams that children are entitled to have when they are growing up. It’s our obligation to help as much as we can. We all are Ukraine, and Ukraine needs our help, now.
Yesterday, we launched a campaign for Ukraine: all proceeds from our Interface Design Patterns PDF ($30) and Ethical Design Handbook eBook ($19) will be donated to support Ukrainian people. You can select as many PDFs as you wish when making a purchase.
In the article, we’ve also listed many other ways to help as well. You could set up a product and donate funds to Ukraine, speak up in your company and organization, publish posts showcasing organizations and companies supporting Ukraine, or support refugees in your city or country.
And to our Ukrainian friends: we stand firmly with you. If you need work, shelter or anything else, please send us a message and we’ll do our best to help. We all are Ukraine.
— Vitaly (@smashingmag)
1. Which Component For Which Input?
How do you choose which input type or component to use for a particular input? When is it a good idea to use a checkbox, and when might a radio button be the better option? And what about segmented controls and tabs?
In her article “A better segmented control”, Runi Goswami from Lyft shares insights into how she and her team make decisions around forms. She also provides a flowchart that shows you at a glance when to use which of the options to streamline and align the decisions-making for the entire team. A handy little helper to take away the guesswork when making those difficult decisions. (cm)
2. Practical UI & UX Micro-Tips
Sometimes it’s the small details that help improve the user experience significantly. Softening up the white color in dark-themed designs, for example, using sample values in forms, or making search more prominent on content-rich sites. To raise awareness for impactful little design tweaks like these, Marc Andrew started his article series “UI & UX Micro-Tips”.
Covering everything from typography and layout to components like navigation and forms, Marc’s micro-tips are easy to implement and help you improve both the UI and user experience of your site or application. And as the name implies, all of of them are quick and easy to implement. A treasure chest. (cm)
3. Delightful Data Visualizations
When it comes to data visualizations, it is often considered a best practice that every visual element must have a functional purpose. Anything beyond that is unnecessary. Alena Iouguina and her team at Shopify disagree and ignored this convention when they redesigned the Shopify Live View. And, well, by breaking the rules, they created an experience that maximizes delight and keeps users engaged.
In her article “How to maximize delight in data visualizations”, Alena shares insights into the redesign. At the very heart of it is motion: motion as a time-space narrative and motion as a storybook.
The time-space narrative gives business owners a chance to enjoy the journey of their orders across the globe and see how customers move across the online store — just like marketplace buzz and bustle in the analog world. The storybook feature captures the highlights of a day so that business owners can re-experience it at any time. An inspiring approach to bridging the gap between observing the screen and experiencing real human connections. (cm)
4. Upcoming Front-End & UX Workshops
You might have heard it: we run online workshops around frontend and design, be it accessibility, performance, 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.
Join us on March 17 for a free session to get hands-on with Hydrogen, a React-based framework powered by Shopify.
As always, here’s an overview of our upcoming workshops:
- Smart Interface Design Patterns, 9h-video course UX
with Vitaly Friedman. It’s out now, early birds are available. - Accessibility In Modern Applications Dev
with Marcy Sutton. Mar 22 – Apr 5 - DevOps Masterclass Dev
Denys Mishunov. Apr 4–18 - Designing For Complex UI Masterclass UX
Vitaly Friedman. Apr 6–14 - Jump to all online workshops →
5. Dark Patterns Tip Line
Dark patterns are everywhere, but sometimes they are quite hard to spot. It might be a social media app forcing you into connecting your social networks to your phone number or services offering a free trial but not reminding you before payment will begin. All dark patterns have something in common, though: They try to persuade us into doing things we probably would not do otherwise. And that can create inconveniences or even cause serious harm.
If you spot a dark pattern in one of the sites you’re browsing or apps you’re using, you might want to consider submitting your sighting to The Dark Patterns Tip Line. Led by a team of designers, academic researchers, legal experts, policy specialists, and advocacy-minded individuals, the platform collects dark patterns to better understand how technology is exploiting people.
The goal is to raise awareness for the topic and help policymakers and enforcers hold companies accountable for dishonest and manipulative practices. And, of course, the sightings are also a great opportunity for us all to learn from bad practices and do better in our everyday work. (cm)
6. Writing With Respect
How to be a good writer? Write with respect. Respect for the craft and respect for the reader. This precious piece of advice comes from Nick DiLallo. And while it might seem an obvious thing to do, it’s hard — and increasingly rare, as Nick points out. Deceptive, annoying, and occasionally illegal phrasing that is designed to confuse or mislead is, unfortunately, something that we all see on the web these days. Let’s do better! Nick shares eight things we can start focusing on right away when writing UX copy. An important reminder.
Another aspect tied to writing with respect is writing in a way that everyone understands it — no matter if readers have learning or intellectual disabilities or if the language you write in is not their first language. A very impressive read on this topic comes from Rebecca Monteleone and Jamie Brew.
They not only explore how plain language (i.e., simplified sentences, everyday vocabulary, and clear structure) can remove barriers but instantly apply the principles to their own article. To see the effect in action, you can toggle the article between standard and plain language. A great example. (cm)
7. A Guide To Remote Usability Testing
The way we do usability testing has changed significantly in the last years. What once involved a consultant inviting a participant to complete tasks on a desktop computer, then observing and noting their behavior, can today be done just by sending out a link. But how to get the most out of your remote usability tests?
The team at Maze published a comprehensive beginner’s guide to remote usability testing. It takes a closer look at the benefits that remote usability tests bring along as well as at how to minimize potential risks. A checklist with six tips helps you ensure that your tests are effective so that you gain insights that truly matter. (cm)
8. Turning Users Into Power Users
Everybody loves to save time and perform actions fast. It might be with a simple keyboard shortcut, a command palette that provides a quick and easy way to interact with an application, or even an advanced command-line interface. If you ever considered integrating one of the three into a product or dashboard you’re working on, we came across some useful resources that could come in handy.
First off: keyboard shortcuts. Sam Seely shares his team’s learnings from designing a great keyboard shortcut experience. He explains how to get started adding keyboard shortcuts to a product and what you need to keep in mind when doing so. The Command Line Interface Guidelines help you write better command-line programs, taking traditional UNIX principles and updating them for today.
If you’re looking for a more user-friendly alternative that offers many of the same ergonomic advantages as the good ol’ command line, you might want to dive deeper into command palettes. Tim Boucher lets us in on the secrets of building a powerful, omnipresent, and fast command palette and Philip Davis looks at four command palettes that go beyond the normal Search use. Practical UI tips to turn your users into power users. (cm)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.