Hej Smashing Friends,

Forms are the cornerstone of interactions on the web. We’ve been designing them for decades now, so we should be pretty good in 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, or 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.

Get ready for 2025 with your very own custom bundles, Browse all Smashing Books →

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.

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 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, 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)

From our sponsor

😘 Kiss Bugs Goodbye

QA Wolf delivers 80% automated test coverage in weeks, not years. Transform your QA with our AI-native service and see faster releases. Discover the QA Wolf advantage!

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)

7. Recent Smashing Articles

• Why You Should Speak At Events As An Early-Career Professional
• AI’s Transformative Impact On Web Design: Supercharging Productivity Across The Industry
• Open-Source Meets Design Tooling With Penpot
• Bundle Up And Save On Smashing Books And Workshops
• Alternatives To Typical Technical Illustrations And Data Visualisations

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