| Table of Contents | ||||
|---|---|---|---|---|
|
...
Dashboards are workspaces which allow users to see an overview on a particular subject, and include multiple standalone interfaces contained within individual Widgets.
Dashboards may be static or customisable by the user.
...
Types
Type | Usage | Example | |
|---|---|---|---|
Static Non-customisable (static) dashboard | The layout is fixed. The user may not add, remove, or rearrange the widgets. | Customisable dashboard | Allows the user to choose what is shown and how it is displayed by managing individual widgets.Image |
Auto-layout customisable dashboard | The user may add, remove, and rearrange widgets. Widgets automatically resize to fit the dashboard. | Image | |
Manual/ Fixed/ Fluid/ Defined/ Standard layout customisable dashboard | 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 :
...
the dashboard container
individual Widgets
...
Should we include information on .
A dashboard page may also include:
a header area
...
A customisable dashboard also includes:
a menu for adding new widgets, which may contain controls which affect all widgets
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. They may fill the entire workspace or a part of the workspace.
Default state
By default, a customisable dashboard dashboards may either be:
empty, or
include a set of pre-defined widgets. The user may optionally choose between a set of default templates.
Content
General layout
The dashboard 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 dashboard
...
The dashboard may be separated into as many rows and columns as appropriate, depending on the space needed by each widget.
Are there any other distinct rules for static dashboards?
...
.
Auto-layout customisable dashboard
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.
Manual layout customisable dashboard
The dashboard may have a maximum number of rows, beyond which more widgets cannot be added.
Width
The widget dashboard should use a consistent grid of 12 columns.
Widgets can be displayed in the sizes below. (Not all sizes must be offered for every dashboard).
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.
...
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, or (optionally) be adjusted by the user.
or
All widgets
Internal logic
Dashboard layouts, including the size and location of each widget, should persist per user/group on future sessions.
Auto-layout customisable dashboard
Widgets should always remain on the same row should be , in the same height.
The height of each row may be adjusted by:
using drag-and-drop (Optional), or
automatically responding to the widget content. All widgets will adjust to the same height as the tallest widget. (Optional).
Columns
Additional columns (up to 2?) may be added to the dashboard for full-height widgets only.
Order or columns may be changed by the user. (← → controls?)
These columns have an independent vertical scroll, i.e. do not scroll with the main dashboard.
Examples
https://documentation.sisense.com/docs/customizing-the-dashboard-layout
...
Internal logic
Is there any logic for static dashboards?
Customisable dashboard logic
...
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.
Manual layout customisable dashboard
Widget sizing will not automatically adjust; 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.
...
Each widget may include an option to show the content in a larger space such as a Popup or separate page.The entire dashboard area may
Scroll:
Non-customisable and Auto-layout customisable dashboards may not have a master vertical scroll
Where possible, static dashboards should not have a vertical scroll.
Customisable dashboard interactions
Creating the dashboard
New widgets will be added:
from a menu, in which case it can optionally be added as the first or last widget, and
(optionally) using Drag and Dropat 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.
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.
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.
A set of default dashboards, populated with useful widgets, may be offered for easy set up.
The user will be able to change the order of the widgets using controls and/or drag-and-drop.
...
Create dummy visual
...
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.
Drag & drop indicator | Drag & drop forbidden |
|---|---|
 |  |
Widget sizing
Auto-layout customisable dashboard
The user may drag the edges in-between widgets in order to resize them, either 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.
Widget sizing is automatic when widgets are added or removed. All previous manual resizing will be overridden.
Manual layout customisable dashboard
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 widget types. For example, it may not be appropriate to create an XS widget containing a large chart or table.
Transitions
Customisable dashboard transitions
Widgets may automatically change size to fill empty space on the dashboard, or accommodate newly added widgets. (Optional).
Transitions
A transition effect should be used when:
adding or removing widgets from the dashboard.
moving widgets using drag and drop.
Should there be a transition effect on the whole dashboard when a new widget is added?
Best practices
Use:
where a workspace has multiple unique interfaces contained within Widgets.
customisable dashboards for flexible workspaces which can be entirely managed by the user.
Don’t use:
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.
anything other than Widgets within dashboardsboth 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 customisable dashboard widgets.
Accessibility compliance
...
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You >> | <<Screen with 200 width>> |
...