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 4 Next »

Description

he layout is the structure that supports the visual components of an interface. It works opening the paths where the sight can shift to group, rank and make sense of the information. It also helps the content to highlight what is the most important data on the site. Navigation/

  • Arrangement of visual objects on the page.

  • Structure - Hierarchy - Navigation

  • Highlight what’s most important.

  • Help to make large amounts of content accessible.

  • Identify a Verint product as much as styling.

Basic flow

L-R

Story. Natural workflow.

  • Make sure there’s a natural flow between elements/journey through the page

Structure

Layouts consist of:

  • VerinTop

  • Header area

  • Main workspace

  • Left panel (optional)

  • Right panel (optional)

  • Footer (optional)

VerinTop

Description

Structure

Placement and Positioning

Responsive Design

Header area

Description

Structure

The header area can include multiple components, including:

  • Page title (mandatory)

  • Page description

  • Breadcrumbs

  • Page controls which operate on whole workspace, such as Search, Tabs, or an Action Menu.

Variable heights

Full width, minus any filter/details panels

Placement and Positioning

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.

    • Breadcrumbs, header text, and tabs should be aligned to the left-hand side.

    • Button menus should be aligned to the right-hand side.

  • The height of the components, and spaces between them, should not change.

  • Where there is no longer space for a component, see the recommended responsive design for the individual component.

Main workspace

Description

Structure

  • Fluid layout

  • Main content

  • Section headers / labels

  • Controls close to elements

  • Widgets

  • Tables

Placement and Positioning

Responsive Design

Left panel

Description

Static on page or Filter panel

  • Lists of objects

Structure

Placement and Positioning

Responsive Design

Right panel

Description

details. Fixed 320px? Or variable width?

Static on page or using collapsible Details panel

Structure

Placement and Positioning

Responsive Design

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:

Example screens

  • No labels