Blockers Best Practices

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.

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.”

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”.

Note:

Follow these guidelines to write effective tooltips:

• Use simple words and sentences.

• Keep the tooltip description brief and to the point.

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:

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

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.

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

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.

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, and then use the WebAIM contrast checker.

Note:

Blockers are WCAG compliant, making them accessible to users of assistive technologies such as screen readers. For more information, see Accessibility in Whatfix. To understand how end users with disabilities can access Blockers, see Is the Blockers feature on Studio WCAG compliant?

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.

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. For more information, see Multi-segment Evaluation for widgets.