Skip to end of banner
Go to start of banner

Layouts

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 17 Next »

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 journey 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

Type

Description

Example

Top navigation layout

Used by default for Verint applications, if the menu options fit.

Left navigation layout

Used for Verint applications with larger menus.

Web layout

For Verint web pages, such as in Verint Connect.

Structure

Layouts consist of:

  • VerinTop

  • Ribbon (optional)

  • Header area

  • Main workspace

  • Filter pane or Left panel (optional)

  • Details pane or Right panel (optional)

  • Footer (web layout only)

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 ?

  • Use the same layout patterns for pages with similar content.

  • 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 for Verint applications.

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

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

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

Layout responsive design example

Wide

Standard

Tablet

Mobile

  • No labels