Best practice
- Modals should be used sparingly because of their interruptive and invasive nature.
- Use a modal for quick tasks where the user will not lose the context of the underlying page.
- Keep the modal’s content concise.
- Avoid modals that open suddenly without user interaction.
- Avoid modals which are disconnected from what the user is currently doing.
- Avoid modals that require additional information outside the modal to be understood.
- Avoid multiple modals at once even though it is technically possible
- Make sure that the element that triggers the modal is keyboard accessible i.e. it should be possible to move the focus to that element and open the modal by pressing the Enter or Space key.
Usage
Modals are used to provide the user with in-context information and functionality relevant to their task at hand. When a modal is shown the user’s access to the rest of the page is blocked by a semi-transparent backdrop.
Since modals intentionally disrupt the user’s workflow, they should be used sparingly and only when in-page alternatives fail at providing the needed information or functionality.
Size and fit
The size of a modal can be configured to fit the content and the context of use. The ‘size’ refers to the outer dimensions of the modal whereas the ‘fit’ relates to the density of the components within.