Table of Contents | ||||
---|---|---|---|---|
|
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.
...
Type | Usage | Example |
---|---|---|
Non-customisable (static) dashboard | The layout is fixed. The user may not add, remove, or rearrange the widgets. | Image |
Customisable dashboard, auto-layout | The user may add, remove, and rearrange widgets. Widgets automatically resize to fit the dashboard. | Image |
Customisable dashboard, manual layout (or Fluid/ Defined/ Standard/ Fixed/ Controlled/ Regulated layout) | The user may add, remove, and rearrange widgets. Individual widget sizes are set by the user. Widget ordering flows top-left to bottom-right. | Image |
Structure
A dashboard consists of individual Widgets.
A dashboard page may also include:
a header area, which may contain controls which affect all widgets
Customisable dashboards also include a menu allowing the user to add and remove widgets.
...
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
The dashboard may have a maximum number of rows, beyond which more widgets cannot be added, in order to keep all widgets in view without scroll.
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.
...
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 >> | <<Screen with 200 width>> |
...