Carlie Bradshaw , Asaf Ben-Oved, Shani Laendler (Unlicensed)
| Status | ||||
|---|---|---|---|---|
|
...
Product area (Verint logo and suite name).
Application selector.
Search
Resource center
Additional options. (Use only in combination with Left Navigation).
Instances?
Notifications and alerts (WM) (Optional)
Additional information (WM example)
Progress indicator??? (with Liav)
User menu, including:
System settings
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.
...
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.
TBDDDD External Products
Such products may be opened from the
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.
...
While typing a search parameter in the search field
A results menu will be displayed beneath the search field
Each row in the list will compose of several navigation levels
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)
...
Opens contextual Online help pages and other resources such as product feedback.
<<Add images>>
Structure
Displayed as an icon button with no text.
...
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.
...
Notification and alerts
Description
TBD
Structure
TBD
Placement and positioning
...
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>> |
Content
Menu content
Logout - always displayed
Structure
User representation:
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.Status (optional). By default, the circle around the 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
<Whenever a recommendation (not a must) is provided>>
Use:
VerinTop in every Verint application.
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
<…>
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>>
