Modals are used to provide supplementary information or request user input, needed to complete a user's workflow. By design, modals interrupt the user's workflow, temporarily blocking access to on-page content until the modal task is completed or dismissed. It is important to use them sparingly as they introduce a necessary disruption, and thus effective only when used correctly, for short and infrequent tasks.
Do's
- use modals for presenting critical information or capturing essential user input
- keep the content within modals concise, clear, and relevant to the user's current task
- allow users to dismiss the modal easily, either through the close button or using an overlay click
Don'ts
- avoid overusing modals as they can disrupt the user's workflow and lead to frustration
- do not use to place vital information, available exclusively within modals
- avoid making modals overly complex or overwhelming with excessive content or options
When to Use
- use for capturing user input that is necessary to complete a specific task or workflow
- use when presenting critical alerts or urgent information that requires immediate user attention
- use for displaying additional information, settings, or options related to the user's current context
When Not to Use
- avoid using modals for tasks that require frequent repetition or continuous user engagement, as it may lead to unnecessary interruptions, consider making the task doable from the main page
- do not utilise modals for displaying long-form content or lengthy descriptions that are better suited for a separate page or section
- avoid using modals for non-essential or optional tasks that don't need to interrupt the user's main workflow