You’d think that by 2019, web designers would have come to a consensus on how to build proper web forms. Unfortunately, we still have some work to do in this area.
Your web forms are the unsung heroes of your landing pages and CTAs. They’re the data capture tool standing between your website and your viewers. And while adjustments to your web forms might seem minor compared to the slew of other website optimizations you should be making, they actually have a huge impact on your users’ UX, not to mention your conversion rates.
Keep an eye out for the following issues in your web design.
Poor Form Field Location
Similar to your CTAs, form fields follow the real estate mantra: Location, location, location.
For your form fields, we suggest placing them above the fold. And yes, before you say anything, there’s a lot of argument out there about whether CTAs should be placed above or below the fold. But for form fields, we think above works better, primarily because users have the highest engagement levels with content placed above the fold.
As form fields are an extension of your CTA, you’ll want to place them front and center. Don’t make interested users scroll to the bottom of the page to provide their details.
Asking For Too Much
The next biggest form field issue we see is websites asking for too much information.
This comes back to the perennial web design goal of creating a frictionless UX. As a rule, consumers don’t enjoy entering personal information on websites, and every extra field you ask them to fill out is one more reason for them to sack the process altogether.
Research on this topic shows that companies that limit the number of form fields on their pages see far higher conversion rates than those that ask for extensive information. In the study, having a mere three form fields produced the highest conversion rate (25 percent) with conversions dropping commensurately with each extra field.
Annoying Form Field Labels
Like every other part of your website, form field strategy is all about creating a positive UX. Unfortunately, some designers missed the memo and build their form fields to be…well, annoying.
We’re referring to the practice of putting in-field labels on each of your web forms only to vanish this text when users click to add their own details.
We can certainly see the advantages of keeping your layout simple and clutter-free, but you’d be surprised at how quickly your users forget where they’re at and what they’re doing—even in the middle of filling out a form. In this case, it can help to label form fields separately to help keep users oriented during data entry.
It sounds like a small issue—but small issues kill conversions. Play to your audience and design your form fields in a way that makes sense for your readers.
Unhelpful Error Messages
While you’re at it, be cognizant of how you alert users that their entries are invalid. This applies to both what you say and how you say it.
For example, it’s fine to restrict special characters in what your forms will accept, but what if the user’s name contains one of these characters? Does your error message say something like: “invalid name” or “must enter a real name”? (Yes, companies actually do this!)
Aside from being mildly insulting, this message doesn’t specifically state what the problem is. Instead, try something like: “Name must not contain special characters.” This is much clearer and less dehumanizing for those with unusual names.
Also keep in mind how you present this information. It’s common practice to outline invalid form fields in red, but what about viewers who are colorblind? You’re excluding them without even realizing it.
Instead, we suggest sticking to highly-contrasting elements and plain text, when possible. Don’t just highlight the box; include some pop-up text letting them know which fields need attention. These changes are easy to make and can save your users a lot of hassle long-term.
A Lack of Mobile Optimization
A quick word on mobile—make sure your web form fields are optimized for your mobile viewers! Reports show that 77 percent of Americans own smartphones these days. And their reliance on these devices is increasing: One out of every five U.S. adults is a “smartphone-only” internet user. For these individuals, it’s mobile data entry or nothing.
Given how popular mobile browsing has become, you need to make sure your form fields are optimized for these audiences:
-
Field size: People have to use their beefy fingers on touch screens, so make sure the fields and text are big enough for them to see.
-
Field number: Mobile has less screen real estate to work with, so keep your form count even lower than you might on a desktop layout.
-
Automation: Do what you can to make the process easier, such as pre-filling values.
-
Responsiveness: The location of your form fields won’t matter if your website isn’t responsive. Make sure your layout appears the same on every screen.
Don’t Let Your Form Fields Ruin Your Conversions
We can’t think of anything worse than pouring your heart into your website UX only to stumble at the finish line with shoddy form fields. Keep the above issues in mind as you build out your web design. There are plenty of decisions you’ll need to make about which design layouts suit your brand—but your form field strategy shouldn’t be one of them.
