| Table of Contents |
|---|
Description
It is recommended that 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
Sizes
All Verint applications must 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 screens not currently covered by LUX, contact smaller screen sizes, consult the UX team for guidance.
Touch devices
Where Verint applications should support are supported on touch devices.:
Use use tap-and-hold as an alternative access method for components which usually rely on hover, such as Tooltips.
Allow allow a drag interaction for Scroll.
Increase increase target areas by enlarging buttons and the space between them, e.g. in Toolbars. Minimum target size recommendations?
Lock the orientation (horizontal) on tablets.
Other access methods
For other interaction methods, such as keyboard and screen readers, see Accessibility.
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.
...
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.
...
Text sizing should also be responsive, where relevant.
Transitions
Do we need to say anything about acceptable delays when dynamically changing screen width?
Best practices
Where space is limited, it is acceptable to remove auxiliary functionality, but this should be avoided where possible. ??Creating designs for mobile first and then scaling them up to suit larger screens (a ‘mobile-first’ approach) can make design and implementation easier.
Related links (remove before publication)
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
...