Best practices when designing interstitials in forms
Designing transitional steps that educate and generate trust with responders
When you’re having a face-to-face conversation with your physician or financial advisor, they’ll usually pause between questions to respond to your answers or clarify why they’re asking certain questions.
Interstitials are the online equivalent of these responsive interactions. Interstitials - also known as informational “steps” or pages - are transitional steps that appear between questions in a form. They provide further context on the questions being asked and are an effective way to build trust with responders. From a technical perspective, they can also help keep responders engaged while a slower process happens in the background.
Below we share some best practices on interstitial design from 3 Formsort customers - Allara, Signos, and Malla - and leading brands like Parsley Health and G-plans. For more inspiration, check out Fineflows, our design gallery featuring the Internet’s best forms, and start building your first interstitial with Formsort.
Interstitials help set the tone of your flow and can build credibility. For example, Parsley Health displays static interstitials early on to ease users into the flow. Friendly faces and a quick greeting set a pleasant tone for the interaction. Meanwhile, Allara displays an interstitial that is personalized to the responder's reported concern. This context-relevant statistic can help generate trust in Allara's services.
Interstitials can also help break up longer flows and make them feel more approachable for responders. After asking questions about stress, Malla shares a powerful statistic on the prevalence of stress, helping normalize this experience. The calming background image provides a sense of comfort before responders continue with the next section.
Interstitials have another benefit: they can reduce responders' perceived wait time while your flow is retrieving large amounts of backend data. This is especially useful in eligibility forms and quizzes: these flows often collect lots of responder data to generate personalized results. Interstitials can be inserted after these points of data collection and keep responders engaged while your form generates customized results in the background.
- Keep content short and sweet. Whether you're displaying static text or dynamic videos, interstitial content should be straightforward and context-specific. Long blocks of text can feel overwhelming and be easily missed if your flow auto-advances after a few seconds. We like Malla's previously mentioned interstitial displaying stress statistics - it's succinct and builds empathy for responders experiencing this symptom. G-plans' graph interstitial also does a great job concisely communicating their value prop with data, which helps build credibility.
- Make designs responsive. Visual content like images and videos need to be high resolution so that they can support different device sizes without sacrificing on quality. Tactically, we recommend placing the focus of the visual at the center so that it's not cropped out of the frame across different viewports. Formsort's viewport setting makes it easy to preview interstitial designs across mobile and desktop devices.
- Make sure interstitials are displayed for at least one second, but not more than 10 seconds. This is the generally agreed-upon threshold for maintaining an individuals' undivided attention. If you display anything shorter than this, individuals might miss it. If you display anything longer, individuals might get distracted and lose interest. We generally recommend 3-5 seconds as the sweet spot.
- If you're using an interstitial to cover up a slow background process, make it artificially even longer. This may seem counterintuitive, but hear us out. If a serious operation like a credit report pull or bank transfer happens too quickly, responders might perceive it to be fake or not real (even if the real process happened that quickly). Extending the interstitial's time can increase the perceived seriousness of what's happening behind the scenes.
This is one of the most common concerns we hear about interstitials. Yes, they can slow down the speed of the form, but per our other article on form design best practices, this isn't necessarily a bad thing. It can give you extra time while data calculations happen in the background. Moreover, by adding dynamic animations/videos and enabling auto-advance, you can make your interstitial feel like a seamless part of the form experience.
While interstitial steps do increase a flow’s measured length, they can reduce the perceived length. In cognitive psychology, chunking information into smaller bits makes it easier to process and retain. This is why phone numbers are traditionally broken up into groups of numbers separated by dashes: the brain remembers them as 3 bits of information instead of 10. It’s also why related content on websites is grouped together. In the context of forms, 3 rounds of 3-step question blocks separated by interstitials will feel shorter than a 9-step continuous flow.
Malla breaks up its flow using interstitials that connect to the topic of each section. These steps even match the color scheme of the associated sections in the flow.
Formsort makes it as easy as possible to develop interstitial steps and informational screens. Here are a few ways you can use us today:
- Create crisp background videos and image content for your interstitials like Signos.
- Customize the design of the form so that it seamlessly aligns with your brand, like Malla's flows. Our styling and theme features give you complete control over your form's look and feel.
- Use interstitials to organize your flow. For example, you can place them between groups of questions. Each group can start or end with an interstitial step.