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

   1. Instances?

   2. Additional information (WM example)

   3. Progress indicator??? (with Liav)

7. User profile, including:

   • System settings

   • User settings

   • User status

   • Logout option

8. Notifications and alerts (WM Optional)

Product area

...

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

...

Additional options for Left Navigation

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

Instances

TBDThese additional header bar features may only be used in combination with Left Navigation.

Instances

Description

TBD

...

Structure

• A one-line row.

• Each instance is shown in a chicklet.

• A blue border around the selected instance.

Placement and positioning

Positioned on the bottom row, left-aligned next to the Application Selector.

Interaction

• Clicking on an instance will change the main workspace view to that instance.

• On hover, an X will appear, allowing you to close the instance.

Internal logic

• When the instances exceed the horizontal space, next and back buttons will appear to the right of the instances, allowing the user to scroll.

• There is no limit to the amount of instances a user may create.

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.

Interaction

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

...

• 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

Placement and positioning

Notifications should appear:

...

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?

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