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.
Structure
Layouts consist of:
VerinTop
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.
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.
Responsive Design
When the screen width is changed, each component in the header area should remain fixed to the left- or right-hand side. The space between them may increase or decrease.
The size and spacing within each individual component should not change.
Where there is no longer space for a component, see the recommended responsive design for the individual component.
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 is divided into areas, for example with widgets, each area should include:
A section header / label
Controls for the individual area
Placement and Positioning
The main workspace should be central within the layout.
Responsive Design
Where there is not enough space to display the full layout, the main workspace should be prioritised. Other areas within the layout may be hidden or minimised.
The layout of content within the main workspace should dynamically respond to the size of the available area.
Left panel
Description
Static on page or Filter panel
Lists of objects
Structure
Placement and Positioning
Filter pane - top. On page - beneath header.
Responsive Design
Right panel
Description
details. Fixed 320px? Or variable width?
Static on page or using collapsible Details panel
Structure
Placement and Positioning
Details pane - top. On page - beneath header.
Responsive Design
Footer
Description
Structure
Placement and Positioning
Responsive Design
Best practices
Use:
Make sure there’s a natural flow between elements/journey through the page. Hierarchy (top-bottom, l-r).
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 the layout works at all screen sizes, cross-device, cross-browser.
Make sure each section is distinct and identifiable.
Don’t have too many tiles?
Consistent spacing between elements
Focal points – use colour sparingly for primary CTAs
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/
Don’t use:
Responsive design
The size and spacing within each individual component should not change.
Where there is no longer space for a component, see the recommended responsive design for the individual component.
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.
Example screens
 |  |
 |  |
 |  |