Add UX documentation and patterns for Modal component

[uxkai]

Modal - UX Documentation

Modals are a crucial user interface component, providing focused interactions and context-sensitive information. They play a significant role in enhancing user experience by guiding users through workflows, presenting important information, and capturing user input without navigating away from the current context. We distinguish various modal types and best practices to ensure consistency, usability, and effectiveness.

1. Success modal

Success modals are typically used to confirm that an action has been completed successfully, such as a payment that has been successfully processed. They display concise messages or prompt users for quick actions. They have minimal content and focus on guiding users toward a specific action.

• Layout:
  • The modal is centered on the screen, ensuring visual prominence.
  • It features a clean and minimalistic design to maintain focus on the primary action.
• Content:
  • Typically, the modal contains a title and a description. This description often serves as a brief, simple success feedback message.
  • A clear, full-width primary action button is prominently displayed, representing the most logical next step for the user. Clicking this button also always closes the modal.
  • A close icon (cross) is positioned in the top-right corner for easy dismissal.
  • In this case, it’s not necessary to add a secondary or tertiary action button labeled 'Close' or 'Cancel', as this modal serves purely to provide success feedback to the user. The user does not need to choose between two actions.

Visual example
Figma design

2. Feature modal (introduction or upsell)

Feature modals introduce or upsell features and provide context for specific functionalities of the product. They include additional branding elements and media content.

• Layout:
  • The modal is centered on the screen, ensuring visual prominence.
  • The modal features a vertical gradient background, transitioning from purple (branded with the company's color) at the top to white halfway down the modal. It reinforces brand identity and adds visual appeal to the modal.
• Content:
  • Besides textual content, feature introduction modals may include a centered video or image at the top to visually engage users.
  • Typically, the modal contains a title, a description, a primary action button and a tertiary action button.
  • A clear, full-width primary action button is prominently displayed, accompanied by a tertiary action button, which has even less emphasis than a secondary action button, that provides an alternative to the primary action, often labeled 'Close' for those who choose not to proceed with the primary action.
  • A close icon (cross) is positioned in the top-right corner for easy dismissal.

Visual example
Figma designs:

• Introduction
• Upsell

3. Action confirmation modal

Action confirmation modals serve as a checkpoint before a user performs an irreversible action, such as discarding unsaved changes or deactivating an account. It provides a safety net to prevent accidental data loss or unintended actions. The modal asks for a confirmation before proceeding.

• Layout:
  • The modal is centered on the screen, ensuring visual prominence.
  • It features a clean and minimalistic design to maintain focus on the primary and secondary action.
• Content:
  • Typically, the modal contains an icon, a title, a description, a primary action button, and a secondary action button.
  • The content succinctly conveys the purpose of the confirmation and provides clear options for user actions.
  • Action buttons are always aligned to the right side of the footer.
  • The primary action button is always positioned on the right for consistency and hierarchy.
  • A close icon (cross) is positioned in the top-right corner for easy dismissal.

Visual example
Figma design

4. Content modal

Content modals have an organized layout and are suitable for displaying extensive content, settings, or data tables while ensuring clear navigation and actionability. These modals have a header and footer, with scrollable content in between if it exceeds the vertical limits of the viewport.

• Layout:
  • The modal includes a fixed header and footer, providing consistent navigation and actions.
  • Content within the modal is vertically scrollable if it exceeds the viewport height.
• Header:
  • It may feature an icon on the left side, which is often used for contextual branding or indication.
  • Includes a title that succinctly describes the purpose of the modal.
  • A close icon (cross) aligned to the right allows users to dismiss the modal.
  • A separator visually distinguishes the header from the content below.
• Content:
  • The main content area accommodates (scrollable) content, ensuring readability and accessibility.
• Footer:
  • A separator visually distinguishes the footer from the content above.
  • Action buttons are always aligned to the right side of the footer.
  • The primary action button is always positioned on the right for consistency and hierarchy.

Modal pattern for ‘Close’ button:
If a user must make a clear choice in a modal (e.g., choosing between applying an AI-generated title vs. not applying one and closing the modal), the modal always includes a secondary action button labeled Close, Cancel, or Dismiss, positioned on the left next to the primary action button, in addition to a cross icon in the upper right corner. This setup is used unless the modal already contains two clear action buttons that automatically close the modal upon performing their actions (e.g., choosing between leaving a page without saving changes vs. staying on the page to continue editing).

Visual example
Figma design

• Fixed content
• Scrollable content

---

Overlay

The "overlay" or "backdrop" behind a modal serves several purposes, including:

1. Visual focus: By darkening or graying out the background content, the overlay helps to visually emphasize the modal, drawing the user's attention to the foreground.

2. Contextual separation: It visually separates the modal from the underlying content, indicating that the modal is a distinct part of the interface and temporarily interrupts the user's interaction flow.

3. Accessibility: In some cases, the overlay may serve as a barrier to interaction with content behind the modal, ensuring that users focus on the modal's content and complete the intended action or task.

Overall, the overlay plays a crucial role in enhancing the usability and clarity of modal dialogs within the user interface.

We utilize a specific color and opacity for the overlay.

Overlay styling:

• We typically use an overlay of Tailwind color slate-500 with 0.75 opacity.
• This styling choice ensures that the overlay provides sufficient contrast with the modal content while maintaining visual harmony with the overall application design.
• The color slate-500 from the Tailwind CSS framework offers a dark, neutral hue that effectively darkens the background content without overwhelming the modal.
• Setting the opacity to 0.75 strikes a balance between visibility and readability, ensuring that the overlay effectively obscures the background content while still allowing users to perceive it.