Carlie Bradshaw , Asaf Ben-Oved, Shani Laendler (Unlicensed)
The Verint Top is a consistent pattern across all Verint products, making them immediately recognisable. It frames the application with a header bar and an optional left-hand panel.
It allows the user to perform key actions including:
switching between applications.
navigating between pages in the selected application.
changing system-level configurations.
accessing help.
The VerinTop will include the following components:
Product area (Verint logo and suite name).
Application selector.
Search
Resource center
Additional options for Left Navigation
Instances
Additional information
User profile, including:
System settings
User settings
User status
Logout option
Notifications and alerts (WM Optional)
The Product area identifies the application as a Verint product.
The product area consists of:
The Verint logo.
Application suite name.
The product area is in a fixed position in the top-left corner.
Clicking the product area will open the Verint product suite site map.
Note: The product suite cannot be changed.
Allows the user to change the selected application within the suite.
Note: stand-alone products, which are not part of a suite, do not need to include the application selector.
The application selector consists of:
The name of the currently-selected application.
A 3 dot ⋮ icon, to indicate a drop-down list.
A drop-down list of other applications available to the user.
A divider line between internal applications and external products.
External link icons beside external products, to show they will be opened in a new tab.
A blue check mark beside the currently-selected application.
The application selector appears to the right of the product area, in the top-left corner.
The list should should be the same from all applications in a suite.
Applications should be sorted in order of importance or alphabetically.
External products should be shown underneath internal applications.
The application options should follow the List states.
The selected application will be indicated with a blue check mark.
A scroll bar will be used when the application selector is taller than the height of the screen.
External products should be opened in a new tab.
Clicking the 3 dots ⋮ beside the application name will open the list of available applications.
When an application is selected:
the list will close.
the view will change to the new application.
If an external product is selected:
the list will close.
the original application will remain selected.
the selected product will open in a new tab or window.
There are two types of navigation menu. See the separate pages for each type.
Note: The navigation type should be the same for all products within a suite, unless it is opened in a new tab or window, when it may have a different navigation type.
Type | Choose: | Image |
|---|---|---|
There are two types of top navigation: Full and Condensed. |  | |
|  |
Allows the user to search the suite hierarchy, including application names and menu items.
 |  |
The trigger icon is displayed as an icon with no label.
The search results menu is divided into 3 optional sections:
Top - Page results from the current application.
Middle - Page results from all other applications.
Bottom - Branches results only.
Example of when all three sections are used:
 |  |
The position of the search icon may vary if additional elements are used (e.g. additional information).
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.
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.
Opens contextual Online help pages and other resources such as product feedback.
Displayed as an icon button with no text.
Positioned to the left of the user profile.
Clicking on the ? icon button opens a menu with all of the resource center options.
The user profile shows the current user status and offers account-level options.
The user profile contains:
user profile image, initials, or default avatar.
current status (optional).
notifications indicator (optional, see 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).
Each user may upload an image to replace the initials.
If neither a user image or initials are available, a default avatar will be shown.
By default, the circle around the profile image will be grey. However, it can also be used to show the user’s current status.
Default (no status) |
 |
Available |
 |
Not available |
 |
Note: The options in the profile menu should be the same for all products in a suite.
Current statuses (optional).
A horizontal line separating the statuses from other options.
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.
A unified place where users can see the system’s alerts and notifications from different parts of the suite.
Left navigation mode, stand alone. | Top navigation mode, within user profile |
 |  |
Notifications consists of:
an icon button (left navigation mode only).
a count of unread notifications.
a drop-down List of notifications.
Left navigation mode:
To the left of the user menu.
Top navigation mode:
At the top-right of the user menu.
The notification position should be the same for all products within a suite.
TBD
Alerts/notifications:
Clicking anywhere on the notifications indicator will open the notification drop-down list.
The drop-down list 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.
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.
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.
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>
