In 2016 I worked at the Department for Work and Pensions. I was working on a complex form field made up of nested fieldsets. It was inaccessible which surprised me because I was only using fieldsets, legends, labels and radio buttons. Nothing fancy. But as I did more research, it…

2 weeks ago I sent an email to 3,855 subscribers using ConvertKit. But 177 of them were instantly unsubscribed without clicking the unsubscribe link. What happened? These subscribers work at organisations with strict security. Every link is automatically opened to check it’s not malicious. Fine, except that: my subscribers were…

In 2009 I prototyped a form that disabled the submit button until all the answers were valid. The idea being: the best error is the one the user never sees. But disabled buttons takes this rule to the extreme. And as a result it can frustrate users or worse, cause…

Designers use sticky menus (menus that stick to the edge of the viewport) to make them easy to access on long pages. But this fancy pattern hurts UX far more than it improves it. Here’s why: Problem #1: They constantly take up space They get in the way of the actual content. …

Sites like Netflix organise programs into rows by category which can be horizontally scrolled into view. This gives users an overview of every category without having to scroll through all programs. This pattern is accessible, responsive, and consistent across screen sizes. And it’s pretty easy to implement. That’s a lot…

A few weeks ago I did a live redesign of the ASOS checkout flow for Smashing TV. And one of the things I glossed over is around the difficulty of building an accessible autocomplete control for things like picking a country from a long list of options. As I say in the talk, building an accessible autocomplete control is quite easily one of the hardest things I’ve ever made. But they’re well worth the effort to make for users because they can make a long-winded, frustrating interaction relatively painless.

Originally published on my blog. Many of the components we design for the web are made to save space. It’s interesting that we work so hard to save space on a medium where we have infinite space to work with. Of course, I’m partly speaking in jest here. A heavy…

This is an excerpt from Form Design Patterns. We’re in the middle of chapter 2, A Checkout Form, where we’ve been looking at the payment details form consisting of card number, expiry, security code from fields etc. The number input (<input type="number">) lets mobile users more quickly type a number…

People seem to think that progressive enhancement means more work and designing for the least capable browser. And at the cost of delivering better experiences for people who use new browsers. To the contrary, progressive enhancement is often less work and enables us to design the best experience using the…