Description
Layout is the arrangement of visual objects within the interface. The layout should reflect the structure 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 journey between objects, it is recommended that they are arranged from top to bottom, left to right. For example:
a header area identifies the page, and its location within the main product hierarchy.
a list of available parameters for the content are on the left.
the main content is shown in the central workspace.
additional details on selected elements within the main content are shown on the right.
Types
Type | Description | Example |
Used by default for Verint applications. |  | |
Used for Verint applications with larger navigation menus. |  | |
For Verint web pages, such as in Verint Connect. Not to be used for Verint applications. |  |
Structure
See the individual layout pages.
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 similar styling.
Keep controls in the same area as the content they manage.
Be aware of common scanning patterns, such as the F pattern, where users scan across the top and down the side of the content to find what they’re looking for.
Use:
fluid responsive design, to ensure the layout works at all screen sizes, across devices and browsers.
headers for each area within the layout to make sure they are easily identifiable.
consistent spacing between elements.
color sparingly, only for the primary information and calls to action.
the same layout for pages with similar content.
Don’t use:
controls in the header area which don’t affect the entire main workspace.
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, including the left and right panes.
Where space is severely limited, it is acceptable to remove auxiliary functionality, but this should be avoided where possible.
Using a mobile-first approach can make layout design and implementation easier.The layout of content within the main workspace should dynamically respond to the size of the available area. This may change due to the state of collapsible panes as well as screen size.
When the screen width is changed, anchored panes and components should remain fixed to the left- or right-hand side.
The size and spacing of individual components and fixed panes (such as the Filter Pane and Details Pane) 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.
Layout responsive design example
Wide | Standard | Tablet | Mobile |
 |  |  |  |