Sharing what I've learned.
Last week, someone paid me to review their form flow. One thing they wanted advice about was interruption pages. Coincidentally, the following day the GOV.UK Design System added the interruption page pattern. Interruption pages are designed to pause the user within a journey - usually to warn them about a possible mistake or give them important information before they continue. Here’s an example…
Last week, Kate Ivey-Williams, the Head of UCD on my programme, asked me: “What do you think your role is as a designer?” I said: “Errr… I design products that are easy to use… errr… I realise that’s a rubbish answer…” Kate saved me: “Don’t worry, I put you on the spot” But even so, as a designer you should be ready to be put on the spot because: If you aren’t able to explain what you do, it’s…
Last week I wrote about the problem with using the accept attribute for uploading files. As a quick reminder: When you use the accept to specify which file types will be allowed like this: <input type="file" accept="image/jpeg,image/png"> …the dialog will disable invalid types like this: This is bad because: The disabled files are greyed out making them hard to read Some users won’t notice the…
I recently read a blog post claiming that web components can make your design system framework agnostic. But this is down to the false dichotomy between engineers who: love React (or the current popular thing) hate React (or the current popular thing) React is probably a bad choice for your design system. But that’s not an argument against libraries or frameworks. That’s an argument for choosing…
Last week I posted about why the accept attribute on file inputs is bad UX. The accept attribute lets you specify which file types an input will accept. For example, if users need to upload a receipt, you can do this: <input type="file" accept="image/jpeg,image/png"> That means users can only select those file types. All other files are disabled: This sounds good because it stops users from…
Last week I listened to episode 10 of the Complimentary podcast, “Taking Interaction Design from Good to Great”. Anthony Hobday, one of the hosts, gave an example of applying for a driving license on GOV.UK. He said that instead of asking you to upload a photo, the form said: “We notice that you’ve already got a passport with us. Do you want us to use your passport photo for your driver’s…
I didn’t start out as a designer. I started out as a frontend developer. I cared about the craft and spent a lot of time trying to master HTML, CSS, JavaScript and accessibility. Over time, I learned how these technologies affected UX, so as a dev, I started to suggest design changes to improve usability and accessibility. But most of the designers I worked with ignored my suggestions. Years later…
Last week I read a post by designer and frontend dev, Theodore Soti: Stop clearing forms with JavaScript. The browser already knows how. I still see a lot of apps using custom code to track inputs and reset state. But for many forms, you can just use the native reset button. <form> <!-- ...Your input list... --> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> That…
This week I demoed some flows I’d been redesigning to stakeholders. For context, the programme I’m on is huge. We’re redesigning a highly complex, enterprise-grade, case-working system. There are many feature teams, each with their own product manager. I’ve been on the programme for 6 months but it’s so big I’ve not met many of them. The goal was to show how you can use patterns from the GOV.UK…
I will answer this question. Let me explain with a post I wrote on LinkedIn last week: Github’s Design System has banned toast messages. Toast messages are little messages that appear on top of the UI to give you feedback about an action you just took. Banning toast messages is an excellent decision because they’re not accessible and have bad UX. Here’s a few reasons why: (1) They disappear…
Last week, I attended a design crit. One designer shared a multi-step form - here’s what one of the pages looked like: Here’s the last step: Another designer raised a concern that all the change links under “Applicant details” go to the same page. She said: “I’ve seen issues in the past because every change link takes you to a page that has multiple fields. For example, users can get confused when…
A year ago I posted this on LinkedIn: I tell my students to avoid select boxes. Because it’s often better to use radio buttons. But students often say “But it’ll make the page too long”. Yep, but that doesn’t necessarily mean it’s bad UX. See the page I designed to let users select a course. Huge list of radio buttons. But no issues in user research whatsoever. Does this mean you should always use…
Last Tuesday, my article about whether to use “Your” or “My” in user interfaces went viral on Hacker News. In case you don’t know, Hacker News is a site where people discuss and upvote ideas in tech and design. The gist of my article said to use “Your” when communicating to the user, like this: And to use “My” when the user is communicating to us, like this: I read through all the comments on…
In season 8, episode 12 of The Simpsons, Bart presses a button on a talking bear display. The bear asks “Only who can prevent forest fires?” Bart presses “You”. The bear replies “You pressed ‘you’ referring to ‘me’ – that is incorrect. The correct answer is you”. The same confusion comes up in digital products and websites. For example, which of these do you think works best: “My account” or “Your…
In 2008 I worked on a redesign of the checkout flow for Boots.com. We had the RNIB (Royal National Institute of Blind People) do an accessibility audit. The consultant found a lot of problems but the main one I remember was with form validation. She said: It’s not clear that there are errors (even though we were showing a big red list of errors at the top of the page) The error messages are…
Last week I shared the first law of form design which is that: Nobody wants to use your form. Like I said last week, it’s crucial to know because it emphasises respecting the user over trying to make your form fun, engaging, novel or “on brand”. And showing respect means doing everything we possibly can to get that form out of the way as quickly as possible. One way to measure how well we’re doing…
Two weeks ago, a new subscriber asked me: How can we bring joy to people who use enterprise applications for 40 hours a week? It’s a good question because it shows empathy for people who use the same product day in and day out. If you can bring users joy, you should. But it all boils down to what you mean by joy. If you mean surprise or entertainment, then you’re focusing on the wrong problem –…
Last week I ran a Form Design Mastery live call with the UX team at Multiverse. Various members of the team shared their designs for me to review. Here I’ll show you Jamie’s redesign because it shows how good design leads to more problems. For context, the form allows users to log “off the job” learning. Here’s the original design: The category drop down has a bunch of downsides such as: Some…
Last Friday I received a message from Crystal, an accessibility engineer: As you probably gleaned from my post I am building my contact page right now for my development agency. […] I have actually heard about your Form Design Patterns book from a co manager of mine at the Accessibility Book Club but I have got to be honest with you… I was really surprised when I went to your website and found…
Last week I saw this post on LinkedIn: I saw a clever conversion-boosting tactic on TireRack. It’s a perfect example of what happens when a marketer obsessively refines one small part of the buying experience until all friction has been eliminated. Along with the post the author shared a video demo. So let me show you how it works starting from the homepage: Clicking ‘Shop Tires’ opens a modal:…
Last week I posted a UX challenge on LinkedIn. I received 177 responses from senior designers and content designers. But the best response came from Joyce, a self-proclaimed non-designer. The challenge was simple: === Which question label works best for ‘delivery’ and ‘collection’: === Now if you’re thinking that “Delivery method” is best, then you’re not alone. It seems to be the clearest, most…
Last week I posted a UX challenge on LinkedIn. I received 177 responses from senior designers and content designers. But the best response came from Joyce, a self-proclaimed non-designer. The challenge was simple: === Which question label works best for ‘delivery’ and ‘collection’: === Now if you’re thinking that “Delivery method” is best, then you’re not alone. It seems to be the clearest, most…
Last week, prominent designer Anthony Hobday asked ChatGPT: It responded: While ChatGPT came up with the perfect answer to Anthony’s question (ha!), I don’t rate most of its design advice. For example, I asked ChatGPT a relatively simple design question: How do you add hint text to radio buttons? And it made these suggestions: Suggestion #1: “If you want the hint to appear when the user hovers on…
Last week I posted this on LinkedIn: === “Is a multi-column form layout good UX?” No. So why do designers do it? Because they want to avoid scrolling and fill up the whitespace (they think it looks better). But this isn’t for users. It’s for them. In reality multi-column form layouts: are prone to error are slower to use can cause abandonment But most importantly, completely unnecessary. To give…
In 2009 I was working as a frontend engineer for an e-commerce agency and received this bug: The bug said: Pressing Enter when the ‘Town’ input is focused performs a postcode search Pressing Enter should only perform a postcode search when the postcode input is focused. This problem is harder than it sounds so let me break it down: Forms have two types of submission: Explicit submission: when you…
I recently read a blog post about how a GOV.UK service redesigned one of their questions in their application form. The original question looked like this: If you select ‘Yes’ you go here: Looks good. But research showed that some users who had a condition and were happy to disclose it, selected ‘No’ because they didn’t think of it as a disability. To solve this, the team: Merged the two questions…
Back in June 2024, I was a guest on the Complimentary podcast. Anthony Hobday, one of the co-hosts, asked me if I had a working definition of form design. “No,” I said. Not ideal considering I was invited on as someone who cares deeply about form design. I tried to style it out a bit, then later managed to contribute these sage words: “It’s the design of forms!” I knew this was a circular (read:…
On Friday, I met up with a friend for lunch. The day before, he’d been a research participant to taste-test 4 different brands of Jaffa cake. Let me tell you what happened: Jaffa Cake #1: It tasted amazing. My friend took out his phone and submitted a score of 10/10. He then took a sip of water and moved onto the next one… Jaffa Cake #2: It was okay. So he submitted a score of 6/10. As he took…
Last week my friend, Rachael got married. I ordered her a gift using MoonPig and arranged delivery for Tuesday (the day she’d arrive back). But on Monday I received this email: Yes, MoonPig let me choose the date and then ignored it. Also the email was addressed to Rachael, not me. Anyway, I clicked the big red “View delivery options” button expecting to see some delivery options, but I got this:…
A couple of weeks ago, my friend (and fellow designer) Simon Whatley had his GOV.UK service assessed. Simon asked me for a second opinion on some of the issues, one of which was about this screen: Perhaps you can spot the issue? For context, both Simon and I are trained GDS (Government Digital Service) design assessors. And 99% of the time we agree about what the best solution is. But in this case…
Last Sunday I took a break from being a designer to play in the tennis men’s open singles finals. Sadly, not Wimbledon. Just at my local club in North London. Here’s how it went: I lost the first set 4-6 I won the second set 6-3 I lost the final set 1-6 Even though I lost, I was happy. Why? Because I didn’t expected to win. My opponent was the clear favourite and last year’s champion. So everyone…
A couple of weeks ago I appeared as a guest on the Complimentary podcast hosted by Katie Langerman and Anthony Hobday. One of the topics that we talked about was the idea of using toggle switches (over radio buttons and checkboxes). Like I said in the podcast there are definitely some bad reasons to use a toggle switch (they’re cool, different, fun). The so-called good reason to use one being that…
Last week I posted this on LinkedIn: I tell my students to avoid select boxes. Because it’s often better to go for radios. But they often say “But it’ll make the page long”. Yep, but that doesn’t necessarily mean it’s bad UX. See below for the page I designed to let users select a course. Huge list of radio buttons. But no issues in user research whatsoever. Does this mean you should always use…
In case you don’t know David Hamill, he posts regularly on LinkedIn. And last week he posted a UX challenge to redesign the iPhone screen for accepting or declining a call while you’re already on one. This is the current design: Some of the issues may seem obvious to you at first glance, but I found the challenge a lot harder than I thought I would. Let’s dive into the main issues I spotted before…
Have you heard of the “error prevention” heuristic? It means “do everything you can so users don’t make mistakes”. And it’s good advice. But some designers think it means “don’t show an error” which is bad advice. Take the maxlength attribute. If you add maxlength="6" to an input for sortcode, it’ll ignore anything the user types after the first 6 characters. The idea is that it prevents an error…
When you design a product, you should usability test it. Otherwise, you won’t know how well it works. Typically you either: create and test a prototype build it in production and test there Building it in production is usually the most expensive and risky approach so lets leave that out for today. Which leaves us with prototyping. But not all prototypes are created equal. So how do you know which…
My dad was a pharmacist. Whenever I was ill, he’d tell me to take paracetamol. So I did. And it made me feel better. But paracetamol doesn’t actually make you better. It only makes you feel better. It treats the symptoms, not the cause. For example, let’s say you have a headache because you’re dehydrated. But you don’t know you’re dehydrated so you take paracetamol. And the headache goes away. But…
Anthony asked me to tell him why his sentence-style form is awful. A form to join a waiting list laid out as a sentence. In case you didn’t know: I love attacking bad UX. So when I got Anthony’s message, I dashed to the computer to tap out a quick response (which I’ll share in a sec). But I want to point out that most sentence-style forms (also known as natural language forms) are a lot more…
My friend Victor shared this design tip on Twitter last week: He said that if you put the slider values on top, your finger won’t cover them up. It’s a useful tip. But sliders aren’t just bad UX because your finger covers up the values. This is the least of your worries. Here I’ll share why that is (plus what to do instead): Reason 1: They’re hard to control This is because it takes a lot of…
A lot of designers love to save space at the cost of clarity and prioritise aesthetics over content. But once you nail the foundational interaction design patterns, content is often the most important part of design. Button text is a perfect example of this. Once you design your buttons, it’s time to focus on the text. Now on the one hand it’s so subtle that it’s barely worth discussing. But on…
Link to advanced search under the search box I started making websites over 20 years ago. Advanced search is probably one of the earliest patterns I remember from the early days. The pattern is a link under the search box that takes users to a page with search options. How bad can something so simple be? After all there’s just a link, a page and a form. And yes, advanced search is certainly better…
There’s a new form design trend going around: Buttons inside inputs. Anthony Hobday mentioned it by asking his audience if there was any significant difference in usability between these 3 designs: 3 different layouts for an input and button combination Button inside the input Button touching input Button next to the input with space between Guess which one I recommend. One thing I know is that…
Disabling paste is usually done in the name of security. For example, let’s say the user has to type their email address twice. Using 2 separate inputs means a mismatch can be caught. But that doesn’t work if they paste an error from the first input into the second. But disabling paste degrades UX and is a terrible way to stop users from making mistakes. Here’s why: Problem #1: It makes the…
Since 2016 I’ve used, created and contributed to multiple design systems. I’ve seen what works and what doesn’t. By “doesn’t” I mean designers don’t trust it. And as a result they don’t use it. When I’m feeling sassy, I call these people ‘cowboy designers’. Now there are some designers that will ignore your design system no matter how good it is. These people are true cowboys and they wear the…
Picture this. You’re designing a form but the questions are complicated. Users need a lot of guidance to understand each question. But this makes the page long and messy. You run through various patterns. ‘Tooltips!’, you say to yourself. And that’s cool because tooltips keep things clean while allowing users to access extra information. You polish the designs, get them ready for dev and you go to…
In 2010 I discovered input masks. They seemed like a smart way to prevent errors. Because they help users follow a format. And they do so without taking up space. But the truth is that this fancy pattern degrades UX. Here’s why: Problem #1: They’re confusing For example, the cursor advances automatically to the next position. And placeholder characters can’t be deleted. Telephone input mask…
I’ve previously written about the problems with regular sticky menus . In response to those issues, some people suggest showing and hiding the menu as the user scrolls up and down. Bondir’s sticky menu appears and disappears as the user scrolls This seems smart because: the menu gets out of the way to allow users to focus on the content it allows users to access the menu without having to scroll…
Back in 2008 I worked at a software house. We built e-commerce sites for Boots, Argos and Homebase. Registration, sign in, checkout - all the usual forms. And we always did the same thing: little red asterisks next to each required field. We never tested it. We just followed what everyone else did. Fast forward 15 years and not much has changed. You still see the asterisk everywhere but asterisks…
In 2009 I was working on the Argos checkout flow. We were considering focusing the first input when the page loads. The idea was to save users a click (never a good sign). Back then we had to use JS, but now we have the HTML5 autofocus attribute. Either way, automatically focusing the first input causes 5 specific problems that degrade UX: Problem #1: it makes the page jump unexpectedly When any…
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 became clearer that nested fieldsets can be problematic. Here’s why: Problem #1: screen readers only announce the inner…