Validation

Validation

Validation identifies, and suggests solutions for, invalid components.

Validation header

Introduction

Validation alerts users to invalid components and offers possible solutions.

  • If a builder allows saves with invalid components, the validation alert is called a warning.
  • If a builder only allows saves using valid components, the validation alert is called an error.

Design Resources

Download Sketch Kit

Usage

Validation should be implemented as a system, with warnings or errors appearing in the header, on the canvas, and in any relevant panels.

Make validations that require attention easily discoverable. Users should also be able to hide alerts on the canvas, to maintain a clear WYSIWYG view.

Validation can take several forms:

  • For builders that allow saving or secondary actions when invalid components exist, any warnings are highlighted in the header, canvas, and panels. A confirmation modal confirms a save or secondary action (such as publishing) despite warnings.
  • For builders that don’t allow saving or secondary actions when invalid components exist, errors are highlighted in the header, canvas, and panels. Errors must be fixed before saving or using a secondary action.
  • If warnings and errors exist at the same time, both should appear in the header. Saving and secondary actions should be prohibited until all errors are fixed.

Accessibility Note: When building validation, work with Engineering to specify and implement screen reader notifications.

Variations

Warning Icon

The Warning icon appears in the builder header to alert users to issues that don’t prevent saving or secondary actions.

Wireframe showing a warning icon in the header.
Warning icon in header

Warning Popover

When a user clicks the Warning icon in the toolbar, a warning popover dropdown appears, and warning icons are highlighted on invalid components.

When the user clicks the warning popover dropdown:

  • If the associated component is not in view, pan until component is in view and is triggered to the warning-related select state.
  • A property sheet opens in the right panel, highlighting any invalid fields.
A wireframe showing a warning popover listing issues.
Warning popover listing issues
A wireframe showing the hover state of an item in a warning popover.
Hovering over a popover item
A wireframe showing a component highlighted after clicking an item in the warning popover.
On clicking an item in the warning popover

Hiding Alerts on the Canvas

When the user selects the Hide on Canvas button:

  • Warning icons on all components are hidden.
  • The button name becomes Show on Canvas. Clicking this button is the equivalent of clicking the warning icon in the header; all warning icons reappear on the canvas.
Wireframe showing the "Hide on Canvas" option in the warning popover.
Hide on Canvas Button
Wireframe showing the warning popover after clicking "hide on canvas." It now reads "Show on Canvas."
On clicking Hide on Canvas

Invalid Components

When the user hovers over an invalid component, it enters a state similar to the select state.

Wireframe showing the hover state when hovering over an invalid component.
On hovering over an invalid component

When the user hovers or clicks a warning icon on an invalid component, a popover appears showing warning(s) for that component.

Wireframe showing the hover state of hovering over a warning icon on an invalid component.
On hovering over a warning icon on an invalid component

When the user selects an invalid component, a property sheet appears, with invalid fields highlighted.

Wireframe showing the property sheet highlighting invalid fields after clicking an invalid component.
Clicking an invalid component

When all issues are addressed, the component’s select state updates; it is no longer invalid.

A wireframe showing a selected component with all invalid entries fixed, and no warning icons.
On fixing all invalid entries for selected component

Confirmation Modal

When the user selects Save, a confirmation modal displays existing warnings. The user can review the warnings, or choose to save.

A wireframe showing a builder header with a warning icon.
Click Save to save with warnings
A builder with a warning modal giving the user the option to save with warnings, or to review warnings before saving.
Confirm before saving with warnings

When the user selects Review Warnings, the browser again displays the popover dropdown and canvas warning icons.

Wireframe showing a warning review popover.
Reviewing warnings before saving

When the user clicks Publish, a confirmation modal displays any existing warnings. The user can review the warnings, or choose to publish.

Wireframe showing a builder that has been published with warnings.
Clicking Publish with warnings
A wireframe showing a modal with informing the user that warnings were found, and allowing them to review warnings before publishing, or publish with warnings.
Confirming Publish with warnings

After publishing, the popover dropdown and canvas warning icons remain. To address warnings for published or activated content, the content may need to be deactivated, then updated, saved and republished.

Wireframe with header showing that the status is published, but there are still warnings to review.
Published status confirmed with warning popover visible

Popover/Icon Auto-Display

When a user reopens the builder after exiting a previous session, any popover dropdowns and warning icons are displayed.

A wireframe showing warning popovers displayed when a user returns after exiting a previous session.
Warning popover displayed on reopening builder

Error Icon

The Error icon appears in the builder header to alert users to issues that do prevent saving or secondary actions.

A wireframe showing an error icon in the builder header and the component with the error highlighted.
Error icon on builder header

Error Popover

When a user clicks the Error icon in the toolbar, a warning popover dropdown appears, and error icons are highlighted on invalid components. Invalid components have a visually distinctive select/hover state.

A wireframe showing a popover with error details, grouped by component.
Error popover, with issues grouped by component

Error Alert Modal on Save or Secondary Action

When the user selects Save, a confirmation modal displays existing errors. The user must fix all errors in order to save.

Wireframe showing a modal asking user to fix errors in order to save.
Error alert on attempted save

When the user selects Activate, a confirmation modal displays existing errors. The user must fix all errors in order to activate.

Wireframe showing a modal asking user to fix errors in order to activate.
Error alert on attempted activation

Next: Zoom Controls