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.
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>
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.
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.
Tours are very helpful when used to show multiple interface elements in an ordered manner, or describe a process.