Description

Dashboards are workspaces which allow users to see an overview of complex data on a particular subject. They include multiple standalone interfaces contained within individual Widgets.

Dashboards may be static or customisable by the user.

...

Types

Structure

A dashboard consists of individual Widgets.

A dashboard page may also include:

• a header area, which may contain controls which affect all widgets

• a Filter pane

Customisable dashboards also include a menu allowing the user to add and remove widgets.

Placement and Positioning

Dashboards are placed within the Main Workspace of the page layout.

Internal Logic

Widget layout configurations for customisable dashboards, such as size and location, will persist per user on future sessions.

Default state

By default, customisable dashboards may either:

• include a set of pre-defined widgets. The user may optionally choose between a set of default templates, or

• be empty (not recommended).

Content

...

• Dashboards should have a light grey background, to emphasise the separation between widgets.

• The spacing between each widget will be consistent and static across the dashboard.

Static

...

layout

• The dashboard may be separated into as many rows and columns as appropriate, depending on the space needed by each widget.

• Widgets should fill the dashboard, with no substantial blank space.

Customisable, auto-layout

• Widgets automatically grow and shrink to fill up the entire height and width of the dashboard.

• By default (unless manually adjusted by the user):

  • the available dashboard width should be evenly distributed between widgets on the same row.

  • the available dashboard height should be evenly distributed between all rows.

• The dashboard should have maximum limits for the number of widgets, rows, and columns, beyond which more widgets cannot be added.

Customisable, manual layout

Width

• The widget dashboard should use a consistent grid of 12 columns.

• Widgets can be displayed in the sizes below.

  • XXS : 1/6 width (2 columns) (half height)

  • XS : 1/4 width (3 columns)

  • S : 1/3 width (4 columns)

  • M : 1/2 width (6 columns)

  • L : 2/3 width (8 columns)

  • XL : 3/4 width (9 columns)

  • XXL : full width (12 columns)

• Sizes are optional; a dashboard may offer only a subset of these options.

...

Height

• All rows should be the same fixed height.

• Two XXS half-height widgets may be stacked on top of one another within a single row.

• The height of full-width widgets may respond to the widget content.

Internal logic

Dashboard Customised dashboard layouts, including the size and location of each widget, should persist per user/group on future sessions.

Customisable, auto-layout

• Widgets should always remain on the same row, in the same order, unless moved by the user.

• When a widget is added or removed to an existing row, the available width will be redistributed evenly between all widgets on the same row.

  • Any previous manual width adjustments the user has made will be overridden.

  • Row heights will remain the same.

  • Widgets added to a new row will automatically be full width.

• When a new widget row is added to the dashboard, the available dashboard height will be redistributed evenly between all rows.

  • Any previous manual height adjustments the user has made will be overridden.

  • Widget widths will remain the same.

Customisable, manual layout

Widget sizing will not automatically adjusted; it can only be changed by the user.

Widget ordering

• Widgets will have a defined order, from left to right, top row to bottom row.

  • Stacked half-height widgets will be ordered with the top widget first.

• The widgets should remain in the same order when changes are made to the dashboard, such as adding a new widget or resizing the dashboard.

• Where widgets no longer fit onto the same row, they will wrap onto a new row underneath. This may happen when:

  • the width of a widget in the row is changed.

  • a new widget is added to an existing row.

  • the size of the dashboard is changed.

Widget

Initial widget order

When

After a new widget is added

Image Removed

Image Added

Image Removed

Image Added

Interaction

• Each widget may include an a maximize option to show the content in a larger space such as a Popup or separate page.

• Scroll:

  • Static layout and Customisable auto-layout dashboards may should not have a master vertical scroll at full resolution, where possible.

  • Customisable manual layout dashboards may have a vertical scroll where there are more rows than can be shown.

  • Dashboards should never have a horizontal scroll.

Creating customisable dashboards

• A set of default dashboards, populated with useful widgets, may be offered for easy set up.

• New widgets may be added using one or both of these methods:

  • From a Popup menu. The widget may optionally be added first or last on the dashboard.

    Image Removed

  • Using Drag and Drop from a list of available widgets, in which case the widget will be added to the chosen position on the dashboard.

    Image Removed

Drag and drop reordering (customisable dashboards only)

Widgets may

...

be reordered using Drag and Drop

...

.

• a

  A visual identifier of the widget which is being dragged should be shown next to the cursor.

• a

  A placement indicator should show where the widget will be added, based on the hover position.

• the

  The placement indicator should also show where new widgets cannot be added, for example if the row already has the maximum number of widgets in auto-layout.

• if

  If a dragged widget is not successfully placed, it should return to its original location.

...

Drag & drop indicator

...

Drag & drop forbidden

...

Widget sizing

Customisable, auto-layout

...

• The edges in- between widgets may be dragged in order to resize them, either both height or width (optional).

  • When one widget is resized, the others will shrink or expand relatively, to ensure there is no empty space on the dashboard.

  • An option to reset all manual resizing across the dashboard may also be offered.

Customisable, manual layout

Widget sizing is fixed and controlled by the user.

• The size of each individual widget can be set both before and after it is added to the dashboard.

• Each widget will have a default size, depending on its content.

• Particular sizes may be prohibited for individual widgets. For example, it may not be appropriate to create an XS widget containing a large chart or table.

Expand/collapse

Expand/collapse may only be used for widgets in Static Layout dashboards, where the reactive behaviour of the remaining widgets can be pre-defined.

• An option to return all widgets to the default expand/collapse state should be available.

Transitions

• A transition effect should be used when:

  • adding or removing widgets from the dashboard.

  • moving widgets using drag and drop.

Best practices

General:

• Allow users to save customisable dashboard layouts, so they can quickly access them again.

Use:

• where a workspace has multiple unique interfaces contained within Widgets.

• customisable dashboards for flexible workspaces which can be entirely managed by the user.

...

• anything other than Widgets within dashboards.

• scroll within widgets, where possible. Instead:

  • make sure the sizing is appropriate for widgets which contain a lot of data.

  • limit the content shown, and include an option to show the full content in a larger space such as a Popup or separate page.

• both a whole page scroll and scroll within widgets on the same dashboard.

• for static standard page layouts where the sections are not standalone interfaces→ use Workspace Sections instead.

• expand/collapse for dashboard widgets in customisable dashboards.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Think about alternative to drag and drop for reordering. Directional controls?

Responsive design

Verint products should dynamically respond to the user’s screen size, platform, and orientation, supporting support all devices down to the common tablet size (960px width).

For more information, including recommended breakpoints, see the general /wiki/spaces/UserExp/pages/1893074841.

...

For general guidelines, see Fundamentals - Responsive design.

• As the width of a dashboard changes, so will the widths of the individual widgets. Each one should continue to take up the same proportion of the available width.

• The widget heights will not respond relative to widget width as the dashboard is narrowed.

• Vertical scroll for auto layout All dashboards may have a master vertical scroll below a minimum height? width.

• Dashboards should have additional breakpoints, which may result in additional rows and vertical scroll. For example:

  • a minimum-width breakpoint, below which all widgets will be shown at full width, regardless of their original size. A vertical scroll will be included.

  • additional breakpoints where either:

    • (Auto-layout) the maximum number of widgets permitted on each row is decreased, or

    • (Manual layout) the proportion of the dashboard width that each widget size uses is automatically increased. For example, S widgets may each increase to 1/2 width, 6 columns.

• The spacing between widgets may also be reduced at each breakpoint.

• The original widget sizes should always be retained, so the original layout can be restored if the dashboard width is increased above a breakpoint again.

Design

Zeplin link	Screen thumbnail
<<Short Zeplin link. You Use this Image Removed >> <<Screen with 200 width>>https://zpl.io/B1e8WxA	Image Added

Code

...