Smashing Magazine - 342: Interface Design & UX

With design patterns, interface design techniques and pointers to useful UX resources. Issue #342 Mar 1, 2022 View in the browser 💨

Smashing Newsletter

Dobryden’ Smashing Friends,

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.

Smart Interface Design Patterns Checklist Cards

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?

A better segmented control

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

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)


From our sponsor

How Long Did It Take Your Company To Comply With CCPA’s Do Not Sell?

How Long Did It Take Your Company To Comply With CCPA’s Do Not Sell?
Honoring Do Not Sell requests doesn’t have to be a pain — try the only cookie manager with out of the box Do Not Sell signal compliance for free.


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.

How to maximize delight in data visualizations

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.

Smashing Online Events
We’ve also got your back with personal and inclusive events.

As always, here’s an overview of our upcoming 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.

The Dark Patterns Tip Line

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)


From our sponsor

Create A Better Interface For Any Business Problem With Retool

Create a better interface for any business problem with Retool
You don’t have to be a frontend expert to build beautiful apps. Retool provides a powerful platform to build UI, connect to data, and publish your app 10x faster. Skip boilerplate code with 90+ pre-built components, and write code nearly anywhere to customize how your apps look and work.


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.

Writing With Respect

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?

Understanding remote usability testing: A beginner's guide

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)


From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


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.

Command Palette Interfaces

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)


9. New On Smashing Job Board


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 (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

unsubscribe update preferences view in your browser

Older messages

341: Front-End & UX Reading

Tuesday, February 22, 2022

With design patterns, UX guides, free JavaScript books, UX guides and books from the community. Issue #341 • February 22, 2022 • View in the browser 💨 Smashing Newsletter Bom Dia Smashing Friends, When

Meet “Touch Design for Mobile Interfaces”, a new Smashing Book

Wednesday, February 16, 2022

Meet our shiny new Smashing Book for accessible and usable mobile interfaces, with guidelines, examples and best practices. It's here! Touch Design for Mobile Interfaces, our new guide for better

#340: Productivity Helpers

Tuesday, February 15, 2022

With little helpers for getting work done faster in browsers, Figma and other tools that you use daily. Issue #340 • February 15, 2022 • View in the browser 💨 Smashing Newsletter Bună dimineaţa

#339: Modern CSS Techniques

Tuesday, February 8, 2022

With modern CSS, techniques for better CSS shadows, SVG icons, CSS Reset and even CSS pseudo commas. Issue #339 • February 8, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends,

#338: UX & Front-End Tools

Tuesday, February 1, 2022

Little tools for card sorting, tree testing, gathering feedback, testing with screen readers and monitoring Core Web Vitals. Issue #338 • February 1, 2022 • View in the browser 💨 Smashing Newsletter

You Might Also Like

Pierce & Ward’s Secret Sources, Business Advice You Can’t Afford to Miss, and More

Friday, April 19, 2024

View in your browser | Update your preferences ADPro “Minimalism is not my strong suit.” So says Emma Roberts, the muse behind AD's May cover story. (Celebrities—they're just like us!)

World Press Photo Contest, Speedometer 3.0, Anchor Position, Sliding Frame, Meta Llama 3

Friday, April 19, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 19 2024 The World Press Photo Contest Documents War,

Car UX, DevTools Tips, CSS Patterns, iOS404, Internet Cables

Thursday, April 18, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 18 2024 Steering the future: a new vision for car UX

Big Tents, Pistachio Palettes, and Other Late-Breaking Milan Discoveries

Wednesday, April 17, 2024

View in your browser | Update your preferences We've had a remodel! From now on, you'll be hearing from AD PRO in your inbox twice a week—once with a deep dive into trends to watch and subjects

163 / Dieter Rams inspired Framer components, America's national parks and more free resources…

Wednesday, April 17, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Apr 2024 • Part 1 View in browser Welcome to Issue 163! I'm comfortable talking to a human on camera, but talking at the camera, not so much. The

Logo System, BCWA Identity, War Robots, 84—24, 19th-Century Atlas

Wednesday, April 17, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 17 2024 Logo System: Explore 400+ logo designs logosystem

Emma Roberts's Home: AD100 Firm Pierce & Ward Share Their Secret Sources

Tuesday, April 16, 2024

Plus, the best exterior house colors View in your browser | Update your preferences Architectural Digest AD PRO Logo exterior of two residential buildings painted with blue trim with a brick patio and

#452: Design Workflow

Tuesday, April 16, 2024

How to choose the right idea, navigate difficult conversations and communicate design. Issue #452 • Apr 16, 2024 • View in the browser Smashing Newsletter Iyi akşamlar Smashing Friends, Design workflow

Mario & Pareto, faces.js, Sleep vs Blog, Dark Mode, DOM Folding

Tuesday, April 16, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 16 2024 Mario meets Pareto mayerowitz.io Discover how to

Gap, Teenagers, Artistic Intelligence, Should Designers Code, CSS in RSCs

Tuesday, April 16, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 15 2024 Gap is the new Margin frontendmasters.com In 2020