UX Patterns

In this section, we will define and establish common UX patterns that should be observed across our product sets. These may prescribe specific plugins or toolsets, and if so, those will be listed.

Notifications

This pattern is for displaying application notifications within the navigation bar to let the user know something requires their attention.


<div class="notifications">
    <div class="notifications-toggle">
        <i class="notifications-icn icn fa fa-bolt"></i>
        <div class="badge badge--highlight">32</div>
        <div class="notifications-toggle-icn fa fa-sort-down "></div>
    </div>
    <div class="notifications-dropdown">
        <ul class="list list--bulleted notification-list" id="notification-feed-items">
            <li class="list-item notification">
                <a class="notification-link" href="#">Test Winner Email has been approved</a>
            </li>
        </ul>
        <a class="button-highlight" href="#">View All Notifications (<span id="view-all-count">32</span>)</a>
    </div>
</div>

Onboarding

There are a variety of ways which we can onboard and help users discover new or advanced features, enhanced workflow and any layout changes we employ.

Via a modal

Onboarding via a modal is an excellent way to disclose high levels of information regarding new features or mass-system changes. The intended delivery is quick bits of information, supplemented by images or perhaps a video that supports the information. Complex interactions should not take place in modal-based onboarding. Given the fact they hijack the screen, keen observation of the usage criteria is necessary when using them.

    Usage criteria

  • The user should be able to close the modal permanently
  • The modal should not show more than once in a session
  • The modal should be accessible once closed out

    Current Dependencies

  • jQuery Modal
  • Carousel (if more than one screen)

Via a tour

Tours are very helpful when used to show multiple interface elements in an ordered manner, or describe a process.

    Usage criteria

  • No more than one tour per page/view
  • Tour should be able to be accessed at any time
  • Tour should be able to be closed out at any time (unless feature is timeboxed)
  • Tour should not skip back and forth between the top and bottom of the page
  • Tips should always be placed above or below highlighted object to make sure tip stays on screen

    Current Dependencies

  • Intro.js