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

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.

...

1. Product area (Verint logo and suite name).

2. Application selector.

3. Navigation area (Top or Left). See each type for more info.

4. Additional options (in Left Navigation mode only)

   1. Instances

   2. Additional information

5. Search

6. Notifications indicator

7. Help center

8. User profile, including:

   • User status

   • System and User settings

   • Logout option

...

The product area consists of:

• The the Verint logo.

• Application the application suite name.

Placement and positioning

...

• The name of the currently-selected application.

• A menu icon button ⋮, to indicate a drop-down list.

• A drop-down list of other suite 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.

...

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

• Applications should be sorted either:

  • in order of importance, or

  • alphabetically.

• External products should be shown underneath internal applications.

...

• Clicking the menu icon button ⋮ beside the application name will open the list of available applications.

• When an application If another application within the suite 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 their separate pages for each typemore details.

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 only 2 levels in the menu hierarchy. When there are 7 or fewer menu items at each level.	Image needs updating Image Added
Left Navigation mode	When there are only 2 3 or more levels in the menu hierarchy.	Image Removed	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 Instances or additional 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 - Branches Branch results only.

Example of when with all three sections are used:

Placement and positioning

...

• 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 a results menu will be displayed beneath the search field.

  • Search the search parameter will be highlighted in the displayed result’s menuresults 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.

Notifications indicator

Description

...

• A bell icon button is shown between Search and the Help center.

States

...

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

...

The user profile contains:

• a user profile image, user initials, or the default avatar, surrounded by a grey circle.

• current a status indicator around the profile image (optional).

• the profile menu, containing additional account-level options.

• a drop-down icon button, to the right.

...

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

• By default, the An additional circle around the user 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

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

• Current statuses (optionalA list of available statuses, with a blue check mark to indicate the user’s current status. (Optional).

• A horizontal line separating the statuses from other options.

• Notifications A notifications link, including a count.

• Preferences, which will open in a dialog , and may include these optionscontaining options such as:

  • Upload profile picture

  • Language

  • Date/Time format

  • Email preferences

• Switch profile. (optionalOptional).

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

Expand-Collapse behavior

...

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

Structure

...

• 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

...

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

...

Code

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