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
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
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)