The Hard Part First
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.
- User has a device capable of capturing a photo
- User has transferred that photo to his/her computer
- User knows the location of that photo file on his/her computer
- 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.
Loading ...
I totally agree with you here Chris, sadly we see to many examples of web forms where the user is put off by the process.
Customer feedback and information is key to the whole business for our clients and therefore for us.
A nice touch is the comments page on your own site, it has the ability to remember me after my first comment so makes it easier for me to add future comments.
Good point Mark, I think being remembered by a site really makes a user feel at home almost instantly, at least it’s true for me. Another short and to the point article, well done Chris.
One example of a bad form is dzone.com signup page where they ask you tons of info that isn’t really needed. And on top of that it’s all REQUIRED.
I just want an account to submit my article links there, i’m not asking for a credit card.
I think getting the hardest part of a form filled out first makes the user finish the form, versus easiest then abandon. But again, with no hard data sets it is really hard to say.
Interesting, I hadn’t thought of this. Excellent points about engagement and importance.
That’s pretty cool, Something so simple too. Just looking at the forms with the hard part first look more inviting. To me anyway.
The biggest takeaway and strongest point from this article: “let users do the thing they want to do right away”.
I very recently convinced the team here to make the file input the first element of a file upload form for this very reason. Once the user feels like they are on their way to accomplishing their goal, they’re more inclined to choose a few options regarding that selection.
very interesting – and simple. I’m kinda thinking i should have been doing this a long time ago.
Excellent article because it makes good sense. I have a website app that allows members to post events on a community calendar. Using this basic usability concept, I can rearrange the Add An Event form to allow them to enter the fun information first, like event title and description.
Maybe the comment box on this blog should ask for my comment first, then my name/email ;-)
@Jeff – If its a shared computer like one found in a university lab, I think it helps to have the name, email, website first.
Especially if the name, email, website “is saved”
Very good!!
Those are some great points.
Great idea. Think I’ll do that on 5 client websites right away.
Another great observation from Chris. I’m going to rethink some of my forms out there.
I never thought if it like this, I always put the standard contact forms up that have Name/Phone/Email/Message. But you make excellent point, I’ll be sure to apply this logic in the future, thanks!
So awesome! I’d say over half the time, you write exactly what I’ve been thinking about. It frustrates me to no end when a form doesn’t just get to the point of my being there first. When there’s 10 pre-qualifiers for me to fill in beforehand, I hate it. Especially when I have the perfect phrasing of a sentence in my head that sometimes goes down the drain because I forgot it in the process of filling out 10 info fields.
Good thinking Chris. It seems so obvious now you say it. Presenting the tedious stuff – like name, email and so on – almost as an afterthought rather than an obstacle. I like it.
You have to be careful how you apply this. I’m involved with several e-commerce websites where an important part of the customer process involves uploading photos. In many cases, the customer is NOT prepared to upload when they start. Asking for the photos first would result in lost sales. Some would return of course, but some would not, just in the course of life.
The upload comes last, after the account is created and payment has been made. Now the customer really is committed and can return anytime to finish the upload.
You could also argue that the hard part in this case would be submitting payment, not uploading the photo.
Agree with Juan. The order of form fields depends on the purpose of the form
Quite a cool theory, I like it a lot. It makes sense to get the user to do the difficult part right off the bat so the rest is a breeze.
I agree with your amateur psychology approach! Seriously, it does look a bit less imposing.
Genius, these are the little things I love in webdesign, the details make the difference! thanks for sharing!
I think the main point to get out of this article is to start thinking a little more critically about some of the things you do. For me, creating a web form is more an act of necessity and while I make it very functional and attractive enough I rarely think about the structure and the process. It’s good to sometimes analyze the things we do that are traditional and ask the question ‘Is this really the best approach for this application?’. Asking these questions breeds innovation even if it’s on a very small scale.
This is an excellent point to take into consideration when designing forms. Especially if it’s a form where you ask a question or provide feedback, I find myself filling out that part first anyway and then going back and filling in name, email, etc.
This is the reason why I like blogs that have comment forms where the textarea you type your comment in is above the all the other stuff (name, email, website, etc).
It just makes me more inclined to leave a comment I’ve noticed because it puts first what I’d want to do if I were to do it.
Ya know I never thought of this before. It is a real good point thanks for bringing it up and explaining Chris. I shall implement my forms in this manner from now on!
Another thing I’ve learned from this website, awesome job Chris and a very good point man. Thanks for teaching !
That’s a very good point you’ve got there! I’ve never really thought of that!
Will be implemented on future sites from now on.
I also agree that this is a good point. It makes me feel like I’m contributing instead of just having some information sent (personal details).
In theory this it looks good. But, take the comment form on this blog for example. We can see this at a glance, the rule of “dont make me think” applies here, users can see what the form is about in a look. Does it matter to rearrange them?
I will really be glad to see A/B testing done on this.
Thanks for the tip though.
Interesting – I’d never really considered the order of the fields before, but think I’ll do something different next time.
It might be the hardest part of the form, but in most cases it’s also the meat of the form, the reason it’s being completed in the first place. It only makes sense to place the important part first.
I like the idea of arranging your form to get the hard part out of the way, at least where that’s appropriate/desirable. But, and I know I’m being picky here, but it really bugs me that your first example form has two different styles for text inputs. I know one of them is a file input but still… I’ve been in enough user acceptance sessions to know that a good number of people are not going to think those email and name inputs are inputs and will get confused and annoyed when the form fails.
Really interesting Chris, this is an excellent insight into what seems extremely obvious when it is highlighted. I will take this onboard and will use this when creating new forms, thanks…
That’s such an example of how we get stuck on things because it’s the way we have always done them. I like the new thinking. Thanks again Chris for running this blog and sharing your insights!
Great post, Chris! Just a grammar error I caught… Conversely, users that do have an digital photo ready to go get to choose it right away. …a digital photo.
I totally agree with you chris. i think you have tackled the hard part pretty nicely. Good job!
That first submission form is the standard Tumblr submission form for all Tumblr blogs.
Do you plan to do that on css-tricks? By that I mean putting the comment field on top of the user details fields?
Nice and useful idea…
Web forms will get more and more usable now :)
Thanks for sharing!
Great article.
I just wanted to point out that the submit form on Art in my coffee, is just the default submit form from tumblr.com since Art in my coffee is a Tumblr blog.
So I think they should get the credits for this form.
I agree. I use Tumblr for my blog, and if I wanted to take submissions, I could very easily switch on the option to use that form.
Totally agree with Chris in this regard. Forms should be designed so that the user feels comfortable and as much easy as possible.
It might be worth a little more effort from the developers perspective, but at the end of the day, it is the viewers whose view matter the most.
How about rethinking actual comment form? WordPress always start with name, email and website, while we actually want to type the comment.
Good points, its all about first impressions with all elements
That was a very interesting read, I have never actually thought about that.
Wow this is an absolute gem, very insightful I will certainly be taking this approach on future sites. :)
I’m with Ben where do you get these ideas
Very simple and insightful. Good advice, I think I’ll be applying this idea from now on.
Interesting point Chris, it just shows that a lot of thought should be put into designing forms. Most people don’t realise all the effort that a good designer can put into form design to achieve the correct flow.
Some A/B testing would be very interesting and you would no doubt find that doing the hard part first IS indeed “best” in my opinion.
Good article and examples.
I’ve decided to switch things around on my contact page. We’ll see how it works out.
Thanks again.
Nice article. Maybe it’s not that much about keeping the “hardest” part first as much as letting the user first do what they came there to do.
Hmm, I will start to apply that.