Choosing a Flow Pattern

When you create any Appcues flow, you will be prompted to select one of four patterns. In this article, we'll cover the following:


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. 

Learn more about creating modals here.


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:

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.

Learn more about creating slideouts here.


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

Learn more about creating hotspots here.


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

Learn more about creating tooltips here.


When should I use these patterns?

These patterns are great when you want to draw attention to certain elements of the page. We recommend using them in different ways:

What page elements will these patterns work with?

Hotspots and tooltips can be placed on any elements that are immediately visible when the page loads. Buttons, images and any text that is immediately visible to the user is fair game.

This also means that elements that require additional user action aren't supported by these patterns just yet. Examples include modals, dropdown menus and other elements that first require the user to take action before the element will appear. .


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.

You can add more steps to your pattern by clicking Add Step at the bottom of your Appcues editor. 

There may a case where you would like to add steps of a different pattern, though, such as in these cases:

  • A welcome modal that connects with onboarding tooltips
  • A feature announcing slideout with guiding tooltips/hotspots
  • A tooltip tutorial followed by a slideout or modal with a feedback Typeform

In order to add steps of a different pattern, you'll have to create 2 or more separate flows, 1 for each pattern type and section of your flow. 

For example, if you would like your flow to look like:  Modal > Tooltips > Modal you will create one modal flow for Modal A, one tooltips flow, and another flow for modal B.

If you wanted to create  Modal > Tooltips, you would create one modal flow and one tooltip flow. 

When you have your patterns and flows created, follow the steps found here to link them together!