Foonkie Monkey’s Guide To Successful Form UX Design

Forms are one of the most used and relevant ways most applications and websites interact with their users and gather information from them. However, some developers and app owners make the mistake of making them too extensive and stodgy, affecting the user experience and damaging user engagement.

We’ve all been there time and time again–having to fill out endless forms when registering for a website, setting up an account, making a purchase, answering a survey, or even filing a complaint. Most of these forms seem to be never-ending; filling out names, date of birth, address, phone number, social security number, age, sex, ethnicity, email, repeat email…you catch my drift. And not only are they extensive, but they also seem to be a pervasive part of using the internet. Or can you think of an instance when you’ve used an online service that did not include filling out a form of some kind? I’m talking about no registration, purchase, billing, or feedback form. Seems unlikely. Why? Because forms are a necessary evil. Online companies need to implement forms on their websites because it’s the only way users can sign up for an account, make a purchase, register for a service, answer a survey, and more. Even for a process as mundane as creating a simple username and password, you must fill out a form. So, even if they’re not the sexiest way of gathering user data, there’s no way around it: forms are fundamental, especially for customer engagement and conversion. But how can you make something so tedious become engaging? How can you entice your users to take the time to actually enjoy filling out those otherwise annoying blanks and happily provide you with all the information you need? Good form UX design.

Believe it or not, online form UX design matters a lot. It isn’t easy to make form filling an enjoyable process, and yet, it is one of the most crucial elements to maintaining your website’s or app’s user experience as smooth as possible–without it, there’s simply no way of making online forms more user-friendly and aesthetically pleasing. But, no matter how challenging form UX design is, it is completely doable.

Here’s Foonkie Monkey’s guide to successful form UX design.

What are online forms?

We’ve all used them and know them inside out, but what exactly are online forms? How do they work? What are they suitable for? An online or web form is a data-gathering element where website users, employees, and suppliers enter their personal or business information to complete steps, register, or access benefits within that website. The hosting company then gathers and sends this data to a server for processing. As a result, they can easily:

1. Gather new user information
2. Help users set up new accounts
3. Help users complete orders
4. Answer complaints and claims easily
5. Enrich marketing campaigns
6. Gather user feedback
7. Process lead information
8. Provide legal information required by governments
9. Create surveys

Gathering and processing all the information from these sources would be virtually impossible without online forms, hence their relevance for modern-day businesses. However, even though most of us use them on a regular basis and they are paramount for business success, only some understand the importance of designing good and engaging online forms.

To highlight their importance, one survey shows that online forms helped convert more leads when compared to other tools for almost 74% of surveyed companies. However, another study shows that 81% of respondents claim to have abandoned an online form after beginning to fill it out, with 26% of them citing form length as their main deterrent. In fact, most users favor simple forms over complicated ones, with five form fields being the length that leads to more conversions, hence the importance of implementing good UX form design. But how can you make sure to avoid your from becoming one of those that users leave beyond? Here are Foonkie Monkey’s best practices for good form UX design.

Form UX design best practices

1. Less is more

“Awesome! Filling out this five-page long-form sound like so much fun!” Said no one ever. The truth is, we all hate forms. Yes, we know we need them, but we dread the process of filling them out. However, that dread is amplified when they’re unnecessarily extensive. In fact, one study replaced an eleven-field form with a four-field shorter version of that form, and completion rates increased by 160%!

It’s undeniable: every field your users have to fill to complete an action increases friction and dramatically impacts your product’s user experience. When you’re optimizing your form UX design, one of the best things you can do is eliminate as many fields as you can to decrease friction without losing valuable user data. So, before implementing your form UX design, ask yourself: Do I really need this information? Do I actually need to ask users for their phone and fax numbers? Or their ethnicity? Do I really need their company name? Chances are you don’t, so only ask them what’s relevant to the form-filling process. Going overboard by as little as one unnecessary field can cost you considerably. Take Expedia, for instance. The travel-booking giant increased their yearly profit by $12 million by simply removing the “Company name” field from its booking form. Not convinced? Check out these statistics:

1. The “age” field reduces conversion rates by 3%.
2. The “city” and “state” fields reduce conversion rates by 2%.
3. The “phone number” field reduces conversion rates by 5%.
4. The “address” field reduces conversion rates by 4%.

At first glance, these data points may seem necessary, and maybe they were years ago when telephone numbers or physical letters sent to users’ homes were the only means of contact, but now we have emails. So, instead of implementing those four unnecessary fields, simply ask for their email addresses, and you can group those fields into one. At any rate, the key here is to find a balance between gathering critical data, maintaining the user experience, and keeping a solid conversion rate.

2. Clearly mark optional fields

As we stated above, it’s pivotal you make sure to eliminate as many optional (or unnecessary) fields as possible. However, since chances are your product caters to users with different needs, some fields may appear necessary for some visitors but not for others. For instance, you can make the phone number field optional. If a user wants to receive promotional ads via text, then they can fill out the phone number field; if they don’t, then they can leave it blank. The critical thing to keep in mind here is to clearly label optional fields by using the word “optional” to avoid confusion. Whichever the case, we suggest you always try to eliminate optional fields or limit them to only one or two at most.

3. Divide fields into single-column forms

When it comes to structuring your forms and defining their layout, you should keep the visuals and order of your fields as clean and straightforward as possible. To do so, you should always go by a single-column layout. Why? Because as you have already learned, users typically respond better to shorter forms; they want to finish the form as quickly as possible, and single-column forms will help you help them accomplish that. Visually, these types of forms are less intimidating, look shorter, and are generally easier to complete. One study revealed that surveyed users were able to complete a linear, single-column form an average of 15.4 seconds faster than a multi-column form. And believe it or not, those 15 seconds can make a significant difference between conversion and abandonment. So, by organizing your form fields in a single-column manner, your users will fill in the blanks seamlessly in an order that makes sense to them and without getting bored or annoyed. Also, single-column forms are significantly more mobile-friendly than multi-column forms, making them the more efficient alternative for form UX design because you can easily optimize for mobile without making any significant modifications to your initial form layout.

4. Add clear form field labels

You must tell your users what information to enter and where to enter it. Yes, this point might sound obvious, but you’d be surprised to learn that 92% of the largest e-commerce websites in the US have several confusing and inadequate form field labels during their checkout processes, negatively impacting their user experience. Inadequate or weak form field descriptions can range from not explaining what information needs to be filled to not explaining your password rules or how you’ll use a user’s phone number, for instance, all of which are more common than you think. They can also be too long or too descriptive, creating clutter and damaging the page’s UX/UI design.

So, it is essential you help users know how to make sense of what information you need them to enter, how to enter it, and where to enter it. For this, you need to add labels that not only specify the information you need in a specific field (e.g., address, name, e-mail) but also in which format (e.g., phone number with area or country code) and with what characters or special requirements (e.g., secure passwords or recognized/non-recognized special characters). Moreover, more descriptive form labels can ease security concerns in fields requiring the user to input personal information. For instance, when asking for a user’s e-mail, you can add a form label that briefly explains it to send them shipping updates, not spam. This way, proper form labels can be informative and help ease user discomfort by describing why certain information is required.

5. Enable autofill

In case you haven’t noticed, the overarching principle for form UX design best practices is making things as easy as possible for your users no matter what. In that sense, autofill can be your and your users’ best friend. It uses common attributes to automatically fill out fields such as name, phone number, email address, credit card number, and other commonly used information so that the user doesn’t have to manually fill in those fields.

Making your form UX design compatible with your users’ autofill profiles is a simple but advantageous implementation that can help streamline the form-filing process and make it significantly less tedious. It can also improve the user experience by reducing friction because it limits the amount of manual typing users have to do and cuts down the time it takes to complete the form and finish the checkout process.

6. Make your form mobile-friendly

Today, any modern UX/UI designer knows they must optimize all IT-based products for mobile devices. The same goes for web forms. Designing an outstanding form will do you nothing if, when your users open it on their mobile devices, it doesn’t load properly or loads with errors and layout inconsistencies. Added to this is the fact that typically, there are more mobile users than desktop users; they are less patient, and things are more challenging to manage on a smartphone’s small screen than on a desktop. So, to cater to all your users’ needs, your form UX design strategy must include mobile-responsive elements. That means either creating a design strategy that enables your form to transition smoothly between mobile and desktop and vice-versa or designing an entirely different form setup for each platform. Whichever you decide, your form UX design must deliver a consistent layout, seamless flows, outstanding quality elements, and a flawless user experience for all visitors across all devices.

In that sense, make sure your form UX design includes the following:

1. Letters that are fully legible even on the smallest of screens.
2. Labels that clearly mark each field.
3. Large action buttons that give users enough room for their fingers to select the option they want without friction.
4. Mobile-friendly visual layout.

You can also implement mobile-only tools such as a credit card scanner or facial recognition for autofill security purposes. Moreover, ensure the proper input element appears for each field depending on the data that needs to be entered. For instance, if the field is for entering a phone number, then the number pad should automatically appear.

Remember, without a mobile-friendly form UX design, your users will become frustrated, and you’ll lose them, which will undoubtedly impact your conversion rates and usability levels. So, never overlook good mobile form UX design.

7. Too many form fields? Use multi-step forms

As we mentioned earlier, your form should be as short as possible, and you should ideally always make sure all the information fits on one page. However, not every form is short enough to fit on one page. If you have a long form and you definitely can’t make it more straightforward, we suggest you break it up into a multi-step form.

A multi-step form is a format that breaks down longer questionnaires into multiple parts or steps to make them less overwhelming and more manageable for visitors to complete. The different parts of the form only become visible after the user has already filled in the previous part. As a result, the length of the form and the amount of work and time your user spends filling it appears more manageable, and your form’s user experience is less likely to be impacted negatively by its length.

8. Add explicit submission and confirmation cues.

By now, we’ve touched on the most crucial aspects of helping users with the process of filling out forms and ensuring they have a smooth experience doing so. However, that is only half the battle. Completing the form takes on another whole set of elements you must keep in mind to ensure you don’t lose users in the final steps of their visit.

You can include specific UX design elements that guide your users through the entire form-filling process up until completion and solidify your form’s user experience. Some of these elements include the following:

1. Progress Indicators: This point may seem unnecessary; after all, form progress seems pretty self-explanatory. You start, fill out blank fields, and then you’re done. But believe it or not, most users actually enjoy progress indicators or progress bars that illustrate precisely what the form-filling process involves and in what stage they are. So, for instance, you can use short descriptions, progress bars on the top of your form, or a breadcrumb trail to add visibility to signup or checkout flows.

2. Success messages: Again, this element may seem like overkill. Users will know when they’ve completed the form because…well, they’ve completed it. Most of them will know but believe it or not, users typically appreciate a reassuring success message that confirms they’ve completed an action. And, if you fortify that message with an enthusiastic “thank you!” your users will feel appreciated.

3. Error messages: Error messages are crucial components of any robust form UX design. They not only ensure you help your users successfully submit their responses, but they also guarantee that the submitted answers don’t have errors and include the elements you need. These error messages can come in the form of a pop-up, red-colored labels near the field with the mistake, or a message highlighting the error. Whichever you choose to include in your form UX design, it’s essential not to be too aggressive or point out the mistake rudely. Instead, be as friendly and uplifting as possible to avoid friction and creating an uncomfortable experience.

It’s time to put your form UX design to work!

Filling out a form isn’t an enjoyable experience for anyone. It’s usually a tiring and bothersome experience that most of us fly through in scenarios where we absolutely have to. But luckily, UX/UI designers now have the tools and knowledge to implement the elements and put some of the best practices we outlined here in place to try and streamline the otherwise annoying form-filling process and optimize its user experience as much as possible. Yes, completing forms will never be a super fun experience for anyone, but you can easily make it a less maddening and annoying process for your users.

So, now that you finished reading our article, you’re hopefully left with a wealth of knowledge to help you develop a robust form UX design strategy and gain relevant insight into making the form-filling process a somewhat enjoyable activity. However, note that form UX design principles aren’t one-size-fits-all. Yes, most of them may work more often than not, but you need to build your strategy based on your product, your research, and the data you gather from testing. Still, following these and other best practices can help you gain a foothold on form UX design, so you’re not starting from scratch and have a good baseline.

If you have any questions regarding this article or if you want us to work on your form UX design, contact us soon so we can talk!