November 26, 2024 Smashing Newsletter: Issue #484
This newsletter issue was sent out to 193,397 subscribers on Tuesday, November 26, 2024.
Editorial
Forms are the cornerstone of interactions on the web. We’ve been designing them for decades now, so we should be pretty good at helping people smoothly run through the form flows, quickly recover from mistakes, and get tasks done swiftly and precisely.
Unfortunately, most of the time, it’s not quite like that. Too many forms are broken, inaccessible and difficult to use. Sometimes, with confusing labels and error messages, aggressive live validation, or horrendous fire hydrant and traffic light puzzles.
And sometimes you might be told that your name is “wrong”, or that your address is “invalid” — although it is most certainly your name, and you’ve been living at that address for the last decade! In this newsletter, we look at some of the challenges around web forms, and how to improve web forms UX.
P.S. You’ll also find plenty of insights around design patterns for data tables and filters in our friendly video course on UX, Smart Interface Design Patterns, updated yearly. Use the coupon code IMPACT to save 20% off today.
Also, it’s your last chance to get friendly pricing on Smashing books (eBooks included, of course!) and online workshops to boost your skills and dive deep into front-end & UX challenges. Let’s bundle up and save!
Let’s finish 2024 with new insights and optimism!
— Vitaly
1. Form Design From Zero To Hero
Whether a user wants to renew their passport, send an email, or buy something, every meaningful interaction on the web is achieved with the help of a form of some sort. And while a form might seem like an easy thing to design at first glance, there are quite some pitfalls and usability issues to watch out for.
To help us design forms that everyone can use and complete as quickly as possible, Adam Silver compiled tips and resources for good form design. The guide doesn’t cover new and innovative ways to design forms but is rather a fantastic entry point to save you time on the basics. With lots of links to further reading resources covering everything from labels and microcopy to form validation and choosing the right input type, you might want to keep it close for future reference. (cm)
2. Live Validation UX
Live validation in a web form is useful, but the costs can be quite high when it fails. How can we do better? How can we implement validation that is helpful for the user while avoiding unnecessary distractions? Vitaly wrote an in-depth guide to live validation UX in which he explores the many faces of live validation, its problems, and its strengths.
For a smooth validation experience, Vitaly recommends using just-in-time validation, with a reward-early-punish-late pattern, and validating input on submit. By doing so, you avoid unnecessary distractions, complex logic, and layout shifts and communicate errors without annoying users too early or too late. As a result, error recovery speed will certainly be slower, but the number of errors might be lower as well. (cm)
3. Placeholders In Forms
We’ve all come across forms where the hint or even the form label is placed directly inside the form field. And while the design decision saves space and has a nice minimal aesthetic, it can hurt usability more than aid it.
Katie Sherwin from the Nielsen Norman Group argues that placeholder text within a form field makes it difficult for people to remember what information belongs in a field and to check for and fix errors. She recommends floating labels as a better and more accessible alternative.
Daniel Berryhill also makes a stand against using placeholders in text boxes. He summarized why they are problematic and what we can do instead to make crucial and helpful information always visible. (cm)
4. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend 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:
- How To Measure UX and Design Impact ux
with Vitaly Friedman. Dec 4–12 - Hybrid Apps with Web and Native Technologies dev
with Átila Fassina. Jan 9–17 - The Power of Storytelling ux
with Chiara Aliotta. Jan 20 – Feb 3 - Design Patterns for AI Interfaces ux
with Vitaly Friedman. Jan 22 – Feb 5 - New Front-End Adventures, 2025 Edition ux
with Vitaly Friedman. Jan 27 – Feb 10 - Accessible Typography for Web & UI Design Masterclass design
with Oliver Schöndorfer. Feb 10–18 - How To Measure UX & Design Impact (video course) UX
with Vitaly Friedman. 8h video + UX training - Jump to all workshops →
5. Better Segmented Controls
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 case study “A better-segmented control”, Runi Goswami, a product designer on the Lyft team, describes the struggles the team went through when designing a segmented control, and how they ended up with a form selection flow chart as a result. A handy little helper to take away the guesswork and align decision-making across a team. (cm)
6. False Assumptions About Names
Have you ever had a form tell you that your name has invalid characters or that it contains errors? Our names are central to our identities, so when a form suspects an error in a name, it’s as if it doubts the person exists. So how can we prevent our users from what is probably the most frustrating experience they can possibly encounter?
Having lived in Japan for several years, Patrick McKenzie knows from experience what it is like when a system breaks as soon as he enters his name. To help developers ensure the forms and systems they create allow all names, he wrote a list of 40 wrong assumptions to watch out for. A good foundation whenever you write a system that touches names. (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 Geoff Graham (gg), 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.