The Hard Part First

Avatar of Chris Coyier
Chris Coyier on

I like the submit form on Art in my Coffee. It packs a lot of features into a compact space and is clear about what you are able to do and what is required of you. But best of all, I like how the very first thing it asks of you is the hardest part of the whole form.

It’s just a simple file input box, why is that the “hardest part”? Think what that input box represents.

  1. User has a device capable of capturing a photo
  2. User has transferred that photo to his/her computer
  3. User knows the location of that photo file on his/her computer
  4. User is ready to brave the file selection dialog box to select it

In a form like this, if the user doesn’t have a digital photo ready to go, they really shouldn’t be filling out the submit form. Having the file input as the first thing stops folks from doing any unnecessary work.

Conversely, users that do have an digital photo ready to go get to choose it right away. That act of choosing a file gets them heavily engaged in the process of filling out this form from the get-go. Choosing a file is a pretty intimate experience as far as web forms go. Once that is done, there will be some excitement in filling the rest of it out so it can be submitted.

I think this goes beyond this particular form. The overall message being: let users do the thing they want to do right away (likely “the hard part”) and the rest of the form will be a breeze for them. Take this example:

Here we ask if the user has a question right away. They are probably at this form to begin with because they do have a question. Let’s let them ask it first thing. Once they’ve written it out, they are pretty committed to this form and have some momentum. Filling out their name/email/phone will be easy.

As opposed to this:

I can imagine this being met with far less enthusiasm. Ugh, more hoops to jump through, I just want to ask a question. Of course you are asking the exact same questions in both examples and a purely logical user would understand that of course name and contact information needs to gathered. But that doesn’t matter, the user is thinking about their question, not what other information this form wants. Let them do the hard part first.


I wish I had some A/B testing to throw at you here, but I don’t. I’d like to do some on this some day. So this is just me tossing out what I think is a good UI choice based on my own professional judgment.