Smashing Magazine - #346: UX and Interface Design

How to prevent errors, measure usability, dive into internationalization and User Research Report 2022. Issue #346 Mar 29, 2022 View in the browser 💨

Smashing Newsletter

Dear Smashing Friends,

A few years ago, I was passing by one of my favorite coffee shops in Vilnius, Lithuania. It was a little cozy place, carefully designed in a rustic atmosphere with dark red bricks. As I was slowly finding my way to my spot, I noticed a father and his young son sitting right in the corner, with a sketchbook and a glaring screen in front of them.

The son, maybe around six years old, was absolutely mesmerized by pixels moving around on the screen, with his father passionately moving things around on a mock-up. Eventually, he’d ask his father if he could join in as well, firmly grabbing the mouse with his entire little hand — and not letting go.

I remembered this moment because I realized back then how powerful that particular image was. When I was growing up, I wanted to become a writer, or an engineer, or an astronaut, or perhaps a lawyer. The professions we have today didn’t even exist back then, yet here we are, in the world of UX designers and front-end designers and UX engineers and service UXers.

For years, all the way until this very day, I kept imagining in my head a conversation that could have happened, but probably didn’t: the same little guy saying to his parents one day: “I want to be a UX designer when I grow up.”

This newsletter is for all of us who want to become UX designers, or already found their calling: designers with all the different roles and all the different tasks. This newsletter highlights just a few little tools and resources to help us all be a bit better at design: making it harder for humans to make mistakes, start out with internationalization, discover your own unique style and measure usability with dedicated KPIs. We hope you’ll find it useful.

And if you want to dive a little bit deeper, we have lovely online workshops on UX and smart interface design patterns coming your way. As usual, we’d love to see you there. ❤️

Vitaly (@smashingmag)

1. Preventing User Errors

Errors happen. However, in most cases, it’s not the user’s fault but rather a consequence of an interface that is confusing or, well, an interface that makes it too easy for the user to make a mistake. So instead of trying to train the mistakes out of users, the solution is to redesign the product in a way that prevents errors from occurring in the first place. Jordan Bowman shares practical tips for how to achieve that.

How Designers Can Prevent User Errors

Jordan’s tips provide a safety net that makes errors less costly and tries to prevent the user from making the same mistake again in the future. It could be an airline site that doesn’t allow users to pick a return date that falls before the departure date, for example, adding explanatory labels to form fields, or double-checking with the user before they permanently delete something. Little details that make a huge difference. (cm)

2. Tips And Tools For User Testing

How do you know if your site is easy to use? How do you measure its usability? While a lot of options are relatively time-consuming to implement, Paul Boag shares a cheap and quick method of measuring usability: the system usability scale.

A Comprehensive Guide To User Testing

The system usability scale is a simple survey that asks users to express their agreement with a series of statements, ranging from five points, which means that they completely agree, to one, which means they strongly disagree. For more tools to assist you with usability testing, you might also want to check out Paul’s article “UI Testing Tools I Use All The Time” where he collected some of the rather hidden gems that he likes to keep close in his work.

Another comprehensive guide to user testing comes from Christopher Murphy. It focuses on why and when to run a usability test, how to prepare for it, and, of course, how to run it. Happy testing! (cm)

From our sponsor

Communicate at the speed of thought with Whimsical. Free to get started.

Communicate at the speed of thought with Whimsical. Free to get started.
Whimsical offers versatile boards that enable you to collaborate across wireframes, diagrams, mind maps, and more. Designers and UX Engineers love Whimsical for the rich library of configurable elements, thousands of built-in icons, and intuitive keyboard shortcuts. Keep ideas moving forward faster.

3. Internationalization In UX

Designing for users across the globe does not only create more inclusive experiences and products, it also is key if we want to make sure that our products prevail in the fast-paced and interconnected world we’re living in. But how do we make our designs global-ready? Nicole Assini, UX Designer in the International Team at Indeed, explores how UX designers can improve their work by considering users of other cultures, languages, locations, and backgrounds. A great guide that goes beyond translation and considers the entire product, right from the start of the design process.

Globalizing Your UX Designs

Hua Zheng, Engineering Manager at Airbnb, shares an inspiring behind-the-scenes look at how they built Airbnb’s Internationalization Platform to bridge the language gap and work towards the vision of a world where everyone feels a sense of belonging. If you want to dive in even deeper into the topic, Robyn Larsen’s SmashingConf talk “International Is The New Mobile First” from 2019 is full of valuable insights on how international is forcing us to fundamentally shift our way of thinking. In it, you’ll also learn more about the UX principles and tooling that Shopify used to launch their product in 18 new languages. Interesting insights guaranteed. (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.

Smashing Online Events
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 an overview of our upcoming workshops:

5. The State of User Research

User research is a growing field. But who are the folks doing user research? Where did they acquire their skills? How do they do their research? And what’s the state of user research teams in companies? The State of User Research 2022 report wanted to find out and surveyed 562 user researchers and people who do user research as part of their jobs. They are based in 54 countries, more than half of them in the US, and do user research for very small organizations just like multinational behemoths.

The State of User Research 2022

The full 86-page data report offers interesting insights into the current state of user researchers, user research teams, the art and science of user research, the tools of the trade, as well as into making and measuring impact. If you don’t have the time to read through the full report, you’ll also find a summary of the most important findings. A great initiative to quantify, analyze, and uncover trends in the field. (cm)

From our sponsor

Join Stories from the Blok #6 WomenInTech Edition

Join Stories from the Blok #6 WomenInTech Edition
This time the event by Storyblok is focused on the WomenInTech topic and their stories. You will hear motivational keynotes and learn from engaging panel discussions. Sign up and join on March 31st, 2022.

6. Image Editing With AI

It’s always exciting to see what AI is capable of these days. A little AI-powered helper that saves you a lot of time by taking care of a rather tedious task is Magic Eraser. It removes unwanted things from images in seconds.

Magic Eraser

Instead of putting your image editing skills to the ultimate test when you want to remove a certain detail in an image, you can simply upload an image, mark the bit you need removed, and Magic Eraser will, quite literally, do the magic for you. The tool is free to use, there’s no sign-up required, and its creators guarantee that they do not store the image beyond your interaction with the tool. One for the bookmarks. (cm)

7. A Journey Through The World Of Illustration

From the very first cave paintings to today’s vector graphics, illustration has been a cornerstone of our visual culture and a way for artists to depict stories and concepts since the most ancient times. In his article “Illustration Techniques: Types of Styles & Designs”, Jeremy Elliott takes us on a journey through the history of illustration and different illustration styles.

lllustration Techniques: Types of Styles & Designs

On the way, you’ll learn more about illustration techniques — from the woodcuttings dating back to the 9th century to freehand digital and vector graphics illustration — and you’ll explore illustration styles like concept art, children’s books, graphic novels, advertising, packaging, and more. A great overview of the diversity that the field has to offer. (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. 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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#345: Little Front-End Utilities

Tuesday, March 22, 2022

With a resource hints validator, VS Code extensions, hidden npm packages, tools for third-parties, user testing and useful round-ups. Issue #345 • Mar 22, 2022 • View in the browser 💨 Smashing

#344: Front-End Accessibility

Tuesday, March 15, 2022

With accessible focus indicators, accessible charts, toggles and how to document accessibility in your projects. Issue #344 • Mar 15, 2022 • View in the browser 💨 Smashing Newsletter Dziękuję Smashing

#343: New Front-End Techniques

Tuesday, March 8, 2022

With CSS cascade layers, SVG stress test, handling text over images, third-party JavaScript and performance optimization. Issue #343 • Mar 8, 2022 • View in the browser 💨 Smashing Newsletter Dobryden

342: Interface Design & UX

Tuesday, March 1, 2022

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

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

Cindermedusae, Instagram Rebrand, Next.js Layouts, Corey Marion, Emotional Design

Wednesday, May 25, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 25 2022 Cindermedusae A generative encyclopedia

The 20 Most Underrated Paint Colors

Tuesday, May 24, 2022

Plus, highlights from a whirlwind New York Design Week View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Furniture NYCXDESIGN 2022: HIGHLIGHTS FROM A

#354: Front-End Accessibility

Tuesday, May 24, 2022

Accessible autocomplete, hidden content, custom radio and checkboxes, and accessibility linter. Issue #354 • May 24, 2022 • View in the browser 💨 Smashing Newsletter Merhaba Smashing Friends, We often

The Washington Post design system

Tuesday, May 24, 2022

Hi Reader, these are my design and frontend picks this week. Highlights of the week There's a smarter way to map user journeys - That's why we built Flows in Zeplin. Easily connect published

Trends are Dead, Instagram Sans, Instagram Brand, Underused CSS, Interpolation Calculator

Tuesday, May 24, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 24 2022 Trends are dead Coastal grandmother, night

Accessibility Weekly #293: WCAG 2.2. and WCAG 3 Status Updates

Tuesday, May 24, 2022

Sponsored by Automattic. They're hiring. May 23, 2022 • Issue #293 View this issue online or browse the full issue archive. Featured: WCAG 2.2. and WCAG 3 status updates “We expect WCAG 2.2 to be

Lessons from PM & UXR collaboration

Monday, May 23, 2022

Part 2: What we learned from working on a new product project together ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🤩 Magnificent Landing Page Designs + 🏆 Challenge Updates

Monday, May 23, 2022

Your Freshest UpLabs Design News Is Here! 🙌 First off, congratulations to Arjun Makwana, the winner of our latest 🛒 Ebay Website Redesign Challenge! Next off, remember that the second week to vote in

Step Inside Ken Fulk’s Cinematic Universe

Monday, May 23, 2022

Plus, 6 new glass collections to know View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Confectionery, Food, Sweets, and Plant GLASS IS RED-HOT: HERE

An Op-Art Loft in Los Angeles

Monday, May 23, 2022

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman Photo: Lane Barden Architect, critic,