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.

...

Structure

The product area consists of:

...

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

...

Additional optional information always displayedcan be shown in the header bar. Permitted only when using the left navigation.

...

Content

Can be either textual or iconictext or icons. Additional information is not interactive.

Structure

• A one-line row

• It May may be divided by vertical lines

...

The additional information is meant for must be read-only. Tooltips may be used.

...

Notification and alerts

Description

TBD

Structure

TBDA unified place where users can see the system’s alerts and notifications from different parts of the suite.

Stand alone	Within User Profile
Image Added	Image Added

Placement and positioning

...

The notification position should be the same for all products within a suite.

Structure

TBD

Content

TBD

User

...

Profile

Description

The user menu holds the current user status and details additional action items within its menu.

<<With menu open>>

Image Added

Structure

The user profile contains:

• User’s image or initials

• User’s current status (optional)

• An indicating number of alerts and notifications (optional)

  Image Added

• a menu containing additional actions

  • Content

Menu content

...

Logout - always displayed

Structure

...

Content

User Profile:

• 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

Current 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

...

(Listed from top to bottom):

• Current statuses (optional)

  • a horizontal break after statuses

• Notification and alerts (optional)

• User profile (optional)

• Log out

Internal logic

Alerts/notifications:

...

• above 99: TBD “99+”

• 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

...

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