Skip to main content

Modals and overlays

Introduction

Modals and overlays are important for creating good experiences, and this topic will discuss the differences in usage. Watch the video to learn more. 

Video

Transcript

Understanding when a model should be used versus an overlay is important for creating good experiences.

A modal is used to present a critical primary action to a user, which blocks the use of the rest of the app until the action is completed. 

A modal should not be used to show data without also presenting a primary action, nor should it ever cover data that is contextually relevant to the action in the modal.

An overlay can show supplemental data such as advanced controls, explanations, or help. An overlay should also not cover data that is contextually relevant to the overlay; for instance, advanced controls in an overlay should not cover the basic controls they extend. Indeed, because overlays inherently cover up the critical data we have on the screen, we should be cautious about using overlays.

Tooltips display informative text when users hover over an element. While tooltips are perfectly fine, we do not want to depend on them to help a user understand how to operate the screen. It’s easy to test: Ask someone to work the screen and see if they can without having to read the information in tooltips. 

Tooltips should only be added to links, buttons, and fields and never added to elements that a user would not normally hover upon, such as headings, or read-only data.

Check your knowledge with the following interaction.


This Topic is available in the following Module:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice