Choosing A Flow Pattern

When you create any Appcues flow, you will be prompted to select one of four patterns; modals, slideouts, hotspots, or tooltips. 

Modals

Modals have enough screen real estate to build user motivation and orient new users about the value proposition of your product and what they are there to accomplish. Modals can be multiple steps and you can include images, videos, text, and more.

Above is a customized modal in its standard pattern. Modals are also available as sidebars or full-screen takeovers. 

Use modals to welcome and motivate usersannounce new features, or give your users a "choose your own adventure" onboarding experience.

Slideouts

Slideouts are a great way to push notifications to more experienced users. They're built similarly to modals but allow for greater customization: you can select where on your page they appear and whether they come with a backdrop or not.

Below is an example of a bottom-left slideout with the backdrop on:

Use slideouts to announce new features, collect product feedback, or drive users to specific actions. In the example above, the Projectcu.es team has targeted a slideout to accounts with just one user to encourage them to add team members.

Hotspots

Hotspots appear on your page either with a circle or question mark beacon. To expand and read a hotspot, a user must click on it. 
Hotspots are a great pattern for existing customers or users who are already familiar with your interface. 

Above is a hotspot with a question-mark beacon

Use hotspots to point out smaller UI changes and provide your users with on-demand guidance or tips. 

Tooltips

Tooltips are the best pattern to guide new trialers and users who are unfamiliar with your application. Built just like hotspots, tooltips will automatically launch upon page load (based on your targeting preferences). If you create more than one tooltip in the same flow, they will link to each other in a sequential order. Like hotspots, you can set tooltips to be skippable or required by your users.

Tooltips can have no beacon, a circle beacon, or a question mark beacon. You can also get them to have an backdrop to better focus your users' attention, or leave them without a backdrop to allow users to interact with your site while going through your tooltip flow. 

Above is beacon-less tooltip that has a backdrop on.

Use tooltips to explain sequences and walkthroughs, or link them with a welcome modal to create an onboarding flow.

Using Multiple Patterns

Oftentimes you will want to use more than one pattern together for the best impact. For instance, if you want to encourage users to use a new or exisiting feature: Show users a slideout the next time they log in that emphasizes how the feature helps them out, then redirect them to that feature page with tooltips or hotspots to educate them on how to successfully use the feature.

Still need help? Contact Us Contact Us