---
title: "Blockers Best Practices"
slug: "blockers-best-practices"
updated: 2025-10-14T15:32:50Z
published: 2025-10-14T15:32:50Z
canonical: "support.whatfix.com/blockers-best-practices"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Blockers Best Practices

****When** **to use Visible and Invisible Blockers****

**Visible blockers for Proactive Prevention:** Use a **Visible blocker** to proactively signal that an action is unavailable until a simple prerequisite is met. It acts as a clear visual cue, guiding the user through a required sequence of actions.

Use **Visible blockers** in the following scenarios:

- Indicate role-based access restrictions for unauthorized actions such as deleting data, viewing sensitive information, and more.
- Enable process compliance where users can see both the disabled UI element and the action needed to enable it on the same screen. For example, include alt text while uploading an image.
- Enforce process compliance by permanently disabling a UI element. For example, disable the search function on a new Large Language Model (LLM) application that your IT team has not approved.

For example, a **Visible blocker** grays out **View Version History** when users do not have the required permissions.

![Example of Visible Blocker. The blocked element appears visibly different.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Visible%20blocker_gif.cmproj.gif?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A32Z&se=2026-11-12T08%3A33%3A32Z&sr=c&sp=r&sig=kT8%2FO0xoXsWSmZCiX5S4YbR%2FMQMCli9CNLr14GWYpgs%3D)

**Invisible blockers for Reactive Enforcement:** Use an **Invisible blocker** for just-in-time data validation. It enables users to try to proceed with their task and provides feedback only if one or more conditions are violated. This approach avoids user frustration from seeing a pre-disabled UI element before they even begin their task.

Use **Invisible blockers** in the following scenarios:

- On the final step (such as **Save** or **Submit**) of multi-step forms, to validate one or more user inputs before saving or submitting the form.
- On intermediate steps (such as **Next**) in forms with sequential steps on multiple pages, to validate one or more user inputs before they proceed to the next page.

For example, when users fill a form and then click **Submit**, the UI element appears active, but an **Invisible blocker** stops the click. It checks if one or more required fields have the correct format. If not, the **Blocker** prevents the submission and shows a tooltip that explains the correction needed, such as “Enter your First Name.”

![Example of Invisible Blocker. The blocked element retains its visual look.](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Invisible%20Blocker_GIF_Enter%20First%20Name.gif?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A32Z&se=2026-11-12T08%3A33%3A32Z&sr=c&sp=r&sig=kT8%2FO0xoXsWSmZCiX5S4YbR%2FMQMCli9CNLr14GWYpgs%3D)

****A****dd helpful content in the Blocker tooltip description****

Use tooltip descriptions to guide users towards task completion. For example, in a form where users click **Save** before entering a mandatory text input, the Tooltip displays the message “Enter the Account Name, and then click **Save**”.

> [!WARNING]
> Note:
> 
> Follow these guidelines to write effective tooltips:
> 
> - Use simple words and sentences.
> - Keep the tooltip description brief and to the point.
> 
> ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Description simple(2).png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A32Z&se=2026-11-12T08%3A33%3A32Z&sr=c&sp=r&sig=kT8%2FO0xoXsWSmZCiX5S4YbR%2FMQMCli9CNLr14GWYpgs%3D)

****Write user-friendly error messages in Blocker tooltips****

Tooltips should focus on the problem, and not the person. Use neutral, collaborative, and actionable error messages to prevent user frustration and guide users to complete their tasks. Refer to the following common scenarios to write effective error messages in your tooltips:

| Scenario | Non-Example | Example |
| --- | --- | --- |
| Password Requirements | You entered an invalid password. | Your password must include at least 8 characters, one uppercase letter, and one special character. |
| Required Field Blank | Name field cannot be blank. | Enter your name. |
| Unsupported File Format | Upload failed. | Unsupported file format. Please upload a JPG or PNG file. |
| Payment Failure | You failed to enter a valid credit card number! | Payment failed. Please check your card details or try another payment method. |
| System Error | Something went wrong. | Whatfix could not save your changes. Please try refreshing the page. |

****Keep Blockers and the validation fields visible together****

Position the **Blocker** and the validation field so both are visible without scrolling. Clear and visible guidance minimizes user frustration.

> [!NOTE]
> Info:
> 
> If users need to scroll to find a field with missing information as indicated in a **Blocker** tooltip, consider adding a GIF in the tooltip to provide clear guidance.
> 
> ![Blocker with GIF in Tooltip guiding user to enter information in a missing field](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Best%20Practices%20Scroll.gif?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A32Z&se=2026-11-12T08%3A33%3A32Z&sr=c&sp=r&sig=kT8%2FO0xoXsWSmZCiX5S4YbR%2FMQMCli9CNLr14GWYpgs%3D)

****Ensure the Blocker tooltip does not hide** **any important UI elements****

Position the tooltip such that it does not hide any UI elements on your website or application.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Reposition tooltip(2).png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A32Z&se=2026-11-12T08%3A33%3A32Z&sr=c&sp=r&sig=kT8%2FO0xoXsWSmZCiX5S4YbR%2FMQMCli9CNLr14GWYpgs%3D)

****Use contrasting colors to highlight the Blocker tooltip****

Choose contrasting colors to make tooltips stand out on your website or application. This ensures that tooltips are visible and effective. For more information on contrast checking, see the [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Contrast color(2).png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A32Z&se=2026-11-12T08%3A33%3A32Z&sr=c&sp=r&sig=kT8%2FO0xoXsWSmZCiX5S4YbR%2FMQMCli9CNLr14GWYpgs%3D)

****Set the Appearance of Visible blockers in line with accessibility needs****

When you use **Visible** **blockers**, ensure that the blocked UI element is accessible to users with low vision needs. Under **Disable Element**, set the **Opacity** and **Gray** filter values to ensure the color contrast between the element with the **Visible blocker** and your application or website meets the latest Web Content Accessibility Guidelines (WCAG). For more information, see [W3C Guidelines for contrast](https://www.w3.org/TR/WCAG20-TECHS/F83.html), and then use the [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/).

**![UI on Studio to set opacity and gray filter for Visible Blockers](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Blockers_Visible%20Blockers_Configurations_Appearance.png?sv=2026-02-06&spr=https&st=2026-11-12T07%3A33%3A32Z&se=2026-11-12T08%3A33%3A32Z&sr=c&sp=r&sig=kT8%2FO0xoXsWSmZCiX5S4YbR%2FMQMCli9CNLr14GWYpgs%3D)**

> [!WARNING]
> Note:
> 
> **Blockers** are WCAG compliant, making them accessible to users of assistive technologies such as screen readers. For more information, see [Accessibility in Whatfix](/studio/docs/accessibility-in-whatfix). To understand how end users with disabilities can access **Blockers**, see [Is the Blockers feature on Studio WCAG compliant?](/studio/docs/is-the-blockers-feature-on-studio-wcag-compliant)

****Create one Blocker collection per page****

Whatfix evaluates only one **Blocker** collection at any given time. If there are two or more active **Blocker** collections on the same application page, then Whatfix evaluates only one of them.

> [!WARNING]
> Note:
> 
> To evaluate multiple Blocker collections on the same page, use Multi-segment Evaluation, which is currently a Beta feature. To enable this feature for your account, contact [support@whatfix.com](mailto:support@whatfix.com?subject=Increase%20content%20limit&body=Hi%20Team%2C%0APlease%20increase%20%3Ccontent%20name%3E%20limit%20to%20%0AThanks). For more information, see [Multi-segment Evaluation for widgets](/studio/docs/multi-segment-evaluation-for-widgets).