Modals

Modal windows create a "mode" where the parent window can't be used until the user takes action in the modal.
See also: Layers vs modals vs tooltips

Also known as: Modal window, overlay

Example

See the Pen Modals by SHC-FED (@SHC-FED) on CodePen.0

The large amount of white space above is only there to allow room to demonstrate the difference between modals with and without scroll triggers. It is not implicit in the markup or design for a modal.

Design Specs

  • Sears
  • Kmart

Desktop/Tablet

  1. There is 20px of padding between the edge of the Modal and the content. In addition, there should be 20px of padding above the headline as well as between the bottom of the headline and body copy.
  2. A headline (h2) is required and should be Open Sans Light, 25px and #001733.
  3. A subtitle (h4) is optional, but when present should be Open Sans Semibold, 17px and #001733 with 14px of padding beneath it.
  4. A title (h5) is optional, but when present should be Open Sans Semibold, 15px and #001733 with 14px of padding beneath it.
  5. Text within the message container is Open Sans Regular, 15px with a line height of 22px. Text color is #001733. Text should be left justified. There is 20px of padding around the text within the box.
  6. The lower box is #eeeeee and extends 14px above the buttons and 20px below the buttons.
  7. The modal border is 1px or 0.063em with the color #666666.
  8. The modal has a black curtain dimmer background with the color #333333 at 80%.
. Not pictured:
  • Height of the modal is flexible based on content, until maximum of 572px.
  • Width of the modal is a fixed width of 750px.
  • Alignment of both primary and secondary buttons is determined by context of use. For modals, the primary button should be right aligned.
  • Guidelines regarding buttons can be found here.
  • A scroll bar should be used if the text exceeds the max height of the layer. The design of the scroll bar is dictated by browser default. A white gradient is then applied at the bottom of the text to give a visual cue that the text overflows.
  • Mobile

    1. There is 20px of padding between the edge of the Modal and the content. In addition, there should be 20px of padding above the headline as well as between the bottom of the headline and body copy.
    2. A headline (h2) is required and should be Open Sans Light, 20px and #001733.
    3. Text within the message container is Open Sans Regular, 14px with a line height of 22px. Text color is #001733. Text should be left justified. There is 20px of padding around the text within the box.
    4. The lower box is #eeeeee and extends 14px above the buttons and 20px below the buttons.
    5. The modal border is 1px or 0.063em with the color #AAAAAA.
    6. The modal has a black curtain dimmer background with the color #666666 at 80%.
    Not pictured:
  • Alignment of both primary and secondary buttons is determined by context of use. For modals, the primary button should be right aligned.
  • Guidelines regarding buttons can be found here.
  • Width of the modal is a fixed width of 300px (600px at 2x).
  • Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

    Desktop/Tablet

    1. There is 20px of padding between the edge of the Modal and the content. In addition, there should be 20px of padding above the headline as well as between the bottom of the headline and body copy.
    2. A headline (h2) is required and should be PT Sans Narrow Bold, 25px and #333333.
    3. A subtitle (h4) is optional, but when present should be PT Sans Narrow Bold, 20px and #333333 with 14px of padding beneath it.
    4. A title (h5) is optional, but when present should be Helvetica Bold, 15px and #666666 with 14px of padding beneath it.
    5. Text within the message container is Helvetica Regular, 15px with a line height of 22px. Text color is #333333. Text should be left justified. There is 20px of padding around the text within the box.
    6. The lower box is #eeeeee and extends 14px above the buttons and 20px below the buttons.
    7. The modal border is 1px or 0.063em with the color #666666.
    8. The modal has a black curtain dimmer background with the color #333333 at 80%.
    . Not pictured:
  • Height of the modal is flexible based on content, until maximum of 572px.
  • Width of the modal is a fixed width of 750px.
  • Alignment of both primary and secondary buttons is determined by context of use. For modals, the primary button should be right aligned.
  • Guidelines regarding buttons can be found here.
  • A scroll bar should be used if the text exceeds the max height of the layer. The design of the scroll bar is dictated by browser default. A white gradient is then applied at the bottom of the text to give a visual cue that the text overflows.
  • Mobile

    1. There is 20px of padding between the edge of the Modal and the content. In addition, there should be 20px of padding above the headline as well as between the bottom of the headline and body copy.
    2. A headline (h2) is required and should be PT Sans Narrow Bold, 25px and #666666.
    3. Text within the message container is Helvetica Regular, 14px with a line height of 22px. Text color is #333333. Text should be left justified. There is 20px of padding around the text within the box.
    4. The lower box is #eeeeee and extends 14px above the buttons and 20px below the buttons.
    5. The modal border is 1px or 0.063em with the color #666666.
    6. The modal has a black curtain dimmer background with the color #333333 at 80%.
    Not pictured:
  • Alignment of both primary and secondary buttons is determined by context of use. For modals, the primary button should be right aligned.
  • Guidelines regarding buttons can be found here.
  • Width of the modal is a fixed width of 300px (600px at 2x).
  • Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.

    Production Examples

    • Sears
    • Kmart

    Desktop/Tablet

    Desktop/Tablet

    When Do I Use This?

    Modal require users to act explicitly in order to exit the mode and return to the parent window, or proceed to another.

      Use When:
    • Users are required to make decisions before proceeding, or to encapsulate multiple tasks within a discrete process.
    • Any instance where CTA buttons or other form elements are needed
      DO NOT use Modals when:
    • Information only (e.g. hints, tips, glossary definitions, price breakdown)
    • Selection or input is only single select. If it does not require a CTA button use a Layer
    • Alerts, Errors, or Confirmations are needed
    • When another layer-based element is present

    See also: Layers vs modals vs tooltips

    Usage Guidelines

    1. Use modals when you need a button(s) in the design

    An interaction that requires a button to trigger an action should use a modal, rather than a Layer

    A correct button usage.

    This usage of a button is unnecessary. The content is informational only, use Layer pattern

    2. Use for gathering Input data

    Input use cases (Data Entry or Selection) are placed in modals where it is clear that the user is performing a task separate from the parent window.

    Good use of a modal for input

    Allowing a user to close via a close X or clicking the curtain would cause data entry loss

    3. Close via button interaction only

    At least 2 buttons are required - one to proceed, one to cancel (explicitly labeled). Do not use a "Close X". Do not use links. User cannot close the modal by clicking on the dark curtain background

    Limiting the close interaction to explicitly labeled cancel or save buttons makes the available decisions clear

    A single button outside of the user's viewport can lead to users clicking Close X and losing their entry

    4. A curtain is required

    We limit the application of lightbox pattern solely to modal windows.

    The lightbox makes the requirement of a response clear

    Without the lightbox, the requirement of a response is less clear

    Without the lightbox, the requirement of a response is less clear

    5. Include a clear, visible title that matches the originating element

    A brief title is a best practice

    The title clarifies the association between the window and its trigger

    The title does not clarify the association between the window and its trigger

    ADA Compliance

    Modals need to be accessible for screen readers and people that only use the keyboard for navigation. When designing a modal window, there is usually only one main requirement in most implementations – the modal window should be the only thing the user can interact with on the current Web page. When a modal is displayed, the focus should be placed inside of the dialog so users can continue to navigate with the keyboard. Source: The Incredible Accessible Modal Dialog

    A modal dialog window - when opened, focus should be set to the dialog so a screen reader will begin reading and the keyboard will begin navigating within the dialog. Because the dialog is not focusable by default, assigning it tabindex="-1" allows focus to be set to it with scripting when it is presented. Source:http://webaim.org/techniques/keyboard/tabindex

    Useful links:

    Rationale

    Modal windows create a "mode" where parent window can't be used or indicate a new mode or state. The background is intentionally dimmed (“lightbox”) to give focus and clearly communicate the lack of availability of the parent window. We limit the application of lightbox pattern solely to modal windows. SHC version design rationale:

    • Closing is via buttons only because users must act explicitly in order to exit the mode and return to the parent window, or proceed to another page. User cannot close the modal by clicking on the dark curtain background.
      • Design best practice: any button should have an equal “escape or cancel” (minimum 2 buttons). Therefore, no Close X.
      • We have years of research studies that have touched our modal standard. Studies have not indicated any user problems using a modal that excludes an x button.
      • No scroll or other interactions are possible outside the window because it is user's current focus or mode.
      • Curtain styling - darkness aligns with the severity of situation, but leaves enough visibility to provide context of the parent page
      • Primary font size is default because modal content is primary. Secondary font size is available for use.
      • Size: At primary font size, the container or window stays on one screen on iPad (max height 572px) AND optimized for 50-60 char/line (width)
      • Opened by a click or tap or other user-initiated action (in the case of warning dialogs). No hover because modal interaction does not align with open on hover.
      • Title is required because it clarifies the association between the window and its trigger, and because it forces us to briefly the explain the reason for the interruption.
      • No Border because the dark curtain makes border unnecessary
      • Scroll scenarios:
        • Use a locked title bar because because it reaffirms context to the user
        • Fade at bottom is displayed due to usability concern (white background on white border means users won't know to scroll, especially on tablet which doesn't display scroll bar until interaction occurs)
        • Buttons are locked because the 2 buttons must always be in view
        • Horizontal line is added in scroll scenarios (only) because it gives an anchor for the fade to eliminate from and because buttons are locked.
      • Buttons are right aligned with the window with the primary call to action on the far right: supports natural mouse flow and indicates forward progress.

      Research

      Study: Protection Agreement Modal

      Takeaway - Be careful with button copy, placement in the modal. Studies a subtask/process modal. It appears that columnar body content and its relationship with button, and button copy drove user focus toward the secondary button.

      view full study

      Study: SHS: Home Improvement - HVAC IDP

      Any modal window must have a way to close/dismiss. See page 9.

      view full study

      Study: Universal Sign In Modal

      Takeaway: In modals, since a user is in a "contained" process, make sure a user understands all modal content, and why it is necessary to complete. Keep content focused, relevant. See page 14.

      view full study

      Study: Fulfillment Palooza April 2013

      Implementing a signup flow in what was initially presented as a "learn more" created concern to a user that they would lose their place in the parent page. See page 18

      view full study

      Study: Profile: Cancellation

      "Shoppers enjoyed seeing a confirmation [2-step verification] modal asking them if they wanted to cancel their order." See page 11

      view full study

      Article: Overlay Pattern

      Patternry's document about modal (aka overlay) windows

      view full study

      Article: NN/G 10 Best Application UIs

      Lightboxes "Generally, a user experience feels more accommodating if modal dialog boxes are avoided or downplayed. But, when something does need fixing, it's better to make sure that the user knows about it...Lightboxes do have downsides, however, and they shouldn't be used everywhere."

      view full study

      Article: UX Magazine Modals on Mobile

      Modal dialogs have become a ubiquitous feature of mobile web design, but designers need to put more thought into when to use them, and when to leave them out.

      view article

      Post a New Comment

      Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

      For general questions or assistance, email the Patterns Team directly.