Carlie Bradshaw , Asaf Ben-Oved, Shani Laendler (Unlicensed)
| Status | ||||
|---|---|---|---|---|
|
...
switching between applications.
navigating between pages in the selected application.
changing system-level configurations.
displaying notifications.
accessing help.
Main Structure
...
Product area (Verint logo and suite name).
Application selector.
Search
Resource Help center
Additional options for (in Left Navigation mode only)
Instances
Additional information
User profile, including:
User status
System settingsand User settingsUser status
Logout option
Notifications and alerts (WM Optional)indicator
Product area
Description
The Product area identifies the application as a Verint product.
...
The product area is in a fixed position in the top-left corner.
Interaction
Clicking the product area will open the Verint product suite site map.
...
Type | Choose: | Image |
|---|---|---|
|  | |
|  |
...
Placement and positioning
The position of the search icon may vary if additional elements are used (e.g. additional information).
Internal logic
The search covers the Application Selector and all levels of navigation.
Results are displayed from top to bottom according to their hierarchy in the navigation.
For any of the 3 sections, if more than 12 results are found, the section will have a scroll.
EXAMPLE WITH SCROLL
Interactions
The behavior of the search is based on Live Search.
Clicking the search icon button opens a search field to its left side.
Clicking anywhere outside the search field will close it.
While typing a search parameter in the search field.
A results menu will be displayed beneath the search field.
Search parameter will be highlighted in the displayed result’s menu.
Clicking on a page will:
navigate to the page.
close the results menu and search field.
Clicking on a branch will:
navigate to the first page under the selected branch.
close the results menu and search field.
Clicking the X in the field will close the menu but will keep the field selected with text cursor ready to type.
Clicking Esc on the keyboard will:
1st click - clear the search field.
2nd click - close the menu.
...
Help center
Description
Opens contextual Online online help pages and other resources such as product feedback.
...
Clicking on the ? icon button opens a menu with all of the resource help center options.
User Profile
...
user profile image, initials, or default avatar.
current status (optional).
notifications indicator (optional, see . (Top navigation mode only → see Notifications below).
profile menu, containing additional account-level options.
a drop-down icon button, to the right.
...
By default, users will be represented using their initials (e.g. JD for John Doe).
INITIALS EXAMPLE IMAGEEach user may upload an image to replace the initials.
If neither a user image or initials are available, a default avatar will be shown.
DEFAULT AVATAR IMAGE
Current status (optional)
...
Default (no status) |
 |
Available |
 |
Not available |
 |
Profile Menu
...
Current statuses (optional).
A horizontal line separating the statuses from other options.
Notifications link, including a count. (Top navigation mode only).
Preferences will open in a dialog, and may include these options:
Upload profile picture
Language
Date/Time format
Email preferences
Switch profile (optional).
Logout.
...
Clicking anywhere on the profile image, or the associated drop-down button, will open the profile menu.
Clicking anywhere outside of the profile menu will close it again.
Selecting an option from the profile menu will:
perform the action (e.g. logout, change status, or open the Preferences window).
close the menu.
Notifications button
Description
A unified place for list of system notifications and alerts can be accessed from the header bar. Notifications may be generated by any product within the suite.
...
Left navigation mode, stand alone
...
...
...
Structure
Notifications consists of:
an icon button (left navigation mode only).
a count of unread notifications.
a drop-down List of popup showing notifications.
Placement and positioning
Left Top navigation mode:
To the left A badge to the top-right of the user menu.
...
Top Left navigation mode:
At the top-right A bell icon button to the left of the user menu.
...
The notification position should be the same for all products within a suite.
Content
TBD
InteractionInteraction
Top navigation mode
Clicking anywhere on the notifications indicator user profile will open the notification drop-down listprofile menu, which includes a notifications option with a count, for example 2 Notifications….
The drop-down list notifications popup will be closed:
when a notification is selected.
when the user clicks outside the list.
Once a notification has been selected, it will be marked as read.
All notifications can be marked as read by…
opened by:
selecting the notifications menu option, or
directly selecting the top-right notifications badge.
Left navigation mode
Clicking the bell icon button will open the notification popup.
Internal logic
When there are over 99 items in the notification menu, the count should read 99+.
Unread notifications should be shown…
Read notification should be removed after x days.
Best practices
Use:
VerinTop in every Verint application.
The same type and menu items for all products within a suite.
Short labels for menu items, allowing room for translation.
Don’t use:
Different types of navigation for different products within the same suite.
Words in sub-menu items which are included in the parent menu item, to keep labels short. For example, the options underneath Settings should be (e.g.) Privacy, Localization etc., not Privacy Settings, Localization Settings etc.
Accessibility Compliance
...
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>
