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.

It allows the user to perform key actions including:

• switching between applications.

• navigating between pages in the selected application.

• changing system-level configurations.

• accessing help.

Main Structure

The VerinTop will include the following components:

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:

• The Verint logo.

• Application suite name.

Placement and positioning

The product area is in a fixed position in the top-left corner.

Interaction

• Clicking the product area will open the Verint product suite site map.

Note: The product suite cannot be changed.

Application selector

Description

Allows the user to change the selected application within the suite.

Structure

The application selector consists of:

• The name of the currently-selected application.

• A 3 dot ⋮ icon, to indicate a drop-down list.

• A drop-down list of other applications available to the user, including:

  • Group headers (in bold).

  • Application names.

  • External link icons beside external products to show they will be opened in a new tab.

    

Placement and positioning

The application selector appears to the right of the product area, in the top-left corner.

Content

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

• Applications are clustered into meaningful groups, such as Analytics or Quality Management.

  • Groups should be sorted in order of importance.

  • External Products, where they exist, should always be the last group in the list.

States

The application options should follow the List states.

Internal logic

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

If an external product is selected:

• the list will close.

• the original application will remain selected.

• the selected product will open in a new tab or window.

Main navigation

Types

There are two types of navigation menu. See the separate pages for each type.

Note: The navigation type should be the same for all products within a suite, unless it is opened in a new tab or window, when it may have a different navigation type.

Type	Choose:	Image
Top navigation	By default, if the menu options fit. When there are 7 or fewer menu items at each level. When there are only 2 levels in the menu hierarchy.
Left navigation	When there are more than 7 menu items at any level. When there are 3 levels in the menu hierarchy.

Search

Description

Allows the user to search the navigation options.

May not be displayed in the following cases:

• df

Structure

Displayed as an icon with no text

Placement and positioning

• Positioned to the right of the top navigation

• Position may change in case additional elements are used (e.g. additional information)

Internal logic

• Search covers Products list (1st level navigation), 2nd level navigation, 3rd level navigation

Interactions

• Clicking the search icon button opens a search field to its left side.

• 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 all 3 levels of navigation

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

Resource center

Description

Opens contextual Online help pages and other resources such as product feedback.

<<Add images>>

Structure

Displayed as an icon button with no text.

Placement and positioning

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 information

Description

Additional permitted uses for the top bar when using the left navigation.

Description

Opens contextual Online help pages and other resources such as product feedback.

Structure

Displayed as an icon button with no text.

Placement and positioning

Positioned left to the user profile

Notification and alerts

Description

TBD

Structure

TBD

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.

User Menu

• 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

Design

Code

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