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

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

   1. Instances

   2. Additional information

   3. Progress indicator? (Liav)

7. User profile, including:

   • System settings

   • User settings

   • User status

   • Logout option

8. Notifications and alerts (WM Optional)

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.

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

• A divider line between internal applications and external products.

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

  

• A blue check mark beside the currently-selected application.

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 should be sorted in order of importance.

• External products should be shown underneath internal applications.

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.

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.

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. There are two types of top navigation: Full and Condensed.
Left navigation	When there are more than 7 menu items at any level. When there are 3 or more levels in the menu hierarchy.

** Additional information, permitted only when using the left navigation. < Carlie Bradshaw >

Search

Description

Allows the user to search the suite hierarchy.

Structure

• The trigger icon is displayed as an icon with no label.

• The search results menu is divided into 3 optional sections

  • top - Page results from the current application

  • Middle - Page results from all other applications

  • Bottom - Branches results only

See illustration and example when all three sections are used

Placement and positioning

The position of the search icon may vary in cases when additional elements are used (e.g. additional information)

Internal logic

• The search covers Product lists and all levels of navigation.

• Results are displayed from top to bottom according to their hierarchy in the navigation.

• For any of the 3 sections, if more than 12 results are found, the section itself will have a scroll.

Interactions

• The behavior of the search is based on Live Search

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

• Clicking anywhere outside the search field will close it.

• While typing a search parameter in the search field

  • A results menu will be displayed beneath the search field

  • Search parameter will be highlighted in the displayed result’s menu

  • Clicking on a Page will navigate to the page. In addition, it will close the results menu and search field.

  • Clicking on a Branch will navigate to the 1st page under the selected branch. In addition, it will close the results menu and search field.

  • Clicking the “X” in the field will close the menu but will keep the field displayed with text cursor ready to type

  • Clicking Esc on the keyboard

    • 1st click will clear the search field

    • 2nd click closes the menu

Resource center

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

Interaction

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

Additional options for Left Navigation

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

• Profile image or initials

• Current status (optional)

• Alerts and notifications indicator (optional, see below)

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

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.

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

Profile Menu

Note: The options in the profile menu should be the same for all products in a suite.

• 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, for use with Left Navigation only.	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

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

Design

Code

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