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

...

Description

...

The Verint Top is a consistent pattern across all Verint products, making them immediately recognisable. It frames the application with a header bar and an optional left-hand panel.

...

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 for Left Navigation).

   1. Instances?

   2. Notifications and alerts (WM) (Optional)

   3. Additional information (WM example)

   4. Progress indicator??? (with Liav)

7. User profile, including:

   • System settings

   • User settings

   • User status

   • Logout option

8. Notifications and alerts (

   in both navigation

   WM Optional)

Product area

Description

The Product area identifies the application as a Verint product.

...

• The list should should be the same from all applications in a suite.

• Applications should be sorted in order of importance.

• External products should be shown underneath internal applications.

...

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

1. TBDDDD External Products

   • External products should be opened in a new tab.

   • … ?

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.

...

See illustration and example when all three sections are used

Image RemovedImage Added

Placement and positioning

...

Clicking on the “?” icon button opens a menu with all of the resource’s center options.

Additional options

...

Instances

TBD

Notification and alerts

Description

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

...

Stand alone

...

Within User Profile

...

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.

Structure

TBD

...

for Left Navigation

Where Left Navigation is used, the header bar may contain additional features.

Instances

TBD

Additional information

Description

Additional information can optionally be shown in the header bar.

...

Content

Can be either text or icons.

Structure

• A one-line row.

• It may be divided by vertical lines according to the displayed information

Placement and positioning

Positioned on the top row, right-aligned next to the User Profile and Resource Center.

...

• Additional information a read-only section

• Tooltips may be used. Recommended for icons.

Progress Indicator

TBD

User Profile

Description

The user profile shows the current user status and offers account-level options.

...

Structure

The user profile contains:

• User’s Profile image or initials

• User’s current Current status (optional)

• Alerts and notifications indicator (optional, see below)

• A Profile menu, containing additional account-level options

• A drop-down icon button, to the left

Content

Profile image

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

...

• By default, the circle around the profile image will be blue. However, it can also be used to show the user’s current status.

Default (no status)	blue line, 2 pixel width.
Available	green line, 2 pixel width.
Not available	red line, 3 pixel width.

Profile Menu

...

• Current statuses (optional)

• A horizontal line separating the statuses from other options

• Preferences, which may include:

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

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

Notification and alerts

Description

A 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

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.

Structure

TBD

Content

TBD

Interaction

Alerts/notifications:

• above 99: TBD “99+”

• within the menu… TBD

• When are they removed?

Interaction

...

Alerts/notifications: TBD

...

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