Layers

Layers display larger amounts of information, more than tooltips, upon click or tap. Its content is informational text and links only.
See also: Layers vs modals vs tooltips

Also known as: pop up

Example

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

Design Specs

  • Sears
  • Kmart

Desktop/Tablet

  1. There is 20px of padding between the edge of the Layer 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.
  3. The close ‘x’ must be top aligned with the text or title in the tooltip. The ‘x’ is from the SHC font library (letter 'u'), size 15px and #66666. There should be a 44px touch area around the close ‘x’ affordance and have 14px or 0.875 em of padding all around it it.
  4. A subtitle (h4) is optional, but when present should be Open Sans Semibold, 17px with 14px of padding beneath it.
  5. A title (h5) is optional, but when present should be Open Sans Semibold, 15px with 14px of padding beneath it.
  6. Text within the message container is Open Sans Regular, 15px with a line height of 22px. Text should be left justified. There is 20px of padding around the text within the box.
  7. The layer border is 1px or 0.063em with the color #666666.
Not pictured:
  • Height of the layer is flexible based on content, but cannot exceed a max height of 572px.
  • Width of the layer is a fixed width of 750px.
  • Shadows are no longer used on layers
  • If the layer is only presenting information, the character count should be 361 characters or more.
  • If the layer is presenting information with an accompanied link, the character count should be no more than 361 characters.
  • Opened by click. Closed by clicking X in upper right corner or clicking anywhere outside of the layer.
  • 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 Layer 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. The close ‘x’ must be top aligned with the text or title in the tooltip. The ‘x’ is from the SHC font library, size 15px and #66666. There should be a 44px touch area around the close ‘x’ affordance and have 14px or 0.875 em of padding all around it it.
    4. 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.
    5. The layer border is 1px or 0.063em with the color #666666.
    Not pictured:
  • The layer has a black curtain dimmer background with the color #333333 at 80%.
  • If the layer is only presenting information, the character count should be 361 characters or more.
  • If the layer is presenting information with an accompanied link, the character count should be no more than 361 characters.
  • Opened by tap. Closed by tapping X in upper right corner or tapping anywhere outside of the layer.
  • 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 Layer 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.
    3. The close ‘x’ must be top aligned with the text or title in the tooltip. The ‘x’ is from the SHC font library (letter 'u'), size 15px and #66666. There should be a 44px touch area around the close ‘x’ affordance and have 14px or 0.875 em of padding all around it it.
    4. A subtitle (h4) is optional, but when present should be PT Sans Narrow Bold, 20px with 14px of padding beneath it.
    5. A title (h5) is optional, but when present should be Helvetica Bold, 15px with 14px of padding beneath it.
    6. Text within the message container is Helvetica Regular, 15px with a line height of 22px. Text should be left justified. There is 20px of padding around the text within the box.
    7. The layer border is 1px or 0.063em with the color #666666.
    Not pictured:
  • Height of the layer is flexible based on content, but cannot exceed a max height of 572px.
  • Width of the layer is a fixed width of 750px.
  • Shadows are no longer used on layers
  • If the layer is only presenting information, the character count should be 361 characters or more.
  • If the layer is presenting information with an accompanied link, the character count should be no more than 361 characters.
  • Opened by click. Closed by clicking X in upper right corner or clicking anywhere outside of the layer.
  • 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 Layer 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. The close ‘x’ must be top aligned with the text or title in the tooltip. The ‘x’ is from the SHC font library, size 15px and #66666. There should be a 44px touch area around the close ‘x’ affordance and have 14px or 0.875 em of padding all around it it.
    4. 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.
    5. The layer border is 1px or 0.063em with the color #666666.
    Not pictured:
  • The layer has a black curtain dimmer background with the color #333333 at 80%.
  • If the layer is only presenting information, the character count should be 361 characters or more.
  • If the layer is presenting information with an accompanied link, the character count should be no more than 361 characters.
  • Opened by tap. Closed by tapping X in upper right corner or tapping anywhere outside of the layer.
  • 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

    A standard layer for Sears on desktop.

    A colored layer for Sears on desktop.

    Mobile

    A standard layer for Sears on mobile.

    A standard layer for Sears on mobile.

    A colored layer for Sears on mobile.

    Desktop/Tablet

    A standard layer for Kmart on desktop.

    A colored layer for Kmart on desktop.

    Mobile

    A standard layer for Kmart on mobile.

    A colored layer for Kmart on mobile.

    When Do I Use This?

    Use when more information is needed to explain associated content as layers allow a user to remain in their current context.

      Use when:
    • Text is 361 characters or more (e.g. legal text)
    • Text is informational and links only.
      DO NOT use Layers when:
    • Informational text is 360 characters or less - use a tooltip
    • Form elements are required
    • Alerts, Errors, Confirmations or Notifications are needed
    • Another layer-based element is already in use

    See also: Layers vs modals vs tooltips

    Usage Guidelines

    1. Layers are for reading larger amounts of information

    Layers should be used when text is 361 characters or more.

    Layers are used to display information about the associated content. Using the max height and scroll bar (when needed) keeps the entire layer in the viewport.

    This example exceeds viewport.

    2. Use for Single Selection

    Layers can include links.

    Selection or input with single select requires no CTA button. Closing the window does not lose any data.

    When form elements are required, use a Modal to prevent accidental data entry loss.

    3. Sizing

    Keep the Layer as small as possible and include a clear, visible title that matches the originating element.

    A good way to keep the layer small.

    Keep layers as small as possible to avoid obscuring other relevant information the user may need on screen.

    In addition to keeping the layer small, always include a title matching the originating element.

    ADA Compliance

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

    A layer 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 window. Because the window 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

    Rationale

    A layer can provide secondary or additional information while keeping users in the context of their primary task. SHC version design rationale:

    • Layers are preferred over a new browser window aka "pop up", because of interaction or behavior on touch devices and pop up blockers.
    • Curtain: No curtain or lightbox is due a variety of reasons. When a layer is very small, a curtain is too much. A curtain obscures the parent window and can disorient users.
    • Closing: The Close X as the primary closing method aligns with typical usage.
    • Font Size: Primary font size is the default because layers are for reading larger amounts of text. Tooltips are smaller and can use secondary font. Secondary font size is available for use if needed.
    • Size: An audit of existing usage drove 360 character threshold between Layers and tooltip. At primary font size, the container or window stays on one screen on iPad (max height 572px) AND optimized for 50-60 characters per line (width)
    • Open on click, no hover: due to the size of layers, hover to open or close is not viable.
    • Title is required because it clarifies the association between the window and its trigger, and due to scroll scenarios.
    • Close X size is a touch friendly size.
    • Animation on open is to to draw focus.
    • Border is dark to draw focus and distinction from the parent window.
    • Scroll scenarios:
      • Use a locked title bar with closeX because we need a persistent place for the X to exist when scroll occurs.
      • 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)

      Research

      Sears.com on Tablets: Key Considerations

      "Small target areas are especially troublesome for pop-ups and fly-outs...Ensure ample space around targets for tablet users, and ensure layers perform as expected with touch interactions." See Page 6

      view full study

      Comments

      1. Scott Sullivan

        I see the benefit of the layer functionality, but I don’t like that the user has to scroll back up to the top of the layer to close it with the X. A fixed header with a title and X could look nice.

        1. Karol Czyrka

          Hi Scott,
          The pattern does have a locked header, but thanks for the heads up that our visuals are not in sync. We will fix! The interactive example on the CSS Guide for Developer’s is correct – http://searspatternlibrary.com/enterprise/styleguide/section-4.html#Layers,%20Modals%20and%20Tooltips

      2. Karol Czyrka

        And, it’s all fixed. Thanks.

      3. Carlos M Torres

        Adobe CC Library element has a different width than the “fixed 750px”

        1. Lindsay Boland

          Hi Carlos!

          We have updated the CC Library element to have the new fixed with of 750px. Thanks for catching it!

      4. Steve Brennan

        Do we have a section for all the form notification types? The blue, yellow, red and green notifications that were on the older SPL site?

          1. Karol Czyrka

            Yes, this page http://searspatternlibrary.com/pattern-detail-pages/alerts-errors-confirmations-parent-page/ – which is linked to from the individual pattern detail pages of each type of notification (e.g. linked to from the Alerts page)

      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.