|
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 from the GOV.UK Design System: It has:
All within a blue panel. I love the GOV.UK Design System. I use it and defend it all the time. But on rare occasions I think it could be better. The interruption page is an example of that. Here’s four reasons why (plus what to do instead): Reason #1: The interruption page includes multiple actions to pick fromGiving users two ways to proceed means the onus is on the user to slow down to pick the right one. You might say that’s a good thing, because the idea of the pattern is to make users pause. But firstly there’s a better way to do it (I’ll get to this shortly) and secondly: Reason #2: Users may accidentally click the primary actionThis can happen if the user:
Users only tend to slow down when they must or want to. And the interruption page pattern makes this worse because: Reason #3: Interruption pages do not look like part of the flowInterruption pages put the content inside a panel. This makes it look like a banner or advert. Something to dismiss, rather than essential for completing the task. As a result, users are more likely to mindlessly proceed. Reason #4: The button label is unconventional and doesn’t stand aloneThe button says “Yes, this is correct”. But this is unconventional and doesn’t make sense without reading the rest of the page. Buttons should describe the action being taken. But most importantly: Interruption pages are unnecessaryA form is just a series of questions. This is just another question. Screens should always be designed to pause the user so that they make a clear, conscious decision. You don’t need a visually different screen without form controls to do that. You need a good question:
I understand the appeal - I’ve been drawn to the the interruption page pattern myself. But whenever I’ve been close to using it, I stop myself and use a standard boring pattern. Then I test it in research to see if there are issues. So far, I haven’t found any. To be fair, the guidance says not to use one unless: “there’s evidence of a clear need to pause the user journey” But I haven’t seen any evidence that the boring patterns in the GOV.UK Design System won’t work for this. I’ll be adding this as a new rule to the Form Design Mastery handbook, bringing up the total to 81. If you’d like access to the other 80 rules (with many more to come), then you can get the handbook as part of Form Design Mastery: https://formdesignmastery.com Cheers, |
Join 10,000+ designers, content designers and engineers who get my free weekly newsletter with evidence-based design tips (in 3 minutes or less). Mostly forms UX, but not always.
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 much harder for your teammates and stakeholders to value what you do. I messaged Kate later...
Last week, I ran a live training on file upload UX. Every day leading up to the event, I was stressed, constantly thinking: “Shall I just purchase one month of Zoom?” Let me explain: I use Circle to run my courses and it comes with something called Live Rooms. It’s like Zoom. But Live Rooms is better than Zoom because: it’s quicker and easier to set up for me it comes with my Circle subscription for free it automatically posts the recording afterward the call it has better UX for my students...
Last week I wrote about the problem with using the accept attribute for uploading files. As a quick reminder: When you use 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 subtle greyed out styling - so will try clicking the invalid files anyway And this will make the...