Skip to end of banner
Go to start of banner

Responsive guidelines

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

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

^ Replace graphic with a Verint app. Should mobile be included?

Supported devices

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

Where applications need to support smaller mobile devices, contact the UX team.

Approaches

  • Responsive design is fluid, adapting to the screen size during use.

  • Adaptive design selects a suitable layout on initial load, but does not respond if the window size later changes.

Verint recommends using a responsive design approach, as it is more dynamic and offers the most consistent user experience.

Adaptive design may be used for mobile screens below 960 px, where necessary.

Layout

Breakpoints should be used to control LUX layouts. Material UI uses these common breakpoints:

  • extra-small: 0-600 px

  • small: 601 - 960 px

  • medium: 961 - 1280 px

  • large: 1281 - 1920 px

  • extra-large: 1921 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.

Patterns & Components

Each relevant LUX pattern or component has its own responsive guidelines. For guidance on how the entire screen design should dynamically respond, see Layouts.

Best practices

Supported devices

Sizes

  • LUX fully supports screens down to 960 px width, a common tablet size.

  • Designs for smaller screens, including mobile devices, are not currently defined in LUX. However, responsive design down to this size is still encouraged.

  • Adaptive design may also be used for mobile where necessary, with separate versions for screens below 960px.

For designs for screens not currently covered by LUX, contact the UX team for guidance.

Touch devices

  • Must provide a way to operate which doesn’t necessitate hover, e.g. for Tooltips.

  • Increase target areas (space between elements as well as size).

  • Locking orientation (horizontal) on tablets.

  • A drag interaction should be available for scroll on touch devices.

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

Specific design recommendations

  • Containers should respond to any element which can influence its available space, including collapsible panels as well as screen size.

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

  • Where possible, use vector graphics such as SVGs and font icons, as they are more responsive.

Best practices

  • Where space is limited, it is acceptable to remove auxiliary functionality, but this should be avoided where possible. https://www.nngroup.com/videos/ui-design-fails/

  • Transitions…

  • Using a mobile-first approach can make design and implementation easier, by creating designs at 600 px and then scaling them up to suit larger screens, rather than vice-versa.

  • Text sizing should also adjust as part of an interface’s responsive behavior. Also refer to our Accessibility guidelines.

  • Minimum target size recommendations…

Implementation approaches

  • Flexbox!

  • CSS grid??

  • Use React as a javascript framework (not ExtJS), because it is more responsive-compatible.

  • The Material UI API defines specific breakpoints for interfaces, for example: Do we need to say more?

    • extra-small: 0-600 px

    • small: 601 - 960 px

    • medium: 961 - 1280 px

    • large: 1281 - 1920 px

    • extra-large: 1921 px and larger

  • CSS Media Queries are usually used to define styles at different dimensions. Media queries also inspect the physical characteristics of the user’s device, making it a superior approach than simply defining breakpoints in HTML/CSS.

  • Fluid Grids are created using CSS. The panes are automatically rearranged to fit the screen, enabling a consistent look and feel across devices, as elements occupy the same percentage of space however large or small the screen becomes.

Examples

See the /wiki/spaces/UserExp/pages/1949337002 for examples of responsive behavior designs for Verint products.

Smashing Magazine: Responsive Web Design - What It Is And How To Use It

A list Apart: Responsive Web Design

Invisionapp: 11 powerful examples of responsive web design

Original document - /wiki/spaces/UserExp/pages/1746275338

  • No labels