Tips For Better Form Design #1
I was recently filling out a web form to sign up for a service, and as I completed the form and hit the submit button, I was hit with the infamous “that user name is already taken”, so no big deal right? I can just pick another name… well actually it wasn’t that easy… you see the form had reset, and not only did I have to start over, but there were no suggestions for user names. So I was left to play the guessing game, with a reset form as a penalty for every wrong answer.
Web forms are a very integral part (if not the most integral) of the web now, and will become even more so in the future with the rise of web applications, and mobile technology. They have affect how we interact online, so the smallest of details can impact users interaction on our site positively or negatively.
Simply put web forms matter, we use them to buy, gather data, build online community, and make money (just to name a few). So if we are not taking time to clearly think out our forms, and how to make them as helpful, not to mention painless as possible, we could really be selling ourselves short, by not tapping into the potential for increased conversion.
So I have put together a list of 10 ways we can improve our form design. We will be posting 1 tip per week.
Most of what you will read here has been gathered from articles, conference sessions, and books in an effort to provide a comprehensive look at form design. Of these resources one the most instrumental was Luke Wroblewski’s book “Web Form Design”. You cam learn more about it here.
With that said lets get started.
1) Provide a Clear Path to complete the form.
Nothing is more frustrating than filling out a form that seems to go on for days with no end in sight. Forms need to have a clear focus and direction, progress needs to be indicated, and the flow of the form layout should help provide a direct path to completion that is easy to navigate.
Show progress
Use progress indicators to communicate how long the form will take to fill out, and where the user is currently is in the process.
This is a nice indicator that amazon.com uses during the check out process. I like the general nature of the progress bar because it doesn’t promise anything, but it lets me know that there are a few major steps so I know what I am in for.
Form Layout
The layout of a form is also key to providing a clear path for the user. If we are leading the user all over the page the form can become cumbersome, and lead to frustration, which then leads to user errors, and ultimately the user abandoning the process all together.
The image below is a screen capture of a PayPal form for transferring funds to another account.(from Luke Wroblewski’s book “Web Form Design”) If you follow the arrows you will notice that the flow of information goes back and forth, there is valuable information presented here, but the information isn’t streamlined and I have three identical buttons at the bottom so I can easily choose the wrong action item.
This may seem like overkill, but we cannot underestimate our users. Instead of leaving them in a maze of information, we should lead them to the desired result.
Now look at the same form with a more direct and streamlined approach follow the arrow it shows that the information, and actions are streamlined, almost like going down a checklist. The send funds button is now the only button, the edit and cancel buttons have been changed to links so there is no confusion over the desired and correct action.
Simple communication as seen in the progress bar on the amazon.com site, and streamlined form layout are easy ways to present a clear path to completion and lead the user to the desired result.
Wrapping Up
This wraps up tip #1 in the Better Form Design series, I would love to hear your thoughts on the above points, as well as any tips you may have for presenting a clear path to completion in form layout and design.
Form layout is so important, and you’ve contrasted good vs. bad practices nicely with the eye movement arrows. There has been a lot of eye tracking research when it comes to form design, and all of them show that users want to move their eye straight down the left side of a form (and indeed the straight down the left side of everything).
@brian,
thanks for reading and commenting man… make sure to check out the book by Luke W. great stuff in there about form layout.
Glad to be the first to comment on this. Form design is something that is very much overlooked by designers and developers alike, as long as the thing “works” nobody really seems to worry about it too much. This always bothered me because I always felt forms should be designed to compel people to go through trouble of filling them out, be visually appealing, easy to use, and easy to recognize.
Take the form for your comments for example, I like these, a lot of developers I know would hate the overly padded form fields, but that is why they are not designers. Visually these make more sense to “non techies” and are visually balanced. You also handle the alignment of the left hand label text well, something else I’ve seen overlooked or botched before. People sometimes forget to design for PEOPLE! I love that you addressed simple communication and usability as these are key.
I think that this post is something that a lot of people can benefit from, great post Aaron!
Ah it looks like someone posted as I was writing, making me second rather than first…doh.
[...] This post was mentioned on Twitter by Mike Lane, Colin Cavaliere, Tim Schmidt, Roberto Blake and others. Mike Lane said: Tips For Better Form Design #1 – http://bit.ly/xgaAS (via @aaroni268) [...]
Tips For Better Form Design #1…
So I have put together a list of 10 ways we can improve our form design….
Hi Aaron,
What you write about the form design rings true.
It has happened to me more than once that the name I wanted to use was taken and there was no indication of that until I was done filling the form.
Some forms have a script or a button where you can check if the name is available right away.
Providing a clear path to complete the form is also important and helpful. When progress is not indicated and the form goes on and on it is very frustrating.
Especially when the phone rings or somebody is at the door as tends to happen when I’m filling out a form like that it is tempting to just give up and close the browser.
If progress was indicated then pausing and finishing up the few steps that may be left would be a breeze.
I look forward to reading more of your posts.
Vance.
Hi Aaron
Great to see that you’re posting on forms.
I agree that it’s really worthwhile to think about where users are going to look, and to work with their natural reading patterns.
Not quite so convinced about showing progress. Yes, this can be really good if the form has a natural progession like a shopping cart. But if it’s something like a job application, where users have got to come and go as they accumulate information to go into the form, then it can be much more successful to have what we call a ’summary page’, i.e. a top-level page that allows users to dip in and out of the individual pages of the form in whatever order they need to.
For more information and ideas: see our book, “Forms that work: Designing web forms for usability”
Cheers
Caroline Jarrett
@caroline
You are correct… I should have been more clear in defining when to use progress indicators. In terms of a shopping check out i think progress is important, but a job application where the user may need to go back and forth to different areas of the form, or save the form to go retrieve valuable information I definitely agree with you.
Thanks for posting… I am gonna check out the book
~ Aaron I
[...] Tips For Better Form Design #1 (thisisaaronslife.com) [...]
Tips For Better Form Design #1…
I was recently filling out a web form to sign up for a service, and as I completed the form and hit the submit button, I was hit with the infamous “that user name is already taken”, so no big deal right?
…
Form layout is very important, and you’ve described good vs. bad practices nicely with the eye movement arrows. Thanks for sharing..