Description
A layout is the arrangement of visual objects within the interface. It should reflect the structure/hierarchy of the content and patterns of usage, helping the user to navigate large amounts of information.
Consistent Verint layouts are as important as graphical styling.
Basic flow
Make sure there’s a natural flow between elements on the page.
Where there is a natural hierarchy between objects, it is recommended that they are arranged from top to bottom, left to right. For example:
the header identifies the page, and its location within the main product hierarchy.
a list of available categories or items within a library are on the left.
the main content is shown in the central workspace.
further details on individual elements within the main content are shown on the right.
Types
Structure
Layouts consist of:
VerinTop
Ribbon
Header area
Main workspace
Left panel (optional)
Right panel (optional)
Footer (optional)
 |  |  |
VerinTop
Description
The VerinTop is a consistent pattern appearing at the top of all Verint layouts. It contains details on the location of the current page within the main product hierarchy.
Structure
See the VerinTop page.
Placement and Positioning
The VerinTop is in a fixed position at the top of the page.
Ribbon
Description
Used where there are a lot of controls which can be used on the main workspace.
Structure
Placement and Positioning
Directly underneath the VerinTop.
Full width
Header area
Description
The header area contains information which relates to the whole page.
Structure
The header area can include multiple components, including:
Page title (mandatory)
Header text, e.g. page description
Page controls which operate on whole workspace, such as Search, Tabs, or an Action Menu.
Where possible, the structure of the header should be consistent across different pages within the same product.
Placement and Positioning
The header is positioned at the top of the main page area, directly underneath the VerinTop.
The height of the header area may vary, depending on which components are included.
The header area should be the full width of the page, with the optional exception of the left or right panels.
Breadcrumbs, header text, and tabs should be aligned to the left-hand side.
Action menus should be aligned to the right-hand side.
Main workspace
Description
The main workspace contains the primary information, so should be granted the most space within the layout.
Structure
The main workspace may consist of:
Where the main workspace has multiple sections, for example with widgets, each section should include:
a section header / label.
any controls or indicators for the individual section.
Placement and Positioning
The main workspace should be central within the layout.
Content
Make sure each section within the main workspace is distinct and identifiable.
Left panel
Description
An optional left-hand panel should be used to offer options to refine what is shown in the main workspace. The options can also give the user an idea of the structure of the available information.
The panel may be a static element on the page, or within a collapsible Filter Pane.
 |  |
Structure
The left panel will usually consist of:
a header describing the panel contents.
a List of options. Any other examples?
additional information or actions relating to the filters.
Placement and Positioning
The left panel should:
appear to the left of the main workspace.
have a fixed width.
The panel height depends on its type:
When the panel is a static element on the page, it should start beneath the header area.
A filter pane always fills the vertical space, from beneath the VerinTop to the bottom of the page.
Right panel
Description
An optional right-hand panel should present information and actions relating to selected items within the main content, or additional content related to the main workspace.
The panel may be a static element on the page, or within a Details Pane.
 |  |
Structure
The right panel consists of:
a header describing the panel contents.
the main panel contents. Any consistency? Can be anything?
Placement and Positioning
The right panel should:
appear to the right of the main workspace.
have a fixed width. But variable between products? The examples are all different.
The panel height depends on its type:
When the panel is a static element on the page, it should start beneath the header area.
The top of a Details Pane should usually align to the top element in the page header, such as the page title or search bar. It should extend to the bottom of the page.
Footer
Description
A footer can optionally be used to offer textual information and links to related items.
Structure
A footer consists of:
a grey background.
text content, such as legal notices and links.
The footer should not contain graphical content.
Placement and Positioning
The footer should:
appear at the bottom of the page, beneath all other content.
be the full width of the page
have a fixed height.
Best practices
Make sure there’s a natural flow between elements on the page, from top to bottom, left to right.
Prioritise the most important elements to facilitate user decisions.
Form associations between related elements by keeping them in close proximity and using graphical similarities.
Horizontal symmetry ?
Make sure each section is distinct and identifiable.
Be aware of common scanning patterns. F patterns are common for lists of information, learnt from popular search engine designs, where users scan across the top and down the side of the page to find the information they’re looking for.
https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/
Use:
responsive design, to ensure the design works at all screen sizes, across devices and browsers.
consistent spacing between elements.
color sparingly, only for the primary information and calls to action.
Don’t use:
controls in the header area which don’t affect the entire main workspace.
a footer in web apps.
graphical content in the footer.
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).
For more information, see the general Responsive Design guidelines.
Where there is not enough space to display the full layout, the main workspace should be prioritised. Other areas within the layout may be collapsed or minimised.
The layout of content within the main workspace should dynamically respond to the size of the available area.
When the screen width is changed, fixed panels and components should remain fixed to the left- or right-hand side.
The size and spacing within individual components should not change as the layout dynamically responds.
Where there is no longer space for a component, see the recommended responsive design for the individual component.
To improve readability, there may optionally be a maximum width for the layout:
Where the screen width is particularly large, white space may be included on either side of the central interface.
The space on both sides should always be even.
The VerinTop and footer should always remain full width ?
Example screens
 | |
 |  |
 | |