Skip to main content
Flow Best Practices
Heyflow avatar
Written by Heyflow
Updated yesterday

Unlike a simple form, a flow is not limited to one page, but has the questions split up onto several screens, making it feel more like an interactive experience and thus, increasing the user engagement and conversion rates.

In this guide, we will show you how a flow should be structured and which best practices you should follow to optimize your conversion rate and receive qualified leads or applications.

šŸ”Ž If you also want to place a landing page before your flow to provide the visitor with more information, you can do this with Heyflow. Here we explain how!


General structure

A flow usually consists of 3-5 questions, each of which is shown on a separate screen. If more input is required, this can increase the exit rate. After the questions, an optional loader asks for contact details, and the visitor ends up on a thank you page or back on the website.

Each of your screens should also have the same or a similar structure. In addition to the Header and Footer, we also recommend a Progress Bar to show users how many questions are still missing. If there are more than 5 questions, this can be overwhelming for the user, in this case we recommend using the bar style found in the editing section.

The headline or question should be kept as short and simple as possible. Also, make sure that the font size is the same on all screens. Try to use similar input blocks so that users quickly get used to your flow and input. A Button helps users to navigate, but should not redirect them when they click on an option.


Best practices

To keep exit rates as low as possible, you should adhere to simple best practices in your flow. In this section, we'll also look at some examples.

Standalone vs. embedded

Before we start with the flow, however, you should be clear about how you want to use your flow in the future. You can either display your flow on its own so that it can be accessed directly via a domain or embedded in an existing website.

Standalone

Embedded

  • Shorter loading times

  • Simple tracking

  • No distraction from other elements on the website

  • Recommendation: Direct traffic from ads and own domain

  • More information here.

  • Flexible placement on website

  • Recommendation: organic traffic

  • More information here.

Getting started

Start with a simple question so that users can "warm up". We recommend a yes/no question with an image selection or other simple input options.

Feel free to use a Next Button (even if this would not be necessary as soon as Navigation on click is activated). Some users may not yet understand the principle, a button would signal which click is necessary to move on.

Single vs. multiple questions

For input, we recommend using our Picture and Multiple Choice Block. Avoid many Input Fields, Text Area Blocks or other blocks that force users to type. Long and complicated inputs can increase dropouts in your flow.

Use a Single selection and activate Navigation options, so applicants can be directed through the flow with just one button click. Remember to include ā€œAll of the aboveā€ or ā€œOtherā€ click options for inclusivity. Multiple selections always require an additional button click as well as the individual options, which is why we suggest avoiding this selection.

šŸ’” Tip: Work with intervals or ranges, e.g. for professional experience (possible options: < 1 year, 1ā€“3 years, 3ā€“5 years, >5 years) or budget planning (possible options: $0-$100, $100-$500, $500-$1000, not specified).

Pre-qualify

Only receive qualified leads or applications that match your company. With conditional logic, you can immediately exclude applicants or leads that are not suitable using the questions asked.

In lead generation, exclusion criteria may involve specific requirements such as a minimum budget to meet. Similarly, in recruiting, criteria including minimum years of job experience or possessing a valid driver's license can help you qualify leads in the flow. Additionally, a mandatory Open text field in recruiting is commonly used to assess applicantsā€™ willingness to offer extra details, potentially leading to longer responses. Nevertheless, it's important to note that this approach may contribute to increased drop-off rates, so consider its impact thoughtfully.

Visualization

To make selection options more user-friendly, use icons, emojis or even your own branded images. This makes it even easier for users to click through your flow.

šŸ’” Tip: Icons are a must, especially for simple yes/no questions. You can find these by typing ā€œvalidationā€ in the icon database. Here you will also find your recently used icons.

Mobile vs. Desktop

Heyflow automatically adjusts your elements to the appropriate screen size, regardless of whether users open your flow on a large screen, laptop, tablet or smartphone.

You also have the option to make manual changes for desktop and mobile view. In most blocks, you can select the visibility option under Appearance.

Please bear in mind that while an image selection may appear visually appealing on the desktop version, particularly when numerous options are available, it could appear excessively elongated on mobile devices. Consider using a multiple selection to optimize space and ensure a more efficient display on mobile devices.
ā€‹

Loader

After you have asked all the relevant questions, we recommend that you use our Loader Block before presenting the contact form. This feature provides users with the perception of ongoing backend processes related to their submissions.

For instance, in recruiting scenarios, it might imply ongoing evaluation of the application or a calculation is being made for an offer. This can increase your flowsā€™ credibility and legitimacy.
ā€‹


Contact form

Once all the questions have been answered, the only thing missing is the contact details. To get started, simply use our ready-made Form Block.

Use the effect of the Loader again in the Headline and provide further context, for example, ā€œa clear fit for the advertised positionā€ or ā€œa suitable offer has been found.ā€ Keep this page as short as possible and clearly indicate when entries are optional.

šŸ’” Tip: Increase the quality of your leads by automatically verifying the phone numbers of your flow visitors. Learn more about our phone number network validation here.

Try to position the Submit Button in the user's field of vision. If you want to use trust elements again, such as a list of benefits, include this after the Submit Button.

šŸ’” Tip: Use our A/B test feature to split the form into 2 or 3 screens. For example, ask for the name first, then for the email on the next screen and only then for the phone number (optional). Some users have observed that this has significantly reduced the overall drop-off rate.


Thank you page

Once the information has been submitted, your flow is not over yet! A thank you page can share relevant information about next steps with users. We recommend our Progress or List Block for this.

Variables help you to personalize your flow. For example, use the first name from the contact form to display on the Thank You page. You can find more information about variables here.

Link your website, social media channels or other relevant pages here, so users can access more information about your company or product. It's quick and easy with our Link Block.

šŸ’” Tip: Send a custom auto reply to your leads or applicants automatically to make a strong impression. Discover additional insights about effectively following up after sending an automatic reply email in this informative Academy article.



Conclusion

In conclusion, Heyflow provides a comprehensive overview of creating effective interactive flows, emphasizing their superiority over simple and static forms in boosting conversion rates.

By following the best practices and the features offered by Heyflow, you can effectively optimize user experiences and obtain high-quality leads. From the initial setup to the use of conditional logic, visual elements, and mobile optimization, this article serves as a guide for anyone looking to enhance their online engagement strategies. Furthermore, through valuable advice regarding standalone versus embedded flows, A/B testing, and personalized thank-you pages, Heyflow empowers users in maximizing the benefits of its capabilities for successful outcomes in lead generation.

Check out our other academy articles as well:

Did this answer your question?