Carlie Bradshaw , Asaf Ben-Oved, Shani Laendler (Unlicensed)
| Status | ||||
|---|---|---|---|---|
|
...
Product area (Verint logo and suite name).
Application selector.
Search
Resource center
Additional options for Left Navigation
Instances
Additional informationProgress indicator? (Liav)
User profile, including:
System settings
User settings
User status
Logout option
Notifications and alerts (WM Optional)
...
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 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.
...
… ?
Interaction
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.
...
Type | Choose: | Image |
|---|---|---|
There are two types of top navigation: Full and Condensed. |  | |
|  |
...
| |
Search
Description
Allows the user to search the suite hierarchy, including application names and menu items.
 |  |
Structure
The trigger icon is displayed as an icon with no label.
The search results menu is divided into 3 optional sections:
top 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:
 |  |
Placement and positioning
The position of the search icon may vary in cases when if additional elements are used (e.g. additional information).
Internal logic
The search covers Product lists 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 itself will have a 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 page will:
navigate to the page.
close the results menu and search field.
Clicking on a Branch branch will:
navigate to the
first page under the selected branch.
close the results menu and search field.
Clicking the “X” X in the field will close the menu but will keep the field displayed selected with text cursor ready to type.
Clicking Esc on the keyboard will:
1st click will - clear the search field.
2nd click closes - close the menu.
Resource center
Description
...
Placement and positioning
Positioned to the left to of the user profile.
...
Interaction
Clicking on the “?” icon button opens a menu with all of the resource’s center options.
Additional options for Left Navigation
These additional header bar features may only be used in combination with Left Navigation.
Instances
Description
TBD
...
Structure
A one-line row.
Each instance is shown in a chicklet.
A blue border around the selected instance.
Placement and positioning
Positioned on the bottom row, left-aligned next to the Application Selector.
Interaction
Clicking on an instance will change the main workspace view to that instance.
On hover, an X will appear, allowing you to close the instance.
Internal logic
When the instances exceed the horizontal space, next and back buttons will appear to the right of the instances, allowing the user to scroll.
There is no limit to the amount of instances a user may create.
Additional information
Description
Additional information can optionally be shown in the header bar.
...
Content
Can be either text or icons.
Structure
A one-line row.
It may be divided by vertical lines according to the displayed information
Placement and positioning
Positioned on the top row, right-aligned next to the User Profile and Resource Center.
Interaction
Additional information a read-only section
Tooltips may be used. Recommended for icons.
Progress Indicator
TBD
User Profile
resource center options.
User Profile
Description
The user profile shows the current user status and offers account-level options.
...
Structure
The user profile contains:
Profile user profile image or initialsCurrent , initials, or default avatar.
current status (optional).
Alerts and notifications indicator (optional, see below).
Profile profile menu, containing additional account-level options.
A a drop-down icon button, to the leftright.
Content
Profile image
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.
Current status (optional)
By default, the circle around the profile image will be bluegrey. However, it can also be used to show the user’s current status.
Default (no status) |
  |
Available |
  |
Not available |
  |
Profile Menu
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, which and may include these options:
Upload profile picture
Language
Date/Time format
Email preferences
Switch profile (optional).
Logout.
Interaction
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) and.
close the menu.
Notification and alerts
Description
A unified place where users can see the system’s alerts and notifications from different parts of the suite.
...
Stand alone, for use with Left Navigation only.
...
Within User Profile
...
Placement and positioning
Notifications should appear:
...
In the User Menu, when using Top Navigation.
...
Left navigation mode, stand alone. | Top navigation mode, within user profile |
 |  |
Structure
Notifications consists of:
an icon button (left navigation mode only).
a count of unread notifications.
a drop-down List of notifications.
Placement and positioning
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.
Structure
TBD
Content
TBD
Interaction
Alerts/notifications:
above 99: TBD “99+”
within the menu… TBD
When are they removed?
Best practices
<Whenever a recommendation (not a must) is provided>>
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.
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.
Top navigation, unless you have more than 7 menu items at each level, or more than 2 levels in the menu hierarchy.
<…>
<…>
Don’t use
...
<…>
...
<…>
General
...
Don’t use
Different types of navigation for different products within the same suite.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
...
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>>
