Multi-Step Forms

Designing Multi-Step Forms for Better Conversion Rates

Adding more steps to an intake process or a form may seem counterproductive. The common wisdom in conversion optimization is that less is more, particularly when it comes to forms. Even though single-step forms work well when collecting simple data, they can backfire, especially when you want your users to provide complex information. As explained in more detail further below in this article, breaking down forms or intake processes into simplified steps can increase chances of better conversion results. Some of the main reasons a multi-step form is more preferable over a single page scrolling form are:

1. Multi-step forms reduce psychological friction

Users are bound to experience psychological friction when they see a long form on their screen. By breaking down a long intake process into more digestible steps, users feel less intimidated and more engaged. It also provides a more ADA-friendly framework as the user is asked to process a smaller amount of information at each step of the journey. Users are also less burdened as they have a chance to move at their own pace and submit information one step at a time, rather than having to submit all their information at once. This is particularly important for complicated or hard-to-understand intake processes.

The side-by-side screens below were created by the MCoE design team for a COVID-19 Symptom Reporting program. The designs below include an example of the original design, which involves a longer-scroll single screen form (left), versus a multi-step break down version of the same screen (right). On the left, the user has to scroll through the entire intake process. On the right example, the user is given an opportunity to focus only on one task at a time with an easily accessible CTA (call to action) button. The design solution on the right also provides a more immediate transactional interface to the end-user, thereby increasing the likelihood of sustained interest and engagement throughout the intake process:

Original design sample:

MCoE multi-step solution:

2. People’s minds are at ease when they won’t feel overwhelmed

A multi-step form also provides a conversational format which for the user feels more natural and is easier to understand. The conversational aspect of a multi-step form usually mimics a real-life conversation that would happen between the end-user and the customer representative. Conversational mutli-step forms are particularly helpful for completing complex tasks, like signing up for health insurance, banking services, or filing taxes (example TurboTax). Breaking down long intake forms into simpler, multi-step screens, provides an opportunity for more UI design elements into the interface.

Below are examples of how regular content was repurposed with the help of UI components to create a more inviting interface for the user. On the left is the original design, and on the right is the MCoE design solution. The original design didn’t take advantage of visual design components because of limited screen space, therefore it prioritized content over UI interface design. On the right hand side, the same content was used, but with more screen real estate space available, it was presented in a more visual manner to help emphasize the conversational aspect of the intake process:

Original design sample:

Simplified Screen Design:

3. You can more easily ask “sensitive” questions (example: email, phone, address)

By engaging users in an easy-to-understand multi-step form process, it is easier to ask for more personal information from users such as email, telephone, address, etc. as they feel they have more “skin in the game.” However, before asking the “sensitive” questions, to get users to engage with the least amount of skeptism we recommend starting the multi-step process with low-friction questions that feel less intimidating.

For example, you can use a starter question like: “Would you like us to help you protect your loved ones and family during the COVID-19 outbreak?”… etc. Low friction questions put your potential subscribers in the frame of mind where they’re thinking about the benefit of your service and are more likely to ease into the engagement approach of the form.

Recommendations for designing effective multi-step forms:

1. Start Simple

As mentioned above, start with low-friction, simple questions. It feels more inviting and less overwhelming for the user as they navigate through your intake process. By doing so, you will have created a more conversational and engaging tone with your users.

2. Use More Visual/UI Components When Possible

When possible, if using multiple choice answers in your design, instead of simple text with radio buttons, consider designing large tiles with images, also known as image selector buttons. They help create a more engaging and conversational dynamic then traditional “quiz” format answers. They are also easily tapable and more mobile friendly.

Below is a side by side example of a traditional radio button list versus image selector buttons:

Traditional Radio Buttons:

Image Selector Buttons:

3. Set Expectations for Users

Starting a multi-step form with a progress bar helps subtly imply to the user that they have made progress and increases chances for better completion rate.

There are some exceptions! For example, if the number of steps in a form are conditional, then a progress bar may not be the right choice for your design as you wouldn’t want to mislead the user. You could still consider showcasing a broad timeline with key milestones, but be sure to review the pros and cons of that approach and ensure a way to communicate to the user that each milestone my have a different set of sub-steps based on conditional answers. Therefore, each case is different, but if designing a multi-step intake process that has a defined number of steps, the progress bar can be of great benefit.

Below is a sample of how a progress indicator is used in mobile. Because of limited space, in this example, the MCoE followed the KP responsive web styleguide by incorporationg a simple text based progress indicator:

Example of Timeline Format:

4. Ask 1-2 Questions Max Per Step

We recommend one or two questions max per step. This way, the form appears less overwhelming and feels faster to progress through for the end-user. However, in some exceptions, if you’re asking more than 10 questions, you may want to group more questions per step to prevent having a form that appears to have an endless number of steps.

5. Establish a Conversational Connection with the User

The great thing about multi-step forms is that you can make them feel conversational by including content that feels personalized to the user. Also, as shown in the radio buttons example above, you can include UI elements that enhance the visual experience and reflect the conversational tone of the content. Similar to an infographics presentation, visual UI components can deepen the connection between the app and the user, and drive home the messaging very strongly when properly applied to your designs

The conversational experience can also be very powerful to the user when conditional logic is applied to the experience. For example, displaying a follow up question or content that serves as a response or acknowledgment to the user’s previous answer is a great way to create connection and follow through comitment from the user.

Need help with designing an intake experience?

The MCoE will continue to update this article with more examples and screenshots. In the meantime, we hope this article provides some helpful recommendations and guidance for your design projects. Feel free to contact us at anytime for more advice on multi-step forms.

Want to learn more? Check out these case studies below:

	Hamburger Menu v. Tab Bar Determine which navigation style – hamburger or tab bar menu- provides the most intuitive and positive user experience as well which one was preferred by users.
	Search Tool Best practices in implementing search functionality.
	Sign Out Button Inconsistencies of sign out button locations and design. Provides recommendations for a button standard.
	Zeplin tool MCoE Design team has been using Zeplin for specs and comps. Learn about the Zeplin tool.