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 that says "Design like Blink-182"

I’ve just listened to Rick Beato break down “What’s My Age Again?” — Blink-182’s second biggest hit. Funnily enough, he kicked off his "What Makes This Song Great?" series with their biggest hit — "All The Small Things". One person commented: I can’t believe you started the series with All The Small Things when it’s all the small things that makes the song so great. In the chorus of “What’s My age Again?”, Rick points out how most bass guitarists would play continuously, but Blink-182 left a...

Me holding a sign that says "Design like Blink-182"

I’ve just listened to Rick Beato break down “What’s My Age Again?” — Blink-182’s second biggest hit. Funnily enough, he kicked off his "What Makes This Song Great?" series with their biggest hit — "All The Small Things". One person commented: I can’t believe you started the series with All The Small Things when it’s all the small things that makes the song so great. In the chorus of “What’s My age Again?”, Rick points out how most bass guitarists would play continuously, but Blink-182 left a...

Me holding a sign saying learn the material and become a better designer.

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 I transitioned to design. I tried to hide my engineering past because I was worried other...