Form best practices the Dos and Donts in form design by Victoria Verner UX Collective

Table Of Content

• UX form design principles with form design examples from winning brands
• If you must ask an optional question, make it clear that it’s optional
• Make the required input format clear
• Errors and the path to completion in form design
• Form Conversion Optimization Tips to Generate Better Leads
• Order/checkout Forms

If you must ask for sensitive information, make sure you explain why it is needed, using support text below the field. At Jotform, we focus on being inclusive, friendly and down to earth – and the language we use reflects this. They need to be embedded in the framework from the very beginning.

UX form design principles with form design examples from winning brands

Highlight the main benefits of your product in a way that’s visible and concise. Mailchimp and Home Depot share real time feedback to let the user know whether they are successfully inputting a password or not. When you’re clear about the expectations and requirements of your form, you avoid user error and in turn avoid user frustration. Highlighting required fields, like Prose and Headspace do here, assures users won’t skip the necessary fields. Another example of priming is sharing the end result or value they’ll receive upon completing the form. This helps them anticipate what to expect once the form is complete and generate excitement for the product, motivating them to complete the form.

If you must ask an optional question, make it clear that it’s optional

The product page design layout was of particular inspiration (essentially a submission form) to us. Spotify Pets is a playlist feature within the Spotify digital music, podcast, and video service. This uniquely quirky addition to Spotify uses the platform’s algorithm to create playlists for the pet and pet owner to listen to — based on the user’s listening habits and pet’s attributes.

Make the required input format clear

You want a form design that’s actually representative of your brand. This design approach offers simplicity and convenience for users, as they can see all the required information at once and complete the form in one go. Single-page forms are particularly effective for shorter forms and when you want to minimize the number of steps required for users to complete the form. Similarly, formatting the input values can improve the overall user experience and ensure consistency. For instance, when users enter their birthdate, you can automatically format it as MM/DD/YYYY, making it easier to read and understand.

Take the time to define everything, always bearing in mind that for the user each little clue counts. When you’re confused about a question, a little bit of extra information can go a long way. Account for basic issues such as system visibility status – you’re going to validate everything when the time comes. Prototyping forms works for everyone involved on more than one level. Aside from the classic factor of communicating design concepts to non-design stakeholders, we have the crucial issue of getting your ideas down into something tangible.

On mobile, use native OS features for date pickers and other special inputs

Also, starting your progress bar with some progress already made increases the number of people that use the form. It may sound like common sense, but it’s good to check that your forms work and are easy to use across all major browsers and devices. Unfortunately, there’s a lot of mandatory information that must be asked that can confuse users. When displaying validation errors or success messages, be sure to not rely on making the field green or red. Wherever colour is used, try to also display text and/or icons to communicate a message to the user. Where possible, checkboxes and radio buttons should be used instead of dropdowns, as they less cognitive load to process.

Google Fitbit app's design talks about their "form follows feeling" philosophy in new interview - PhoneArena

Google Fitbit app's design talks about their "form follows feeling" philosophy in new interview.

Posted: Sat, 13 Apr 2024 07:00:00 GMT [source]

Website forms are an essential component in any website, landing page, or e-commerce store. Ultimately, we found that tapping into the mobile device’s camera was the best user experience, as it enabled users to take a photo of their driving license without leaving the form. A good rule of thumb is to answer the question “I want to…” from the user’s perspective. For example, if it’s an enquiry form for a free consultation, the call to action could be ‘Request My Free Consultation’. This is one of the most counterintuitive lessons I’ve come across on multi-step form design.

Even though they can give off an illusion of simplicity, that is hardly ever the case. Like so many other products within UX design, forms have quite a bit of theory behind their designing – and many different factors that need to be taken into account. After you get the wireframe out of the way, you want to use your wireframe as a base upon which you can build your form prototype. You want to consider the following factors when building your form design prototype. The user testing phase is the opportunity to validate all aspects of your design. Sometimes, ugly works better than pretty with users because of sheer personal preference – as painful as that may be to the designer.

Work with clean response data

But these little pop quizzes can also be annoying for real people who don’t want to have to “select all images with bicycles” to get their form to go through. In fact, one small study saw a 3.2% decline in conversions when using CAPTCHAs. Skip the stress of wading through legal jargon and look for an online form builder that follows industry standards and best practices with regards to security and compliance. Putting it above the fold (meaning, visible without any scrolling) is the best option. Research shows that, regardless of the type of device they’re on, visitors fill out forms more frequently when they’re placed above the fold. In fact, the average difference in how users treat content that’s above the fold versus below the fold is a whopping 85%.

By copy, we mean everything from the actual questions and place holders, to buttons and error messages. In your form design, aim to have error messages that help the user understand the issue as opposed to simply letting them know something’s up. By telling the user exactly what is going wrong and how they can fix it (if it’s not a system issue) – we create a message that users won’t entirely hate. While an online form might not be as public or prominent as your website, it’s important to remember that, for some people, it could be their first or only interaction with your business.

You don’t just want people to find your form—you want them to complete it. It’s easier said than done, with 81% of users admitting that they’ve abandoned an online form after starting to fill it out. By addressing these common problems with forms, you can significantly improve the user experience and increase the chances of successful form submissions. Analyzing user behavior, conducting usability testing, and gathering feedback can help you determine which form design approach will yield the best results for your specific use case. When it comes to designing effective and user-friendly forms, there are several key elements to consider. One of the most important aspects is the clear and concise labeling, proper use of placeholders, and helpful instructions.

Today, these smart glasses get their intelligence from the device to which they are connected. Great form designers can get your clients excited about signing their name or giving up their email. Choose the best freelance designer to give your customers that satisfaction.

At the same time, inline validation should not be real-time, as this is likely to report errors before a user has completed the field. Where it makes sense, use clickable images as a question type. From the data we’ve seen at Leadformly, they’re among the most engaging question types and provide a great form user experience. While I’d advise removing optional fields or using milestone submissions to ask them after users have already submitted their data, sometimes internal politics require them to be asked.

Milestone submissions is a technique that allows you to submit the form when a user has reached a certain step in the form, and then continue providing more information if they want to. Toptal.com use this feature to fast-track people who are willing to answer a few additional questions. Placeholders should be used to guide users on how to fill out the field if there’s any ambiguity.

By default, many forms use dull call-to-action buttons like ‘submit’ or ‘send’. These should be avoided and replaced with call to actions that match what the user is hoping to achieve when they complete your form. By addressing these up front, you can break down the barriers and make using your form more of a no-brainer. Freshbooks address their users’ concerns by displaying “No credit card required. Stick with mostly white space and black font and reserve your pops of color for important information like buttons, error messages, or other details you want to stand out.