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

...

Description

Images need updating

...

The Verint Top VerinTop 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.

...

Type	Choose:	Image
Top Navigation mode	By default, if the menu options fit. When there are only 2 levels in the menu hierarchy. When there are 7 or fewer menu items at each level.	Image needs updating
Left Navigation mode	When there are 3 or more levels in the menu hierarchy. When there are more than 7 menu items at any level. When the top bar area is needed to show Instances or Additional information.	Image needs updating

Search

Description

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

  • the search parameter will be highlighted in the results list.

• Clicking on a page result 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 clear the field and 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.

...

State	Image	Details
Regular, no indicator	UPDATE IMAGE	When there are no unread notifications: the grey bell icon is shown. Image RemovedImage Added
Regular, with indicator	UPDATE IMAGE	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
Active	UPDATE IMAGE	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
Hover	IMAGE
Focused	IMAGE
Focused, Active	IMAGE
Focused, Hover	IMAGE

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.

...

Positioned to the left of the user profile.

Update image

...

Interaction

Clicking on the ? icon button opens a menu with all of the help center options.

...

• By default, users will be represented by 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)

• An additional circle around the user profile image can 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 header bar can be collapsed by the user to allow for more vertical space. When collapsed, the second 2nd level navigation options are shown on hover.

Note: when using Instances (Left Navigation mode only), the instances must always still be visible when the header bar is collapsed.

...

When collapsed:

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

• the user profile image will reduce in size.

States

Images need bell icon adding

Show an example with Instances

Show hover state (expanded but still with the expand icon)

State	Image
Expanded
Collapsed

...

• On hover:

  • the expanded top will be shown automatically, revealing the second 2nd level navigation and suite name.

  • an expand icon button will appear below the product area.

    

• On removing hover the top will collapse again automatically.

• Clicking the expand icon button will pin the header bar open.

...

• Provide a way for users of assistive technology to skip navigation links, which would otherwise require a lot of additional clicks.

• A skip link will be positioned underneath the Verint logo.

• When any item within the VerinTop is in focus, the VerinTop will be displayed in an Expanded state, as on hover.

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

...

• The VerinTop has been designed at 1366 px width. As the screen width changes, it should respond based on the number and length of menu items, in both top 1st and second 2nd level navigation.

• The space between menu items should not be adjusted at any width.

  • Each menu item will have 5 px padding either side of the label. The selection highlight should extend across this padding.

  • Top 1st level menu items will have an additional 20 px spacing between them.

  • Second 2nd level menu items will have an additional 10 px spacing between them.

...

• All content should be shown on one line, without wrapping. This includes:

  • top-1st level menu items, and

  • the application selector. This area may be expanded if the application name is long, and normally wraps onto 2 lines.

• Elements aligned to the left- and right-hand sides (Product Area and User Profile) will remain there.

Narrow screens

Where second 2nd level navigation does not fit within the screen width:

• a More… option should be added on the right-hand side.

• clicking More… will open a drop-down menu containing the remaining menu items.

• the same hover and selected states from the main menu should be used for menu items in the drop-down.

Example at 1281 px:

...

Where top 1st level navigation does not fit within the screen width, even after line wrapping:

• The entire menu should be replaced by a menu icon button ⋮.

• When the icon button is clicked, a drop-down menu will open.

  • Top 1st level menu items will be shown on the left.

  • When a top 1st level menu item is hovered over or clicked, the related second 2nd level menu items will be shown on the right.

  • When a second 2nd level menu item is selected:

    • the menu will close.

    • the new page will be shown in the workspace.

• When the menu is first opened, the currently-selected top 1st level and second 2nd level menu items should be shown by default.

• The current selection should be shown at both levels.

• A hover state should be shown for all menu items on hover (unless using a touch device).

• Where possible, the selected page will be shown next to the menu icon button. This should include both top 1st and second 2nd levels.

Examples at 961 px:

...

Code

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