The perfect file upload pattern


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 license?”

You just click ‘Yes’ and move on.

Anthony said this design is “next level”.

I agree.

The best file upload pattern is the one where you don’t even have to take a photo, let alone upload one.

Because if you have to take a photo that would mean:

  1. Leaving your computer
  2. Getting someone to take your photo
  3. Returning to your computer
  4. Transferring the photo onto the computer

That’s significant effort.

And then you have to upload it by:

  1. Clicking the file input
  2. Browsing to the folder
  3. Selecting the file

Or

  1. Opening the file browser
  2. Browsing to the right folder
  3. Dragging the file onto the drop zone

And that assumes the file size and format are appropriate so you don’t get validation errors.

Even if you have the clearest content and an accessible interface, uploading a file is the most labour intensive form interaction.

Which is why clicking ‘Yes’ and moving on is next level UX.

When Anthony described the experience, he never mentioned:

  • layout
  • typography
  • spacing

Because what impressed him had little to do with the interface.

Over the last 10 years, I’ve designed 20+ different products and services for gov.

It takes a lot of effort to produce such an effortless interaction.

It often involves:

  • coordinating across departments
  • getting organisational agreement
  • hooking up the backend

But it’s 100x harder to pull off next level UX if you don’t know the fundamentals.

If you’d like to nail the fundamentals and get to next level UX, you might like my course, Form Design Mastery.

Here are some of the things you’ll learn:

  • A design pattern that increased revenue by £50M per year - surprisingly simple, yet most designers overlook it
  • How to stop users abandoning on the last step of a multi-step form - right when they’re about to convert
  • How to convince stubborn stakeholders to remove unnecessary questions - even when they’re certain they need them
  • Why native radio buttons are a usability problem - and the fix that improves both usability and accessibility
  • Why most hint text gets ignored by users - and how to guarantee it gets read
  • The $300M form design mistake that most designers don’t even realise they’re making
  • How to help users complete super long and complex forms that take hours, days or even weeks to complete

https://formdesignmastery.com

Cheers,
Adam

Design tips to help you create products that are ridiculously simple and accessible to use

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.

Read more from Design tips to help you create products that are ridiculously simple and accessible to use
Me holding a sign saying "Test boring patterns first."

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: An h1 heading to ask a simple question A paragraph to...

Me holding a sign saying, "We all have fuzzy edges."

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...

Me holding a sign that says, "Good UX is holistic."

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...