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.
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:
That’s significant effort. And then you have to upload it by:
Or
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:
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:
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:
https://formdesignmastery.com Cheers, |
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.
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...
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,application/pdf"> That means users can only select those file types. All other files are disabled: This sounds good because it stops users from picking an invalid type before they submit - which would then cause an error. But as I...
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...