Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

Description

It is recommended that Verint applications dynamically respond to the user’s screen size, type, and orientation, ensuring the interface is always clear and accessible.

Wide - 1920 px

Standard - 1366 px

Tablet - 900 px

Mobile - 375 px

Image Modified
Image Removed
Image Added
Image Removed
Image Added
Image Removed
Image Added

Supported devices

Sizes

Verint applications should be usable on devices from a large desktop size (1920 px width) down to the common tablet size (960 px width).

Designs for smaller screens, including mobile devices, are not currently defined in LUX. However, responsive design down to this size is still encouraged. Where applications need to support smaller screen sizes, consult the UX team for guidance.

Touch devices

Where Verint applications are supported on touch devices:

  • use tap-and-hold as an alternative access method for components which usually rely on hover, such as Tooltips.

  • allow a drag interaction for Scroll.

  • increase target areas by enlarging buttons and the space between them, e.g. in Toolbars.

Other access methods

For other interaction methods, such as keyboard and screen readers, see Accessibility.

Layout

Breakpoints should be used to control LUX layouts.

Material UI uses these common breakpoints:

  • extra-small: 0-600 px0  px

  • small: 601 - 960 px600 px

  • medium: 961 - 1280 px900 px

  • large: 1281 - 1920 px1200 px

  • extra-large: 1921 px 1526 px and larger

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.

...

For further guidance and examples of Verint applications at different screen sizes, see Layouts.

Patterns & Components

Each relevant LUX pattern or component has its own responsive guidelines.

For fixed-width elements, such as the Filter Pane and Details PanelPane, the size is not responsive but features such as pinning and expansion may behave differently at different widths.

...

Text sizing should also be responsive, where relevant.

Best practices

  • Where space is limited, it is acceptable to remove auxiliary functionality.