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 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 supersized forms that take hours, days or even weeks to complete

https://formdesignmastery.com