Carlie Bradshaw , Asaf Ben-Oved, Shani Laendler (Unlicensed)
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents | ||
|---|---|---|
|
Description
...
The VerinTop is a consistent pattern across all Verint products, making them immediately recognizable. It frames the application with a header bar and an optional left-hand panel.
...
The VerinTop will include the following components:
Product area (Verint logo and suite name)
Application selector
Additional options (in Left Navigation mode only)
Instances
Additional information
Search
Notifications indicator
Help center
User profile, including:
User status
System and User settings
Logout option
Product area
Description
The Product area identifies the application as a Verint product.
...
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 (e.g. Work Manager) should be opened in a new tab.
Interaction
Clicking anywhere on the application selector, including the menu icon button ⋮ beside the and application name, will open the list of available applications.
If another application within the suite 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.
...
Note: All products within a suite should use the same navigation type. Only external products, that are opened in a different tab, can have a different navigation type.
Type | Choose: | Image |
|---|---|---|
|
|  |
|
Note: Left navigation cannot be used in conjunction with the Filter Pane. |  |
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 Icon Button with no label.
The Search bar extends to the left of the trigger icon, when selected.
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 - Branch results only.
Example with all three sections:
...
Internal logic
The search bar covers the Application Selector and all levels of navigationright-hand navigation options.
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.
...
Interactions
The behavior of the search is based on Live Search.
Search Focus Management (see below see below under Accessibility Compliance))
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.
the search parameter will be highlighted in the results list.
Clicking on a page result 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 clear the field and 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.
...
A unified list of system notifications and alerts can be accessed from the header bar. Notifications can be generated by any product within the suite.
See /wiki/spaces/UserExp/pages/1970119523 Notifications for more information on the behavior of notifications.
...
A bell icon button is shown between Search and the Help center.
States
State | Image | Details |
|---|---|---|
Regular |  |
|
|
|
When there are unread notifications:
a notification count blue badge appears above the icon button
| ||
Hover |  | |
Active |  |
Interaction
Top Navigation mode
Clicking on the bell icon will open the notifications PopoverNotifications menu.
Internal logic
When there are over 99 items in the notification menu, the count should read 99+.
...
An additional circle around the user profile image can be used to show the user’s current status.
State | Description | Regular | Hover | Active |
|---|---|---|---|---|
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.
...
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.
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.
Hovering over the user profile will show the name of the user in a Tooltip.
System modes
Where the entire interface can be put into an alternative ‘special’ mode, the VerinTop may be used to indicate when it’s active. Relevant modes may include for demonstration, simulation (where changes are not applied to the live site), or impersonation (when acting as a different user).
A colored gradient should be added to the VerinTop background when the mode is activate.
A colored label describing the mode may also be added to the VerinTop.
System modes are usually managed (turned on and off) via the User Profile menu.
...
Best practices
Use:
VerinTop in every Verint application.
The same navigation mode (top or left) for all products within a suite.
Short labels for menu items, allowing room for translation.
...
Provide a way for users of assistive technology to skip navigation links, which would otherwise require a lot of additional clicks.
A skip link will be positioned underneath the Verint logo. <Can be multiple skip links - check they’re necessary>
When any item within the VerinTop is in focus, the VerinTop will be displayed in an Expanded state, as on hover.
...
Responsive Design
Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting all devices down to the common tablet size (960px width).
For more information, see the general Responsive Design guidelines.
Responsive guidelines
The VerinTop has been designed at 1366 px width. As the screen width changes, it should respond based on the number and length of menu items, in both 1st and 2nd level navigation.
The space between menu items should not be adjusted at any width.
Each menu item will have 5 px padding either side of the label. The selection highlight should extend across this padding.
1st level menu items will have an additional 20 px spacing between them.
2nd level menu items will have an additional 10 px spacing between them.
Wide screens
Example at 1921 px:
...
Where the screen size is wide enough to comfortably show everything contained within the VerinTop:
All content should be shown on one line, without wrapping. This includes:
1st level menu items, and
the application selector. This area may be expanded if the application name is long, and normally wraps onto 2 lines.
Elements aligned to the left- and right-hand sides (Product Area and User Profile) will remain there.
Narrow screens
Where 2nd level navigation does not fit within the screen width:
a More… option should be added on the right-hand side.
clicking More… will open a drop-down menu containing the remaining menu items.
the same hover and selected states from the main menu should be used for menu items in the drop-down.
Example at 1281 px:
...
Where 1st level navigation does not fit within the screen width, even after line wrapping:
The entire menu should be replaced by a menu icon button ⋮.
When the icon button is clicked, a drop-down menu will open.
1st level menu items will be shown on the left.
When a 1st level menu item is hovered over or clicked, the related 2nd level menu items will be shown on the right.
When a 2nd level menu item is selected:
the menu will close.
the new page will be shown in the workspace.
When the menu is first opened, the currently-selected 1st level and 2nd level menu items should be shown by default.
The current selection should be shown at both levels.
A hover state should be shown for all menu items on hover (unless using a touch device).
Where possible, the selected page will be shown next to the menu icon button. This should include both 1st and 2nd levels.
Examples at 961 px:
...
Current selection
...
Hover
...
For more information about responsive design for mobile, please contact the UX team.
Design
...
Zeplin link
...
Screen thumbnail
...
<<Short Zeplin link. You
Use this >>
...
<<Screen with 200 width>>
Code
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>
...
Search
Keyboard | Search icon | Search field | Results menu |
 |  |  | |
Tab | Navigates to the next focusable element |
| N/A |
Shift + Tab | Navigates to the previous component | Closes the search field and navigates to the previous component | N/A |
Space | Opens the Search field | Adds a space in the search Text Field |
|
Enter | Opens the Search field | N/A |
|
Esc | N/A |
|
|
Arrows | N/A |
|
|
Text input | N/A | Focus remains on field while text is added or removed | Focus returns to search field and the characters are entered, updating the results list accordingly |
Responsive Design
Verint products should support all devices down to the common tablet size (960px width).
For general guidelines, see Fundamentals - Responsive design.
For specific Verintop guidelines, see the Top navigation and Left navigation sub-pages.
Design
Code
...