Designing for the Interstitial Experience

Yes. Those little pop-ups matter, and are starting to matter more every day. Interstitial space – and content for it – is becoming an increasingly popular part of designing for the web. From ads, to forms, to bits of information, the interstitial experience is a vital part of the design process.

The dilemma for designers is to create something that users want to look at and not feel annoyed by. Here we’ll work to gain a better understanding of interstitial space and how you can work within it well.

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Design Resources

What is Interstitial Space?

interstitial

interstitial

Interstitial spaces are small web pages that appear between other pages on a website or within a mobile application. Interstitial pages can be in the form of ads, forms, information or as a login prompt. These pages are often small, taking up only a portion of the available screen space, or asking for one bit of information or user action.

The term interstitial references “in between” because of the page placement in the scope of a website framework. Regardless of use, many interstitial placements are delivered by an ad server as “advertising” space, regardless of actual use or intent.

The idea behind an interstitial page is that it serves a single purpose and is not a link from page to page. Interstitial spaces are designed to provide one bit of information or action. Links are more intended as a navigational tool to move around a website.

As a promotional tool, more and more websites are using interstitial placements to encourage users to signup for a mailing list, survey or as advertising space. These “pop-ups” can appear at certain frequencies, depending on time, number of visit to a site, frequency of a user to a site and other factors.

While the idea of designing interstitial experiences may be rather new, the concept as a whole has been around for quite some time. The earliest interstitials were actually alert or dialogue boxes that we have grown accustomed to from the start of using computers. But in order to be effective, today’s interstitial boxes must have a more modern look and feel with great design, messaging and timing.

Uses for Interstitial Space

interstitial

interstitial

How an interstitial space is designed varies depending on what it is supposed to do. You likely come into contact with interstitial pages in almost everything you do online.

Common uses for interstitial spaces include:

  • Advertising
  • Email signups
  • Age or login verification
  • Related content for frequent users
  • Errors or related queries

While many interstitial spaces are for advertising – think of the screen between free versions of mobile phone games or apps – there are just as many other uses. Using an interstitial space for in-house promotion has become increasingly popular.

Look at the example from retailer Kate Spade, for example. Users have to enter an email address and zip code to access a sale. This kind of interstitial experience provides the company with valuable marketing and demographic information while allowing the user special access to items and pricing. What’s also nice about the experience from the user perspective is that the interstitial space is “remembered” by device so users only get it on the first visit.

Interstitial experiences can come in a variety of formats. They can include static web pages, video, audio, animation, sliders and almost any other effect that you can imagine on a web page. The can appear between “screens” on almost any type of website as well, from between actions in a mobile game, to a splash-style screen before entering a webpage to the ads you see ahead of a clip on YouTube.

Elements of Good Interstitial Elements

Once you have decided to use an interstitial element, the design is a major consideration. There are a handful of common shapes for interstitial spaces – full-screen desktop or mobile, hover screen and floating.

How the space will be used factors strongly into design choices. If the interstitial space is used for advertising, it only needs to standalone and represent the brand and messaging of the company in the ad. But what about interstitial elements that are part of your page?

When designing an email signup, age or login verification window, related content messaging or error screens, it is vital that interstitial elements look like and match the tone of your site. They should carry a color and typography palette that mirrors that of the rest of the site. These elements should use the same voice, branding and language that is associated with your brand.

Well-designed interstitial experiences offer concise and clear communication to users. In just a few seconds – aim for a glance – users should be able to tell what action the interstitial space is asking them to complete and make a decision about performing the desired action or not.

Almost all interstitial elements include an action. Most commonly this is a click or filling in a simple form. But some interstitial elements are simply to provide information. Make sure to include a user interface element that makes it easy for the user to collapse or remove the small web page, if they can proceed without an action.

When planning the design think of these key elements, remembering that you are likely working on a small canvas:

  • One dominant visual
  • One small – no more than 10 words – text block
  • Branding
  • Possibly a button to click in order to complete an action

Questions for Interstitial Experiences

When planning an interstitial web page design project, there are three fundamental questions to consider, according to Faizan Bhat, a product manager at Genesis Media.

  • Does the interstitial contain material that the visitor could find valuable and relevant?
  • Is it shown to visitors at times when they will consider it appropriate?
  • Does it look and feel like an extension of the primary website experience?

If the answer to any of these questions is no, it’s time to replan your interstitial design project. Consider an interstitial experience as an alert, it should only appear when it will have a useful purpose. This applies to the designer or website as a whole and, maybe more importantly, to the user. Valuable interstitial experiences convert calls to action, while poor examples will cause users to leave the site.

10 Interstitial Design Ideas

Now that you are thinking about interstitial design, here’s a gallery of ideas from Behance and Dribbble to help inspire you. Some of the examples are from live projects, while others are only concepts. To learn more about each, visit the designer portfolio.

interstitial

interstitial

interstitial

interstitial

interstitial

interstitial

interstitial

interstitial

interstitial

Conclusion

It is important to remember that interstitial experiences are not just for ads. They can be a valuable tool to help users better navigate, shop or explore a website. The best interstitial experiences are not always obvious to users and while helping the site owner gather important information or directing users to specific calls to action.

Interstitial spaces will likely continue to grow in popularity as a bridge between information and desired content. The key is to create an experience for users that is not obtrusive and remains visually pleasing.