User Notifications

The notifications appear when the logged in user has new or existing notifications.

Unread Notifications

  • Quidditch canceled

    Professor Snape has booked the Quidditch pitch in advance for the Slytherin team so that they can train their new Seeker. Due to these unforeseen circumstances, Gryffindor's practice is canceled.

  • Lost: pet toad

    Looking for lost pet toad named "Trevor." If found, please contact nlongbottom@hogwarts.edu. Reward: 20 galleons.

<tk-popover class="popover--notifications"
  popover-title="Notifications"
  popover-trigger="outsideClick">
  <button aria-label="Notifications. 1 unread."
    aria-haspopup="true"
    class="btn"
    slot="popover-trigger">
    <tk-indicator type="new" class="user-notifications__indicator"></tk-indicator>
    <tk-icon class="header__icon" name="notifications" size="large"></tk-icon>
  </button>
  <div aria-live="polite"
    slot="popover-body">
    <ul class="notifications__list">
      <li class="notification__item" tabindex="0">
        <div class="notification__header">
          <tk-indicator type="new"></tk-indicator>
          <h4 class="notification__title">Quidditch canceled</h4>
          <time class="t-ghost-small notification__post-date"
                title="Jan 23, 2018, 10:35 pm PST"
                datetime="Jan 23, 2018, 10:35 pm PST">
            2 minutes ago
          </time>
        </div>
        <p class="notification__body">Professor Snape has booked the Quidditch pitch in advance for the Slytherin team so that they can train their new Seeker. Due to these unforeseen circumstances, Gryffindor's practice is canceled.</p>
      </li>
      <li class="notification__item" tabindex="0">
        <div class="notification__header">
          <h4 class="notification__title">Lost: pet toad</h4>
          <time class="t-ghost-small notification__post-date"
                title="Jan 22, 2018, 10:35 pm PST"
                datetime="Jan 22, 2018, 10:35 pm PST">
            1 day ago
          </time>
        </div>
        <p class="notification__body">Looking for lost pet toad named "Trevor." If found, please contact <a href="#" class="btn btn--link">nlongbottom@hogwarts.edu</a>. Reward: 20 galleons.</p>
      </li>
    </ul>
  </div>
</tk-popover>

Description

This pattern is used to notify customers of changes to UserTesting Labs.

Empty Notifications

No notifications

Notifications will appear here as new features and enhancements are introduced.

<tk-popover popover-trigger="outsideClick">
  <button aria-label="Notifications. 0 unread."
    aria-haspopup="true"
    class="btn"
    slot="popover-trigger">
    <tk-icon class="header__icon" name="notifications" size="large"></tk-icon>
  </button>
  <div aria-live="polite"
    slot="popover-body">
    <div class="user-notifications__empty">
      <tk-icon class="user-notifications__empty-icon" name="notifications" size="large"></tk-icon>
      <h3 class="t-medium">No notifications</h3>
      <p>Notifications will appear here as new features and enhancements are introduced.</p>
    </div>
  </div>
</tk-popover>

Notification Badge

1
<tk-badge type="alert">1</tk-badge>

Description

This badge will appear when a customer must provide additional information. When the appropriate information is provided, the badge should be removed to communicate that the task was completed. See the “Notification” section on the Badges page for more details.

Do

  • Take care when sending many visual notifications – it can be overwhelming
  • Use clear and precise language when notifying a customer
  • Add the badge when the customer must provide additional information
  • Remove the badge when the customer has provided the information

Don't

  • Use a notification badge when there is not something crucial for a customer to attend to