Carlie Bradshaw , Asaf Ben-Oved, Shani Laendler (Unlicensed)
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents | ||
|---|---|---|
|
Description
...
The Verint Top VerinTop is a consistent pattern across all Verint products, making them immediately recognisablerecognizable. It frames the application with a header bar and an optional left-hand panel.
...
switching between applications.
navigating between pages in the selected application.
changing system-level configurations.
displaying notifications.
accessing help.
Main Structure
The VerinTop will include the following components:
Product area (Verint logo and suite name)
...
Application selector
...
...
...
Resource center
Additional options
...
(
...
in
...
Left Navigation mode only)
...
Instances
...
Additional information
...
Progress indicator??? (with Liav)
...
Search
Notifications indicator
Help center
User profile, including:
User status
System
...
and User settings
...
User status
Logout option
...
Notifications and alerts (in both navigation)
Product area
Description
The Product area identifies the application as a Verint product.
...
Structure
The product area consists of:
The the Verint logo.
Application the application suite name.
Placement and positioning
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, if exists.
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.
...
Structure
The application selector consists of:
The name of the currently-selected application.
A 3 dot menu icon button ⋮ icon, to indicate a drop-down list.
A drop-down list of other suite applications available to the user, including:
Group headers (in bold).
Application namesA 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.
.
Placement and positioning
The application selector appears to the right of the product area, in the top-left corner.
Content
The list should should be the same from for all applications in within a suite.
Applications are clustered into meaningful groups, such as Analytics or Quality Management.
Groupsshould be sorted
in order of importancealphabetically.
External
Products, where they exist, should always be the last group in the list.
...
products should be shown underneath internal applications.
States
The application options should follow the List states.
Internal logic
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.
Where there are more than 15 applications, a search field will be added above the list - see Search for more information.
...
External
...
products (e.g. Work Manager) should be opened in a new tab.
Interaction
Clicking the 3 dots ⋮ beside the application name anywhere on the application selector, including the menu icon button ⋮ and application name, will open the list of available applications.
When an application 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.
Main navigation
Types
There are two types of navigation menu. See the their separate pages for each typemore details.
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 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 navigation options. suite hierarchy, including application names and menu items.
 |
 |
 |
Structure
...
The trigger icon is displayed as an
...
Placement and positioning
...
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 covers Products list and all levels of navigation
Interactions
bar covers the right-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:
Content
Menu content
...
Logout - always displayed
Structure
- User representation:
A a results menu will be displayed beneath the search field.
Each row in the list will compose of several navigation levels
Search the search parameter will be highlighted in the displayed result’s menu
Clicking Esc on the keyboard or the “X” in the field at any time will clear the search field and close the menu (if opened)
Resource center
Description
Opens contextual Online help pages and other resources such as product feedback.
<<Add images>>
Structure
Displayed as an icon button with no text.
Placement and positioning
Positioned left to the user profile
...
Internal logic
Contextual to the currently selected app? screen?
Interaction
Clicking on the “?” icon button opens a new browser window on top of the current view.
Additional information
Description
Additional optional information always displayed. Permitted only when using the left navigation.
...
Content
Can be either textual or iconic.
Structure
A one-line row
It May be divided by vertical lines
Placement and positioning
Positioned on the top row left to any action icon of the VerinTop.
Interaction
The additional information is meant for read-only. Tooltips may be used.
Notification and alerts
Description
TBD
Structure
TBD
Placement and positioning
Notifications should appear:
In the User Menu, when using Top Navigation.
In the top bar, when using Left Navigation.
The notification position should be the same for all products within a suite.
User Menu
Description
The user menu holds the current user status and details additional action items within its menu.
...
<<With menu open>>
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.
Notifications indicator
Description
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 Notifications for more information on the behavior of notifications.
Structure
The notification indicator consists of:
an Icon Button.
a count of unread notifications.
a Popover showing the notifications.
Placement and positioning
A bell icon button is shown between Search and the Help center.
States
State | Image | Details |
|---|---|---|
Regular |  |
|
Hover |  | |
Active |  |
Interaction
Top Navigation mode
Clicking on the bell icon will open the Notifications menu.
Internal logic
When there are over 99 items in the notification menu, the count should read 99+.
Help center
Description
Opens contextual online help pages and other resources such as product feedback.
...
Structure
Displayed as an icon button with no text.
Placement and positioning
Positioned to the left of the user profile.
...
Interaction
Clicking on the ? icon button opens a menu with all of the help center options.
User Profile
Description
The user profile shows the current user status and offers account-level options.
...
Structure
The user profile contains:
a user profile image, user initials, or the default avatar, surrounded by a grey circle.
a status indicator around the profile image (optional).
the profile menu, containing additional account-level options.
a drop-down icon button, to the right.
Content
Profile image
By default, users will be represented using by 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.
Status
Current status (optional)
...
An additional circle around the user profile image will be blue. However, it can also be used to show the user’s current status:
Available: green line, 2 pixel width.
Not available: red line, 3 pixel width.
Menu list: TBD (sort, etc).
Alerts/notifications: the number of unread alerts/notifications is indicated in a circle above the user’s profile image:
above 99: TBD
within the menu… TBD
When are they removed?
Interaction
Alerts/notifications: TBD
Search: TBD
Help: click on Help will open the help center in a new tab, focused on the specific workspace currently being used.
When relevant, Help will operate as an action menu that will show all help options in the menu list.User profile: TBD
Validations and errors
<<Show images for Errors and warnings. See example: Radio button validations and errors>>
Transitions
<<Where possible describe shortly and demonstrate transitions or animations of the component pattern with animated GIF>>
Best practices
...
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.
A list of available statuses, with a blue check mark to indicate the user’s current status. (Optional).
A horizontal line separating the statuses from other options.
Preferences, which will open in a dialog containing options such as:
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.
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.
Top navigation, unless you have more than 7 menu items at each level, or more than 3 levels in the menu hierarchy.
<…>
<…>
Don’t use
...
<…>
...
<…>
General
<…>
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 and Localization rather than Privacy Settings and Localization Settings.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
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>>
Focus management
Skip Links
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.
When any item within the VerinTop is in focus, the VerinTop will be displayed in an Expanded state, as on hover.
...
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
...