Tory Hobson; Product Designer

Interstitials

Designing interstitials that don't suck

 
 

Pardon the Interruption

Making interstitials suck a little less.

 
 

In the context of web and application design, an interstitial is (in most cases) an advertisement or promotional offer that sits between two pages. They appear briefly, or until the user interacts with it, as an overlay on the target page. Interstitials take up all or most of the screen which is what differentiates them from other ad types, like banner ads.

I don’t think I’ve ever come across anyone who actually likes interstitials. I mean let’s face it, they are kind of annoying. It’s not uncommon for me to try and pushback on designing these, I just feel that in most cases there are better ways to solve the problem. That said, sometimes I lose my case, have to get off my soapbox and just do what I have to do.

 
interstitials.png
 

Guidelines for Use

Since interstitials were unavoidable, I made sure to put some pretty strict rules and guidelines in place to help avoid a terrible user experience. 

An interstitial is reserved for messaging users about things of high, clear, and immediate value to them. When considering candidates for interstitials, think of how, when, and what you would want to be interrupted in your daily life: urgent things, useful things, warnings of dangers - things that will save your time, money, or life.

Interstitials should feel special. In order to ensure they do, we must be diligent in ensuring the quality of the interruption is high and that the experience is not constantly occurring.

  • Interrupts can only occur between a successful login and a user's dashboard

  • A user should only be interrupted on their first login to take the “tour”; a way for the user to familiarize themselves with the app’s UI

  • A user should never be interrupted in consecutive logins or too much in too short a period of time

  • Be brief with you message on the interstitial itself. Be specific and outline all the details on the page the user lands on if they decide to “learn more.”

  • Use illustrations when possible help convey what the feature does and how it could be valuable to the user.

  • Simple, animated illustrations can also be used to help delight the user. 

 
Old design

Old design

New & improved design

New & improved design

How interstitials are presented on different screen sizes

How interstitials are presented on different screen sizes

A lot of different options were tried

A lot of different options were tried