Modals

Overview

Description

A modal is a component that appears as a layer on top of a main application interface, blocking interaction with the background until the user addresses the modal’s content. Modals are used to display important information, request user input through forms, confirm actions, or guide users through a process without forcing them to leave the current page.

Key considerations

Key UX considerations include trapping focus, providing clear and actionable buttons, ensuring keyboard accessibility (like closing with the Escape key), and using them only when disruption is justified for a focused task.

Uses

  • Displaying important information: for critical alerts or details that require immediate attention, such as a timeout notification.
  • Gathering user input: collecting information, like credit card details or profile information, without redirecting the user to a new page.
  • Confirming destructive actions: preventing irreversible mistakes by requiring user confirmation before a significant change or transaction.
  • Guiding users: providing a focused space for multi-step processes or tutorials, though care must be taken with complex tasks.
  • In summary: Use modals for important alerts and notifications, confirmation of an action or actions, quick tasks, onboarding or tours, data input.

Value to User

  • Keeps attention focussed on important actions.
  • Task simplification.
  • Access to contextual information without losing their place or being distracted.
  • Error prevention.
  • Modals facilitiate quick actions, the display of critical information, and allow for feedback on user-intitiated events.

Best Practices

  • Contextual relevance: use modals for tasks that are relevant to the current user activity or can streamline a task.
  • Clear content and actions: include a descriptive title and clear, action-oriented button labels to tell users exactly what will happen.
  • Keyboard accessibility: ensure users can close the modal by pressing the Escape key and trapping focus so the keyboard cannot interact with the background content.
  • Avoid unnecessary disruption: do not use modals for non-critical information, such as general pop-ups or simple requests that can be handled in the main interface.
  • Focus and accessibility: the modal should demand attention, requiring the user to interact with it before returning to the main page.
  • Visual hierarchy: a transparent overlay behind the modal can give users a sense of the main application while keeping the focus on the modal.

Accessibility Notes

  • Trap focus within the modal.
  • Provide aria-modal=”true”.
  • Support Esc to close.
Can’t find what you’re looking for? Get in touch