Why Web Form Design Matters

Why Web Form Design Matters


4 minute read

Most user experience designers have heard of the now-famed case of the $300 million button. An online retailer hires a consultancy firm to do research and testing to redesign their checkout process. Once studies are underway and shopper subjects are being observed, it becomes clear that users are abandoning their would-be purchases because of a frustrating web form design — a web form design that causes the retailer to miss out on $300 million in revenue.

Web forms are a necessary evil – we all hate them, we all do everything in our power to skip or click them away. But every now and then, resistance is futile and there’s no getting around just having to sit there and submit the requested information. When that information isn’t absolutely necessary, however, it can lead to missed opportunities – $300M worth.

Designers and marketers need to know that for users the first rule of forms: Avoid at all costs. When that’s not an option, employ these tips to ensure a happy customer – or at least a customer that can stand filling out yet another form.


Why was the $300 million button such a standout example? It was literally the only thing standing between buyers and their purchases. Just as a consumer would be ready to check out, up pops this confusing web form design, demanding login and registration. When someone is this close to buying your product why put anything at all in between that individual and the pay button?

Ultimately, redesigning the process to merely suggest registration for faster checkout next time, and no longer requiring sign in for purchase, increased sales by $6 million in the first week after its implementation. Think hard – are there any needless barriers standing in between your customer and a potential purchase?


Not to put a damper on humanity, but people are pretty lazy. So lazy, in fact, that the task of filling out web forms is pretty much unbearable. That’s why it’s so vital to keep them short and sweet. Never ask for unnecessary information, or information that a user might perceive as useless. Do you need to know my birthday if I’m buying a sweater? I highly doubt it, and so does your potential customer. If you really need to know something that may seem beside the point, provide a brief explanation as to why.


Because of the ubiquitous, miserable nature of web forms, users have grown to expect a certain level of standards when it comes to them, however low they may be. At this point, if you’re missing these elements, you’re making a frustrating process even worse for a lot of people:

  • Do you need to know something about me? Required fields require a red asterisk.
  • Are you making me select from all 50 states? Do I have to choose a number between 1-100? Do it with a drop-down menu. Radio buttons work for forms with fewer options.
  • Yes or no question as to my confirmation or consent? Make it easier with a checkbox.
  • How much do you want to know? Size form fields according to the amount of information that needs to be entered, so as not to overwhelm.


Using eye-tracking studies, digital strategist Luke Wroblewski was able to prove that the closer labels are to their corresponding form fields, the easier they are for users to quickly consume and complete. It might not seem like a big deal, but research shows that these tiny factors make a big difference to customers. Top-aligned forms and labels are your best bet, since they only take one eye movement to internalize. For a longer web form design, right-aligned labels show best results.


Remember the thing about how lazy people are? Let’s add “bored” to that as well. If you’re going to make them fill out a form, it’s nice to at least try and make it a little fun. There are tons of brands out there finding creative ways to incorporate color, texture and illustration into their web form designs in an effort to create a more enjoyable experience for their customers.

The result? Websites like the audio sharing Huffduffer, which was innovative enough to incorporate a Mad Libs concept, saw conversion rates increase by 20-40%. Are your web form designs duller than they could be? Maybe it’s time to get crafty.

When in doubt, think about this: all users really want is to achieve their goals as quickly and easily as possible. Help them out by considering why and when they’re filling out forms and making sure their eye is drawn to the most important piece of information that you’re putting forth. Good web form design is part science, part art, so make sure you understand your market and consumer, and don’t forget to leave some space for creativity.

By Anastasia Dyakovskaya, NewsCred Contributor