Let me introduce UI Announcement Modals. No, do not leave yet. You may not like them so much as a user yourself, but I guarantee you will be interested in how some companies manage to use them to inform and educate their users.
If you know how to use them right, these UI modals are great for getting your app messages across to your audiences through the right channels, and this is exactly why they are a crucial part of any type of in-app marketing strategy. In this article today, I will be talking about the definition of UI Modals to better understand and provide some of the best practices to take a look at their modal content and tools to create them.
Let's see what we have.
What are UI Modals?
UI Modals, aka modal windows and overlays, are basically types of pop windows and are huge UI elements that are displayed the moment an application's main window pops up. These modals usually appear with a transparent layer to show a quick peek through the background interface, thus acting as a focusable element within your interface.
So, what's special about a UI Modal?
The reason modals are special is that users do not have the ability to interact with your background content unless they dismiss this specific window.
So, when used correctly, these UI modals can create miracles in moderation, feature announcements, account termination/creation, eliminate poor user experiences, and more. However, if they are not paid enough attention to, they can backfire and turn into something damaging to the overall user experience and distraction.
Let me elaborate a little on that and show some exemplification to prove my point and provide some inspiration!
6 Examples of Perfectly-Utilized UI Modals
1- Airbnb
Feature Announcement Purposes
Airbnb doesn't need any introduction; it is already everybody's favorite with the service, support, and experience it provides.
So why is it on this list?
Because there are also more things that it's great at.
Some of you may be familiar with Airbnb's Instant Book Feature Announcement. If you are, did you pay any attention to its structure and demonstration on the website? It's fantastic, to start with.
The site's announcement process follows a classy ''modal within tooltip'' UI pattern, which is great at capturing user attention the moment after login and manages to describe and display the new features, and their advantages, finalizing it with information about how and where to detect it.
As you can see, there's a successful, transparent background as a fullscreen modal window, just like I've mentioned above.
And here, you can see the tooltip directing the user's attention to the location of new features.
Why does this modal work so well?
Well, for one thing, when you look from a visitor's perspective, you can easily say that this transparent background modal window does not distract you from your end goal or make you forget about why you came here in the first place, and the content that's involved is quite relevant and full of the necessary information. What's even more crucial is, once you're inside the app, you are guided by the descriptive title and tooltip that are placed suitably and provide brief, go-to information.
2- Timely
Account Termination Purposes
One of the most commonly used time tracking services, Timely has managed to win many hearts by providing efficiency and encouraging productivity. It also has created a name for itself when it comes to saving a churned customer at the very last opportunity. How?
The answer is again the use of User Interface Modals.
In this scenario, Timely stated the possible consequences of terminating an account above the cancel button - mind and appreciate the placement- and achieved to make its users have second thoughts about leaving its services behind.
And it did not stop there.
The Timely team stepped up their game and decided to use churn survey modals to demonstrate different and alternative solutions like hosting a product demo call or offering a discount on subscriptions. With the help of these modals, they did not only interfere at the right them but they also managed to focus on the biggest issues in their services/product that are causing the churn to begin with.
3- Slack
New Feature Announcement Purposes
Slack's own experience with UI Modals are again serving a similar purpose, the purpose of feature announcements. However, the way they benefit from these modals is quite admirable. They are currently using modal windows to inform the users about the features in a less distracting way and a more effective UI pattern - tooltips.
Their way of combining tooltips and modals -since modals take a bit more space on the website and are more disruptive- provides a great example of innovation in the in-app marketing world.
Instead of going with a single modal that occupies quite some space, Slack implements a tooltip button right there, named, ''Learn More.'' And once the visitors click on this tooltip, they are instantly provided with a bunch of key information to help them discover and understand more.
This creates an interactive element and informative experience for the user and helps them get guidance without feeling interrupted or distracted.
4- Calendly
Feature Announcement Purposes
Calendly is another great provider of feature announcement UI modals examples in the way it manages to show off big changes and announcements like product redesign or the final launch of an anticipated feature such as their follow-up emails.
They used a simple yet effective modal to inform their users about their new and exciting feature: automated follow-up emails. This way, they could keep their users up to date with fresh content and an engaging manner.
5- BacklinkManager
Account Creation Purposes
BacklinkManager utilizes UI Announcement Modal actions to collect additional user input that is valuable for the whole onboarding process from the very beginning until the end.
How do they do it?
They use welcome screens, which are famously known for being extremely convenient and appropriate for the use of announcement modals since they manage to organize the account creation process and make sure the users do not experience any possible issues or get stuck in the middle of the process.
They also use micro surveys and leverage user segmentation to provide personalized onboarding flows specifically based on the audience's needs and requirements.
6- Zapier
Onboarding Purposes
Zapier is also among the other greats that chose to go with a simple and adorable welcome message to provide a warm and kind greeting for the new visitors. And they know that an entire modal window can be just that and still create miracles if used and implemented right.
They even added a touch of cuteness to their welcome modal with a tiny bit of animated confetti; it sure gives a warm vibe, doesn't it?
With this modal, they provide a quick look at a further guide that will help users discover and interact more with the website and the tool itself, offering a smooth onboarding process right from the start.
Long story short, if you have a lot to provide just like Zapier, multi-modal flows can be a great way to onboard new users to your product since they act as progress indicators and help motivate your users to complete multi-step onboarding tasks and interactive product tours.
Best Tools to Create Modals Without Coding
1- UserGuiding
UserGuiding is a code-free user onboarding software for web products. It provides numerous onboarding elements such as interactive product tours, feature highlights, NPS Surveys, onboarding checklists, and much more.
It's a great 3rd-party solution for managing user onboarding processes and coming up with efficient implementations, like UI Modals in this case.
At an affordable price, you can benefit from the numerous advantages, unlimited features, and simplicity of UserGuiding and create relevant in-app marketing strategies with the help of its assistance in UI-related matters.
So how does UserGuiding work?
Believe me when I say it's pretty easy.
All you need to do is decide and choose what type of a modal you want. If you wish to go with a welcome modal, you just need to choose the type you need, insert the info, add the visuals, and continue.
For further decisions that require personalization and as such, the popup window is fully customizable.
What do you need more?!
UserGuiding is here at your service if you need a quick - I mean very quick- solution that can be created and implemented in a few hours, UG is your go-to tool.
2- Appcues
With a lot of customers, expertise, and time spent in the field, Appcues is a brilliant solution to use, however, comes with a slightly higher price and is not entirely code-free.
Appcues is great for those who wish to make their product more flexible, having the chance to implement personalized buttons or code into the tool to make it look different and more engaging.
It makes it easier for non-technical teams to observe and track product usage, and create brilliant in-app onboarding tours, surveys, and of course, UI Announcement Modals, all in minutes.
3- Userflow
It is very intuitive to use and offers well-built onboarding solutions for non-technical team members and creates an efficient work environment for them in which they can set up modals to step up their UI announcement processes.
It's a simple-to-use tool that is code-free and highly customizable.
4- Userpilot
It's a cloud-based product experience platform primarily designed for customer success and product teams to onboard new users and boost product adoption with the help of convenient results gained from close observation.
This code-free solution makes it easier to create, manage, and conduct A/B tests of custom flows and customize the UI and come up with efficient announcement modals.
