Overlays in apps – defining best practices

One of the pieces of feedback I have gotten on my app is that the onboarding is too long and, chances are, users will not complete it. The problem is that if users don’t invest the time to set up the app, they will not gain any value from it and will probably end up deleting it. This, needless to say, is not something I want. Short of automating parts of the process (it’s on the roadmap, I swear!) there’s nothing much that can change. However, I can try to make it friendlier.

Ms Moatti in her book “Mobilized” advises product managers to find a single task that the user can easily complete right away that will lead them to a positive experience. One that can show them, without much initial work, what the benefits of using the app are. The two examples she gave in her talk a few weeks ago was Pandora prompting users to set up one station and Facebook guiding users to initiate connections.

Ms Moatti’s advice led me to define that single task for my app. I then decided to interrupt the onboarding by telling the user when they complete that task. I wanted the interruption to be significant and beneficial without disrupting the onboarding. Searching for best practices I came across this great summary for instructions in mobile apps. The tl;dr is perfect: “Instructions in mobile applications must be designed for optimal scannability, as users tend to dismiss them quickly and do not read thoroughly.” But what is “optimal scannability?” The article goes on to give good guidelines:

Two new features, introducted right after the other, in YouTube's latest update.

Two new features, introduced right after the other, in YouTube’s latest update.


  • One tip per overlay: Don’t expect users to give the overlay too much of their attention When interrupting their flow. They just want to get on with using the app (which is great, it’s what we want, too!) Therefore, focus on one message or explain a single interaction as opposed to trying to tell them too much. An overloaded overlay will be swept aside with nary a glance. Also, users tend to try the suggested action when there is only one to “make sure they correctly understood the instruction.”
  • Avoid multiple tips: Expanding the “one tip per overlay” rule, and for the same reasons, one tip at a time. I do see some apps abusing this with two or three tips right after the other and my inclination is to just skip them all.
  • Use limited text and images: Arrows, spotlights, and other visuals alongside written instructions allow users to get the basic idea of what to do without reading very much. Keeping words to a minimum also increases the chances that users will read it.
  • Make it stand out: Users must be able to instantly understand that whatever they are looking it is temporary, not an integral part of the app, and can be swiped away. Full-screen overlays with a spotlight on a new icon, leading to a new feature, with a few words in a font that isn’t used in the app (usually a “looser” font) work best.

Three other tips I’d add on top of these:

  • Make it contextual: There are places in a flow where a user expects the interruption of an overlay. These are usually right at launch or when a new feature is activated. Try to avoid launching them when doing so would interrupt an important process.
  • Easy to dismiss:  like the YouTube tips above, that have a clear “Got it” button, make the overlays really easy to dismiss and don’t make the user look too hard for it.
  • Use overlays sparingly: overlays interrupt the user’s flow, for good and bad. If an app pops them up too often, users will start to ignore them. YouTube, one of the apps that really does overlays well, tends to show one or two with every update. Perhaps justified as an introduction to new features but after so many overlays I tend to ignore them.

Granted, most overlays are used to introduce users to new features without asking them to read the entire help file, but overlays can be used for any kind of in-app notification. As long as they’re not overdone (and not used for ads!) users will welcome and read them.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s