Description
Customizable dashboards are flexible workspaces that allow the user to choose what is shown by managing individual Widgets.
Placement and Positioning
The widget dashboard is placed within the Main Workspace of the page layout. It may fill the entire workspace or a part of the workspace.
Layout
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.
Height
All rows should be the same fixed height.
Two 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.
Spacing
The spacing between each widget will be consistent and static across the dashboard.
Scroll
The entire dashboard area may have a master vertical scroll, if there are more widget rows than can be shown. The dashboard will not have a horizontal scroll.
Building
New widgets may be added either:
from a menu, in which case it can optionally be added as the first or last widget, or
using Drag and Drop, in which case the widget will be added to the chosen position on the dashboard.
A set of default dashboards, populated with useful widgets, may be offered for easy set up.
Widget sizes
The user should be able to set the size for each individual widget 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.
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. 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.
The user will be able to change the order of the widgets using controls and/or drag-and-drop.
Internal logic
Dashboard layouts, including the size and location of each widget, will persist per user on future sessions.
Best practices
Use:
for flexible workspaces which can be entirely managed by the user.
Don’t use:
scroll within widgets, where possible. Instead:
limit the size choices 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.
expand/collapse for dashboard widgets.
anything other than Widgets within the dashboard.
a dashboard for static layouts → use Workspace Sections instead.
Responsive design
As the width of the 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.
The dashboard should have additional breakpoints, for example:
a minimum-width breakpoint, below which all widgets will be shown at full width, regardless of their selected size.
additional breakpoints where the proportion of the dashboard width that each widget size uses should automatically increase. For example, S widgets may each increase to 1/2 width (6 columns) at a certain point.
The originally-selected sizes for widgets should always be retained, so the original layout can be restored if the dashboard width is increased above a breakpoint again.
The spacing between widgets may also be reduced at each breakpoint.