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 decoding some cryptic text and agree to the site’s privacy policy and terms of service.
What happened to keeping up with friends, meeting new people, and discovering new places? That’s what people actually want to do with the service. But these goals get no mention in the sign up form. Instead, the entire experience consists of giving Brightkite the information they need in the formats they require.
Contrast the Brightkite example with the sign up form on tookmark (figure 2), a service that sends you daily email reminders about sites you bookmark. All the questions in the form are aligned directly with people’s goals: where do you want your reminders sent (email address), and what source of bookmarks do you want to use (delicious username)? Even the “submit” button uses language focused on the task at hand: “let’s see it” fires off a sample email that showcases how the service works.
Figure 2: tookmark’s sign up form December 2008
Filling in the sign-up form on tookmark feels like making progress towards your actual goal— not like data entry that gives an organization what they need. That’s an important distinction. When people feel like they are getting what they want, they continue forward. When they don’t, they drop off.
Making the Transition
At this point, astute readers will point out these two sign-up form examples come from two different applications. So the tookmark model can’t work for Brightkite. Or they’ll argue that there are situations where you “have to” collect certain information from people in order to create a valid account.
And it is at this point that the transition to designing Web forms for people can begin. Instead of thinking in terms of required information and user accounts in a database, 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?”
While not every Web application works the way tookmark does, every application does have a purpose that can frame how people interact with it. Focusing on this core purpose 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
33 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 :)
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