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

...

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

Structure

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

• The Search bar extends to the left of the trigger icon, when selected.

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

Example with all three sections:

...

Internal logic

• The search bar covers the Application Selector and all levels of navigationright-hand navigation options.

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

...

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		When there are no unread notifications: the grey bell icon is shown. When there are unread notifications: a blue notification count blue badge appears above to the top-right of the icon button, including a count of the unread notifications.
Hover
Active

Interaction

Top Navigation mode

• Clicking on the bell icon will open the notifications Popover /wiki/spaces/UserExp/pages/1970119523 menu.

Internal logic

• When there are over 99 items in the notification menu, the count should read 99+.

...

State	Description	Regular	Hover	Active
Default (no status)	Grey line, 2 pixel width.outline
Available	Green line, 2 pixel width.external circle
Not available	Red line, 3 pixel width.external circle, wider than the green version

Profile Menu

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

...

• 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. <Can be multiple skip links - check they’re necessary>

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

...

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

Image RemovedImage Added

Image RemovedImage Added

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

...

Code

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

...