| Table of Contents | ||
|---|---|---|
|
...
Left navigation mode should be used:
...
when there are 3 or more levels in the menu hierarchy.
when there are more than 7 menu items at any level.
When there are 3 or more levels in the menu hierarchy.
When when the top bar area is needed to show instances or additional information. See Additional options for Left Navigation below.
...
Up to 5 levels in the menu hierarchy.
Menu items, including:
Item labels, which can only be are presented on one line only.
Expand and collapse icons, to show where there are more levels in the menu hierarchy.
Each subSub-level in the hierarchy menu items, which will be indented to the right.
A grey line to separate 1st level items.
A blue marker is shown to the left of the selected item.
An expand or collapse icon in the top-right corner, allowing the user to switch between pinned and unpinned states.
A scroll bar for the open section of the menu.
When the left navigation is in a collapsed state, it will simply consist of:
The A left-hand grey column.
The A blue marker in the location of the top level of the selected item.
...
Left navigation is shown in a left-hand panel, which can be collapsed.
It will always extend across the full height of the page, beneath the header bar.
The panel will be the same width as the Product area (Verint logo and suite name).
States
State | 1st level navigation | Additional level navigation | Comment |
Regular |
|
| |
Hover |
|
| |
Active |
|
| |
Selected |
|
| |
Selected, Hover |
|
| |
Focused |
|
| |
Focused, Hover |
|
| |
Focused, Selected |
|
|
Default state
By default , the first item will be selected, unless otherwise configured by the user.
Where there is more than 1 one level, and the 1st level item does not link to a separate page, the first item at each sub-level will be selected.
...
Only one item at a time can be selected from each level.
On selecting a new 1st level item, the previously-open section closes automatically.
Everything can be collapsed at the same time (unlike an accordion).
Parent items may:
link to a separate page, or
operate only as a container for the sub-levels.
The behaviour of parent items must be the same across the whole entire navigation within each a product.
Scroll should only operate within the open 1st level item and its sub-levels, when there are more than 3 items shown.
There is no horizontal scroll.
Truncation should be avoided, where possible, by using short labels. Where the label is longer than the menu width and must be truncated, the full label should be shown in a tooltip on hover.
...
Any part of an item can be selected clicked to select it.
On selecting an item from the left navigation menu:
if the item has no sub-levels, the user will be redirected to the relevant page.
if the item is only a container for sub-items, it will be expanded to show the next level in the hierarchy.
if the item has sub-levels but also links to a separate page, the user will be redirected to the relevant page and the item will be expanded to show the next level in the hierarchy.
Clicking on an expand and collapse icon next to an item will only only open or close the hierarchy, without redirecting the user to another page.
Only one item for at each level can be expanded at a any one time.
The current selection (at any level) is marked with a grey background and a blue marker on the left.
If a 2nd or 3rd level item is selected, when collapsed the 1st level item will be marked instead.
...
change the left navigation state from pinned to unpinned state, or vice versa.
change the icon button from an expand arrow to a collapse arrow, or vice versa.
When unpinned: | When pinned: |
|---|---|
|
|
 |  |
...
Menu items will expand and collapse with a brief slide effect.
The left navigation panel will open and close with a brief slide effect.
When pinning or unpinning the left navigation, the content on the main area of the page will collapse narrow or expand stretch with a transition effect.
Additional options for Left Navigation
These additional header bar features may only be used in left navigation mode.
...
Instances represent pages for different tasks or items of work.
Update image (remove notifications circle)
...
Note: the instances must always be visible if the header is collapsed. Collapsing is not mandatory when using instances.
...
When the instances exceed the horizontal space, next and back buttons will appear to the right of the instances, allowing the user to scroll.
Clicking the left/right arrow will scroll to show the previous/next instance respectively.
The selected instance will not change.
When reaching the first or last instance, the relevant left or right arrow will be disabled.
If the selected instance is not in view when the user returns to the main workspace, it should automatically be brought back into view.
States
State | Image | Comment |
Regular | ||
Hover | ||
Selected | ||
Selected, Hover | ||
Focused | ||
Focused, Hover | ||
Focused, Selected |
...
Clicking on an instance will change the main workspace view to that instance.
On hover, an X will appear, allowing you the user to close the instance. A confirmation dialog may be shown.
...
Additional information can optionally be shown in the header bar, above the divider line.
Correct Average ‘Average’ in the image
...
Content
Can be either text or icons.
Structure
A one-line row.
It Vertical lines may be divided by vertical lines used to separate the displayed information.
Placement and positioning
...
Additional information should be read-only.
Tooltips may be used to provide more details. Recommended for icons.
Accessibility Compliance
...
The tab index flow will follow this order. Shift + Tab will follow the reverse order.
<Update image visuals>
...
Tab order may vary slightly due to missing or additional components. The main flow is according to navigation level.
Tab order may change due to missing or added components. The main flow is according to navigation level:
App Application selector
Left navigation
Instances (if exist)
Keyboard | Description |
|---|---|
Tab | Navigates to the next component according to the Tab Index Order. From the last component will navigate to the next focusable element on the page. |
Shift + Tab | Navigates to the previous component according to Tab Index Order. From the first component will navigate to the last focusable element on the page. |
Space | Depending on component. |
Enter | Depending on component. For left pane navigation See see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/870187254/Tree#Accessibility-compliance |
Esc | Depending on component. |
Arrows | For left pane navigation See see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/870187254/Tree#Accessibility-compliance For Instances (if exist):
|
Home | Sets focus on the 1st first element in VerinTop. |
End | Sets focus on the last element in VerinTop. |
Responsive Design
When the screen width is reduced and Additional Information no longer fits onto one line, it should be truncated. This may be achieved by hiding inactive icons and/or truncating text, with the full information shown on click or hover.
...
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You | <<Screen with 200 width>> |
Code
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>