HomeNewsModal Window Do’s and Don’ts: Transparent Background v. Full-Screen Takeover

Modal Window Do’s and Don’ts: Transparent Background v. Full-Screen Takeover



medium bookmark / Raindrop.io | image

Modal windows are a great tool for setting the tone of your user’s onboarding experience. Now, get this: you can easily change the tone by styling the interaction between the modal window and your landing page. We analyzed two possible interactions that we like to call “Transparent Background” and “Full-Screen Takeover.” Let’s check out how Honey and Typeform onboard their users with modal windows: 


1. Honey: Transparent Background

image

This modal window is pretty much as subtle as they come. Of course, there is a very specific CTA required to continue (logging into the app) but in terms of how the modal window interacts with the landing page, the transparent background seems to help users onboard without being distracted from their end goal. We recommend using a transparent background modal when you want your users to get a sneak peek of what’s in the app. Get ‘em hooked, then onboarded. 


2. Typeform: Full-Screen Takeover

image

Full-screen takeovers can be really effective if your onboarding process requires specific user input, or if you’d like to focus your user’s attention on one specific modal. However, we recommend using these sparingly, as they block the user’s view into the app and can be distracting from the user’s end goal (i.e completing the onboarding process) 


You can improve your user onboarding experience using Appcues’ modal windows today, code-free.    

Want more helpful tips? Visit the Appcues blog to find out how to make your user onboarding experience the best it can be!

Featured articles on Prototypr: