You are reading an article. Lots more of these in the archives. Luke Wroblewski Meet Luke Arrow

Articles

58Comment Retweet

Web Forms for People

Dec 14, 2009 In Design By Luke Wroblewski

As 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).

Brightkite's registration formFigure 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 2009Figure 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

58 comments so far. You should leave one, too.

Emrah Omuris Emrah Omuris said on Dec 16, 2009

Thank you very much for this. Full of nice tips!

Hareclips Hareclips said on Dec 16, 2009

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.

Muddy Grey Muddy Grey said on Dec 16, 2009

Excellent article. I love anything that advocates enhancing the user experience after all it helps us all in the end.

Sean Gerety Sean Gerety said on Dec 17, 2009

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

Efren (aka mimojito) Efren (aka mimojito) said on Dec 17, 2009

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.

LukeW LukeW said on Dec 17, 2009

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.

Sam Sam said on Dec 17, 2009

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?

Steve G said on Dec 22, 2009

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.

kirby freeman kirby freeman said on Dec 23, 2009

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?

eike eike said on Dec 26, 2009

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

LukeW LukeW said on Dec 28, 2009

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.

LukeW LukeW said on Dec 28, 2009

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.

Harlan Lewis said on Dec 29, 2009

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.

Morphemass said on Dec 30, 2009

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?

imran imran said on Jan 2, 2010

Great share !!

Thanks

Michelle Michelle said on Jan 2, 2010

great roundup, thanks :)

Michelle Michelle said on Jan 2, 2010

great roundup, thanks :)

Alan Fleming Alan Fleming said on Jan 2, 2010

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?

Stacia Stacia said on Jan 3, 2010

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...

GeekyClown GeekyClown said on Jan 3, 2010

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.

Joe Davis Joe Davis said on Jan 11, 2010

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.

Eric Haidara Eric Haidara said on Jan 22, 2010

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..."

Anthony Anthony said on Jan 26, 2010

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?

Susan S said on Feb 6, 2010

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.

Sam Sam said on Feb 14, 2010

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

daivdx said on Feb 22, 2010

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

Shirley-Ann Shirley-Ann said on Apr 1, 2010

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.

Valerie Valerie said on Apr 9, 2010

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!

Daniel S. Daniel S. said on Apr 12, 2010

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.

Medyumlar said on Jun 3, 2010

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.

Webstandard-Blog Webstandard-Blog said on Jun 7, 2010

By the way, excist there any plan for a second and updated Edition of "Web Form Design"?

Maike Maike said on Jun 12, 2010

Very nice article best regards from http://www.mywandtattoo.de and Design Team

Coach Coach said on Jun 25, 2010

Great article. Web forms are the wave of the future. Always challenging to follow your tips and advice.

Coach Coach said on Jun 29, 2010

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

Wholesale baseball hats Wholesale baseball hats said on Aug 4, 2010

thanks for sharing this !!!!!!!!!

Quentin Quentin said on Sep 29, 2010

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

speed dating nyc said on Oct 4, 2010

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.

Mentor Mentor said on Oct 19, 2010

Very nice article, best regards from http://www.pflegetester.de and PKV Tester Team

breathing pro breathing pro said on Oct 20, 2010

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.....................

Chiptuning Alfa Chiptuning Alfa said on Nov 3, 2010

Habe lange gelesen und muss sagen, dass es sehr gelungen ist. Aber Leute ist müsst euch auch mal zusammen reißen ;)

Danke

scotty lee stewart scotty lee stewart said on Dec 3, 2010

i agree it was a good site compare to the other site...

scotty lee stewart scotty lee stewart said on Dec 3, 2010

i agree it was a good site compare to the other site...

Merchant Money Merchant Money said on Dec 9, 2010

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.

BookSummaries BookSummaries said on Dec 11, 2010

Thanks a lot for your effort as you make it clear to me the best webform to use.

AutoRepair AutoRepair said on Dec 12, 2010

Amazing post and it have the right webform and should anyone use.

anthonys peso anthonys peso said on Dec 16, 2010

I agree it it is a good site compare to other sites. The article is very informative and good.

Kevin Kevin said on Dec 30, 2010

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.

raj raj said on Jan 11, 2011

It is an attractive site and i like it very much.

easydiets easydiets said on Jan 16, 2011

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.

Eczema Remedy Eczema Remedy said on Jan 26, 2011

keep work great , and i will be back too!

Subliminal Messages Subliminal Messages said on Feb 17, 2011

confidence and create desirable habits of many Recommend

Ryan Pasco said on Feb 18, 2011

I am a fan of JotForm.

Michelle Michelle said on Mar 1, 2011

Very nice article, best regards from http://www.wallflair.de and the whole WALLFLAIR Wandtattoo Design Team

Cat Technologies said on May 15, 2011

Thanks for your updates..its really attractive,I am also looking to add some new webs forms to my website.plz suggest me.

Top marks for Sitecore’s Web Forms for Marketers module « Eduserv: blog said on Sep 15, 2011

[...] Web forms for people [...]

Partnerhoroskope said on Nov 10, 2011

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.

Prada Bags said on Apr 23, 2012

Curious to determine what all you intellectuals need to say about this?-?-.

Boorsedreaddy said on May 12, 2012

With out style greater demonstrates their lv purse styles off of as opposed to Marina GM.
in addition to clutches include persisted in excess of Just one humdred in addition to thirty five ages, embellishing his or her bearers, together with acquiring tailored items with them.
The corporation, launched throughout 1854, is the most suitable acknowledged to the monogram company logo in their totes and also other merchandise.
Shield your current expenditure by subtracting the proper measures for you to effectively maintain your current .
Your darkening in the manages comes about effortlessly; on the other hand, you'll be able to rate the task by simply making your in a very sun-filled place as well as in close proximity to a new screen on an hours, once every seven days.