Carlie Bradshaw , Asaf Ben-Oved, Shani Laendler (Unlicensed)

...

1. Product area (Verint logo and suite name).

2. Application selector.

3. Navigation area (Top or Left). See each type for more info.

4. Search

5. Resource center

6. Additional options. (Use only in combination with Left Navigation).

   1. Instances?

   2. Notifications and alerts (WM) (Optional)

   3. Additional information (WM example)

   4. Progress indicator??? (with Liav)

7. User menu, including:

   1. System settings

   2. User settings

   3. User status

   4. Logout option

   5. 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.

1. 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.

...

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

...

• 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

1. Alerts/notifications: TBD

2. Search: TBD

3. 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.

4. 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

...

Code

<<a box containing the code - when there is no code to present use the Coming Soon GIF>>