Web Forms for People
Dec 14, 2009 In Design By Luke WroblewskiAs the Web has grown, so has the number of ways people use it. Today, it’s not uncommon for Web users to shop, chat with friends or strangers, manage their bank accounts and exercise routines, share photos or videos, and more. In fact, if it can be done online, it probably already is
While this diversity adds richness to the Web, the way most of these tasks are completed does not. Whether it’s checkout in e-commerce, comments on news articles, or managing a fitness routine—Web forms often sit between people and their goals.
Why Web Forms?
Online, Web forms bridge the gap between people, their information, and a Web product or service. They can streamline sales or key customer actions, build communities or conversations, and more. These crucial interactions not only keep businesses running—they also let people accomplish what they want. So why don’t organizations care more about Web form design?
Perhaps they assume Web forms are just "some input fields and a submit button" that should be displayed anytime “data needs to be collected” from users. Maybe they aren’t aware of the many ways Web forms can be optimized to deliver significant results (like an additional 300 million in annual revenue). But most likely, they are simply building Web forms for themselves and not for the people using them.
It’s Not Data Entry
No one really wants to fill in a form; they want what is on the other side: to buy a book, to register to vote, to join a club. They aren’t slogging through a Web form to practice their data entry skills. They have clear goals. Sadly,many Web forms do a poor job of aligning with people’s actual objectives.
Consider this simple form found on the mobile social networking site Brightkite. If someone wants to “keep up with your friends,meet new people, and discover new places” as the service advertises, he or she simply needs to create an account (figure 1).
Figure 1: Brightkite’s registration form April 2008
To begin the process, a user must select a username that is alphanumeric, 3-15 characters long, can have underscores but not spaces, and can’t be a username already set up on the mobile version of the service. Are any of these requirements there so people can select a name that best represents them? No. They are system requirements that force people to adapt to the security models or back-end data structures of the site.
The next set of questions doesn’t fare much better. Brightkite needs your email address so they can send you a confirmation note. You need a password that is at least 3 characters long and you need to repeat it so you don’t send any typos to Brightkite. Then, you verify you are a human BY thee helps reel in the information Web forms require. When constructing a Web form, consider:
- Is this information necessary to give people what they want (the core purpose of the application)? If not, chances are people will question why they are being asked.
- Will there be a better time to collect this information? Asking people for information once they are already using an application is often more successful than asking them before they start using the application.
- Is there a way to explain why certain information is required? Clarifying how the information being collected aligns with people’s goals helps reassure them that they are making forward progress.
- Are there better ways of collecting the information needed? After all, Web forms are not the only way to get input from people online.
To illustrate this approach, let’s see how Brightkite redesigned their experience (figure 3) to put their core purpose, “keeping up with your friends”, front and center. The primary action on the site’s home page now invites people to connect to their Facebook friends, instead of creating a new Brightkite account. This one-click process sets people up with an already existing identity and friends (from Facebook) without the cumbersome sign-up form shown in figure 1.
Figure 3: Brightkite’s home page November 2009
So while Brightkite and tookmark are different services, they both were able to avoid lengthy sign-up forms, reflect their service’s core purpose through a few lightweight interactions, and make people instantly successful.
That’s the essence of building Web forms for people. When done right, there are barely any forms left—only successful users.
Learn More about Web Form Design
If you’re looking to make your Web application’s forms better, then you don’t want to miss Luke Wroblewski’s Web Form Design session at MIX 10 in Las Vegas, NV. It will be packed with best practices you can put to use right away. Anyone in the MIX community can also get Luke’s book, Web Form Design: Filling in the Blanks, at a special 20% off (with discount code MIX).
Follow the Conversation
56 comments so far. You should leave one, too.
Thank you very much for this. Full of nice tips!
Great article and very helpful. Our web forms all fit into your bad examples portfolio!
But I already have changes from what you wrote in the works.
Excellent article. I love anything that advocates enhancing the user experience after all it helps us all in the end.
Luke,
Great article. Most people don''t even think about the experience of the login page. I think that form (not just web form) design is one thing that is not thought about in the business world, yet could be one of the items that could boost productivity and cut done on frustration for the people using them.
Cheers,
Sean
Excellent article! However, how would you argue this same point when dealing with an ecommerce site that requires unique information about the User that deals with a more personal issue: finances.
Isn''t the purpose of data-driven forms specifically geared towards protecting a User''s identity and ultimately their personal/corporate finances while at the same time provide a means for the ecom site to gather unique information about that User that will be used at a later date to verify a purchase ultimately aligning them with their goal?
It seems to me, that although you talk about aligning web forms to the User''s intended goal should coincide with one another, Users are accustomed to lengthy forms that provide a sense of security when their credit card number is involved.
I agree that lengthy web forms are not fun (or attractive) but they are also necessary in my view.
Thanks all for the comments.
Efren, e-commerce sites can follow the same principles. In particular:
" think about the information that will allow people to accomplish their goals with minimal overhead and a clear sense of purpose—so they don’t question, “Why am I being asked this?"
In an e-commerce form, it makes sense to ask for billing info (otherwise, how will I pay for the item), it also makes sense to ask for shipping info (otherwise how will I get the item). It may not make sense to ask for things like phone number (why do you need that).
If you are interested in some Web form design techniques specifically for e-commerce sites, here''s a recent article I wrote that might help:
http://www.lukew.com/ff/entry.asp?968
Thanks.
I haven''t RTA yet but just want to say that doubled up first paragraph thing is quite annoying. Is there a reason for it?
Basically, all you''re recommending doing is pushing off all the dirty deeds of collecting important info onto another site - i.e. Facebook or Delicious. *Somebody* has have the "are you a human" test and the "enter a password and a copy so you can actually still log in even if you type like I do" nastiness. And frankly, is it really all that wise to trust Facebook or Delicious with that task?
SO - lets see a "real" signup dialog that doesn''t try to ride on someone else''s coattails *and* follows your customer-focus prescription.
Steve G.
Luke, always appreciate your insights. I find that good forms live and die in their interactions: error messaging, buttons states and more. Have you or will you write on this topic?
Hey Luke,
often it''s all that simple if you just take a moment and think about it - thanks for this very useful article :)
Eike
Steve,
There''s a number of ways to apply these principles to sign-up forms so that people''s first experiences with Web applications are aligned with their goals (and making progress toward them) vs. filling in seemingly arbitrary form fields.
One approach (as you suggest) is leveraging work people have done elsewhere (so they don;t start from scratch with your app). Another is sequencing what you ask in a way that helps people understand what a Web app does while making them successful using it. Here''s several examples: http://www.alistapart.com/articles/signupforms
A third approach is being vigilant about what you ask to ensure people don''t question if the things you are asking are aligned with their goals.
Any question you ask people in a Web form requires them to parse it, formulate a response, and then input their answer in the affordance you have provided on the form. Being vigilant about every question you ask allows you to remove questions that are not absolutely necessary. And the fewer questions you ask, the better the odds are of people completing your forms quickly and easily. Here''s an example:
http://www.lukew.com/ff/entry.asp?910
Hope that helps.
Kirby,
Here''s a few resources on buttons and errors.
Errors: http://www.lukew.com/ff/entry.asp?949
Buttons: http://www.lukew.com/resources/articles/PSactions.asp
Buttons: http://www.lukew.com/ff/entry.asp?740
Thanks.
Good points in principle, but my thoughts echo Steve''s.
I''m a believer in many of Facebook Connects'' benefits, but a discussion of FBc''s merits mean we''ve strayed off point - I thought this article was about designing forms for our own products?
I would have liked to see how Britekite improved their real login form, the one accessed by the "sign up" link underneath the FBc logo.
While I''m not going to argue the need for good form design, and any attempt to educate is more than welcomed (and I must say, I expect to hear "Gradual Engagement" mentioned in the same breath as "Progressive Enhancement"); I''m afraid I''m also in the "Steve camp"!
HOWEVER I don''t actually consider this a forms issue; its much more that 15+ years into the webs main-streaming we STILL lack a decent portable secure TRUSTED mechanism for user identification and transfer of basic information (e.g. address details).
If only we could solve the hard problems, maybe the easier ones would fall into place ne?
Great share !!
Thanks
great roundup, thanks :)
great roundup, thanks :)
You''re not comparing apples with apples here. To do so, you''d be comparing what Brightkite has (still) underneath that little "sign up with your email address" link in the screenshot.
While it''s simpler, it''s not much simpler than the original form. Clearly, therefore, the process can only be made a small amount simpler.
Unfortunately, that kinda negates this article, no?
Luke - another fine article about your expertise. But I wonder...doesn''t anyone else ever talk about forms? I do think you are THE expert, but it''s a bit off-putting to only quote yourself when defending your ideas, no matter how right they are. Do any big usability names disagree with you? I suppose that''s for another time, but still...
This is a great article. I am writing a security script right now and it is true that the user has no idea what goes into writing forms so that it creates as little frustration as possible.
Luke, enjoyed your presentation at An Event Apart.
P.S. this comment form does not pass muster. Labels are right-aligned, but could be over/under. Grey text in textboxes disappear but don''t reappear after losing focus. Alias field should be visually associated with profile pic at right.
See, Luke, you''ve ruined my online experience with all this knowledge and understanding. My eyes have been opened, and they will not close no matter how hard I try. Now I have to go back and redesign all of my own websites.
Hi Luke,
Thank you for the clear showcase of simpledesign.
It''s true though that in a large amount of case, Business and technical constraint limit the usability of the form.
I4ve seen it first hand in my prvious job were the core objective were to "collect user data".
It took some help from outside to get to the point were the data was collected in a "friendlier way". But yet, the data needed to be collected, and now, not later.
Form are most of the time a mirror of the organisation internal processes. Thus, if the process are not so tight, clear and aligned with the business goals, so will the forms.
To put it bluntly it''s like saying: "let''s try to collect as much as we can now, because we don''t know if we''ll be able to get them [the target] to come back again..."
Hey Luke what do you think about wufoo. Do you have any idea about this company. I heard a lot about this company as they give good and attractive, contact forms, survey forms and all. I need a free webform script. Where can I download it?
Hey Luke,
I love a good form, always have. I came across this about 3 days before reading this article. It stopped me in my tracks and note to self: I want forms like this.
http://animoto.com/gifts/new (example only)
Thanks for a great article with your tips, my users are going to have an awesome time.
This is really cool...it will be great when you can grab the sourse code. One of my pet peeves about this is that it doesn''t work in safari. Seems alot of recent Ajax apps have trouble with Safari..ie Google Pages.
http://www.1stworkingcapital.com
Just to clarify. The Wufoo demo has one section ("Add Fields" tab on the left side of the page) that is done in Flash. The entire right side and the other two tabs are done in JavaScript. And in the public demo, no Ajax is being used.
All forms that are created will be standards compliant, and do not rely on Flash or JavaScript. We only use Flash and JavaScript for the form builder, but not the forms themselves.
Regards
http://www.mudlickmail.com
Why do people rave about Facebook? I find it tiresome, so much crap and advertising. Any site that fronts it''s signup with Facebook Connect is an instant turn off for me.
Very informative thanks! Web forms aren''t going anywhere lol any time soon.
Valerie J asib.org
What''s the point of life said the guy up there? There is no point he said!
Thanks for the update, I am also looking to add some new webs forms to my website at the moment which made me reading this article opportune.
Thanks for the update, I am also looking to add some new webs forms to my website at the moment which made me reading this article opportune.
By the way, excist there any plan for a second and updated Edition of "Web Form Design"?
Very nice article best regards from http://www.mywandtattoo.de and Design Team
Great article. Web forms are the wave of the future. Always challenging to follow your tips and advice.
Great article. Web forms are the wave of the future. Always challenging to follow your tips and advice. Thanks from the staff at http://www.coachlikeapro.com
thanks for sharing this !!!!!!!!!
Thanks you for this article.
I''m looking for beautiful web form in order to improve the looks of mine. Unfortunatelly I wasn''t at MIX 10. Did you make a powerpoint or something else ?
Best,
Quentin, from http://simule.fr
I came across this about 3 days before reading this article. It stopped me in my tracks and note to self: I want forms like this.
Very nice article, best regards from http://www.pflegetester.de and PKV Tester Team
Hey Luke what do you think about wufoo. Do you have any idea about this company. I heard a lot about this company as they give good and attractive, contact forms, survey forms and all. I need a free webform script.......pls help me.....................
Habe lange gelesen und muss sagen, dass es sehr gelungen ist. Aber Leute ist müsst euch auch mal zusammen reißen ;)
Danke
i agree it was a good site compare to the other site...
i agree it was a good site compare to the other site...
Thanks for the update; I am also looking forward to add some new webs forms to my current website at the moment which made me reading this article favorable.
Thanks a lot for your effort as you make it clear to me the best webform to use.
Amazing post and it have the right webform and should anyone use.
I agree it it is a good site compare to other sites. The article is very informative and good.
I didn''t know that people don''t care about the design of the web form they''re supposed to fill".":http://www.electricgriddlereviews.net/cuisinart-griddler-gr-4n-cuisinart-gr-4n/ I mean, I thought that a Web form that is designed better might be more appealing to the visitor. Anyway, I learned some interesting information from this article, so I''m happy that I read it.
It is an attractive site and i like it very much.
Hi, thanks for the info. I havent realized it before, but yeah - webforms are everywhere. I am filling in one at the moment :) I guess the biggest challenge with webforms is to find the balance between easy usability and good enough security.
keep work great , and i will be back too!
confidence and create desirable habits of many Recommend
I am a fan of JotForm.
Very nice article, best regards from http://www.wallflair.de and the whole WALLFLAIR Wandtattoo Design Team
Thanks for your updates..its really attractive,I am also looking to add some new webs forms to my website.plz suggest me.
[...] Web forms for people [...]
It will be great when you can grab the sourse code. One of my pet peeves about this is that it doesn''t work in safari.