Top
Flows Best Practices
  • 16 Sep 2022
  • 3 Minutes To Read
  • Dark
    Light
  • PDF

Flows Best Practices

  • Dark
    Light
  • PDF

Use Flows for Product tours and Tutorials

Use Flows for sequential actions. For example: Product tour, Tutorials, and UI guidance.

Use simple and descriptive titles for Flows

Name every Flow clearly for easy retrieval during search. Use simple and descriptive words that your audience is likely to use. Keep the title short and use gerunds.
Name clearly(1).png

Do not use special characters while naming Flows

Do not use special characters when naming a Flow. Special characters may cause issues when trying to download the Flow as a video.

If the Flow title includes spaces or any of these special characters (<,>,:,",/,|,,?,*,#,%,\s,\n,.), then they are replaced with an underscore (_) when the Flow is downloaded as a PDF or a Video.
do not use special char.png

Create Flows in a stable environment

Create Flows on production/live application which is stable and is not constantly being updated by code changes. If the underlying code of your application is being changed, it may break any Flows that you may have created.

Stable site 1(1).png

Limit the number of steps to 15

Limit the number of steps in a Whatfix Flow to not more than 15 steps. This helps your users understand the value proposition of your guides quickly and easily.
Limit to 15 steps.png

Split long Flows into two parts

In case you can't keep the number of steps under 15, then consider splitting the guide into two and interlinking them. This keeps your guide crisp and simplifies user tasks.

When interlinking content, ensure that the button on the end message that links to the remaining procedure is titled appropriately. Use a short, action-oriented phrase.
Split into two.png

Interlink Flow using a clear phrase

When interlinking content, ensure that the button on the end message that links to the remaining procedure is titled appropriately. Use a short, action-oriented phrase.

Make sure tooltips don't hide any UI elements on the page

Position the tooltips so that they don't hide any elements on your page. In certain cases, the tooltip could inadvertently hide certain important UI.
Reposition tooltip(2)

Remove sensitive information using the Blackout feature

Remove personal/sensitive information using the Blackout feature. While creating a guide, use the Blackout feature to avoid capturing sensitive information like email, phone number, username, etc.
blackout feature.png

Use the Spotlight feature to prevent distractions for the user

Use the Spotlight feature to get the user’s complete focus on the element on which the tip is displayed. Users cannot interact with other elements when the Spotlight tip is active.
Spotlight feature(1).png

Don't exceed maximum image width in a Tooltip

When inserting images in your content, ensure that they don't exceed the width of the tooltip. Exceeding 270 pixels introduces a scroll bar.
distorted image(2)

Reduce the number of steps in a Flow using Smart Tips

Instead of creating individual steps for each field in a form, you can create Smart Tips that describes each field. This way all you need to create is a single step for the entire form asking the user to interact with the fields to find more information, thus reducing the total steps in the Flow. Also, the users can choose to see the tooltip help only for the fields they need information about,
 rather than seeing info for every field in the Flow steps.

Another benefit is that you can use the Smart Tips to validate user input ensuring the right information is entered. For more information, see Data Validation using Smart Tips

Use Optional Step to ensure Flow continuity

When you have a field/element in an application which do not appear to a certain set of users, configure such steps as Optional to ensure continuity of the Flow.

If the field/element does not appear, the Optional steps are skipped and the Flow continues to the next step. If the field/element is present in the UI, then the Flow progresses as usual. You do not have to create a separate Flow and trigger it based on the appearance of the field/element.

Use Contrast Colors to make the Tooltip Stand-out

Use contrasting colors that make the Tooltip noticeable on your website/application. This is to ensure that the Tooltips are not lost in your interface because they can't be distinguished between the underlying application.

For more information on contrast checking, see this contrast checker website that could help you decide.
Contrast color(2)

Author clear and concise content

Use simple words and sentences while creating Whatfix content. Keep the description in your Tooltip brief and to the point.
Description simple(2)

Choose an appropriate theme for the Tooltip

Choose the best available Tooltip theme to ensure the UI of the Tooltip matches your website/application’s UI.
Best Practices_tool tip

Add an End Message

Add an end message to all the Whatfix content to ensure your users are well informed about the next course of action.

For more informationon adding an end message, see Customizing the end message of a Flow.

Best Practices_end message


Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.