Versions Compared

Version Old Version 78 New Version 79
Changes made by

Carlie Bradshaw

Asaf Ben-Oved

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Status
colourBlue
titleongoing

...

Table of Contents
maxLevel1

Description

Images need updating

...

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

...

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.

Images need updating

Type

Choose:

Image

Top Navigation mode

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

  • When there are more than 7 menu items at any level.

  • When there are 3 or more levels in the menu hierarchy.

  • When the top bar area is needed to show instances or additional information.

...

Allows the user to search the suite hierarchy, including application names and menu items.

Images need updating

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.

...

  • The search covers the Application Selector 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 will have a scroll.

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

      • close the results menu and search field.

    • Clicking on a branch will:

      • navigate to the first page under the selected branch.

      • close the results menu and search field.

    • Clicking the X in the field will close the menu but will keep the field selected with text cursor ready to type.

    • Clicking Esc on the keyboard will:

      • 1st click - clear the search field.

      • 2nd click - close the menu.

...

The bell icon has three states, depending on whether there are unread notifications or the notifications popover is open.

State

Description

Regular

Hover

Active

Regular, no indicator

When there are no unread notifications:

  • the grey bell icon is shown.

Image RemovedImage Added

Regular, with indicator

When there are unread notifications:

  • a notification count appears above the icon button, and

  • the bell icon and notification count are blue.

Image RemovedImage Added

Selected

When the notification popover is open, whether or not there are unread notifications:

  • the bell icon and notification count (if present) are a darker blue.

Image RemovedImage Added

Interaction

Top Navigation mode

...

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

Bell needs adding to image

...

Structure

Displayed as an icon button with no text.

...

  • By default, users will be represented using their initials (e.g. JD for John Doe).
    INITIALS EXAMPLE IMAGE

  • Each user may upload an image to replace the initials.

  • If neither a user image or initials are available, a default avatar will be shown.
    DEFAULT AVATAR IMAGE

Current status (optional)

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

State

Description

Regular

Hover

Active

Default (no status)

  • Grey line, 2 pixel width.

Available

  • Green line, 2 pixel width.

Not available

  • Red line, 3 pixel width.

Profile Menu

...

  • the suite name and the second level of navigation will be hidden.

  • the user profile image will reduce in size.

States

Images need bell icon adding

State

Image

Expanded

Collapsed

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

  • Provides a way for users of assistive technology to skip what can often be many navigation links.

  • Skip links will be positioned at the bottom part of the Verint Logo.

  • When any of the components of the VerinTop is in focus, the VerinTop will be displayed in an Expanded state (similar to the hover state with a mouse cursor).

See example for Skip Links: <Update Image to visual>

...

Responsive Design

Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting all devices down to the common tablet size (960px width).

...

Zeplin link

Screen thumbnail

<<Short Zeplin link. You
Use this
>>

<<Screen with 200 width>>

Code

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