...

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.

...

Dashboards are placed within the Main Workspace of the page layout. They may fill the entire workspace or a part of the workspace.

Default state

By default, customisable dashboards may either be:

...

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

• be empty (not recommended).

Content

General layout

• 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.

...

• 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 dashboard, 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 dashboard, 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.

...

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

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

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

  • 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.

Customisable dashboard, manual layout

...

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

• Scroll:

  • Non-customisable and Auto-layout customisable dashboards may not have a master vertical scroll at full resolution.

  • Manual customisable dashboards may have a vertical scroll, where there is no limit to the number of rows which can be added and individual widgets do not have any internal scroll.

  • Dashboards should never have a horizontal scroll.

...

• 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.

    

  • 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.

    

• Widgets may also be reordered using direction controls and/or Drag and Drop.

  • Where drag and drop is used:

    • a label or visual identifier of the widget which is being dragged should be shown next to the cursor.

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

    • the placement indicator should also show where new widgets cannot be added, for example if the row already has the maximum number of widgets.

    • the user should be able to replace a widget back in its original position.

...

• 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 page layouts where the sections are not standalone interfaces → use Workspace Sections instead.

• expand/collapse for dashboard widgets.

Accessibility compliance

...

• 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.

• 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.

...

Zeplin link	Screen thumbnail
<<Short Zeplin link. You Use this >>	<<Screen with 200 width>>

...