Configurable dashboard
Gives control to the user to show/hide, delete, move, change the size of, and add items to a dashboard.
Did this page help you?
Key UX concepts
Control over the location of a dashboard item
Changing the position of a dashboard item allows users to better prioritize their content. This is provided through drag-and-drop, which includes the possibility to swap and push items within the layout. A visual affordance is provided on the dashboard layout to help users place a dashboard item into available space. For more details on drag-and-drop behavior, see the drag-and-drop section.
Control which dashboard item to feature
Adding and removing dashboard items allows users to configure a dashboard to better meet their particular needs. For example, removing a learn more item, and adding an item that shows billing activity.
When a user configures a dashboard item and afterwards decides to remove it, follow the delete with simple confirmation pattern, or else allow the item to be removed without confirmation.
Building blocks
Provides configurability to a static dashboard. Base your content and structure on the static dashboard guidelines and provide the ability for users to configure a dashboard with these additional features.
A. Dashboard layout
Use the board component as a base for the configurable dashboard. it provides the main content area and a two-dimensional grid with rows and columns. It allows users to reorder, add, remove, and resize dashboard items.
B. Dashboard item
Configurable dashboard items give the user the ability to change the size, location and the content of a dashboard item.
Follow the guidelines for dashboard item pattern.
C. Add item button
Users can click on the button to reveal or hide the dashboard item palette. A panel containing all available dashboard items to be included in the dashboard.
D. Add item panel
The add item panel is a discrete split panel that contains a board item palette, which is a list of available dashboard items that users can add to their dashboard, via drag-and-drop.
Filtering - Optional
Users can browse and find dashboard items via text filter or select filter.
When no result matched the query, provide a message and an action to clear the filter. Follow the guidelines for empty states.
E. Palette item
A palette item is a short representation of a dashboard item, providing basic information about what data it represents, for example a title and description for a billing dashboard item. Users can add items to the dashboard via drag-and-drop.
Follow the guidelines for board items.
Drag-and-drop
Drag-and-drop functionality for configurable dashboards that is provided with the board component. Below are the interaction principles:
Drag to resize
Users can adjust the size of dashboard items to show more or less content.
Push
When a board item is placed in an area of the board layout where swap is unavailable, this will push other items out of the way.
Horizontal and Vertical swap
When a board item is the same size as a target board item, or multiple board items are of equal size, these items will then swap positions.
Vertical and horizontal
Dashboard items can be moved vertically and horizontally in the layout.
Add dashboard items
Items can be added to a board through drag-and-drop. Available items are listed in a board item palette, and added to the layout into the desired position through drag-and-drop.
Drop zone size
When an item is dragged over an eligible area on the layout, the drop zone indicates the height and width of the item.
Maintain size and content state
When moving an item into a desired location, make sure to maintain the size, visible content, and configuration of the item.
Drop zone location
The available space that an item can take on the board is indicated by grey squares. When the item is dragged near an available space, the grey squares will turn blue, indicating the space the item will take once dropped.
Drag handle
The drag handle is positioned on the top left of a dragable item. It provides an affordance that indicates an item is dragable.
Resize
When an item can be resized to show or hide its content the resize handle provides the affordance.
Not allowed
When an item can’t be dropped into a location. For example, when it is placed outside a layout or there is not enough room for a swap the item then returns to its original location.
Motion
Motion is provided for two scenarios. When an item move via push or swap, and when an item is dropped and takes position on the layout.
See motion drag-and-drop for more details.
Layout
Column layout is based on the 12 column grid system, and adapts depending on the viewport size, which defined by the system breakpoints, to arrange the content in size columns (large viewports, for example a big monitor), four columns (large viewports, for example a laptop), two columns (middle viewports, for example a ipad), and one column (small viewports, for example a mobile phone).
We recommend designing the dashboard layout for all three types of column layout options.
For example:
On a six column layout, six small board items will be displayed in a row and occupy one column space each.
On a four column layout, four small board items will be displayed in a row and occupy one column space each.
On a two column layout, two medium board items will be displayed in a row and occupy one column space each.
On a one column layout, all board items will stack vertically and occupy one column space.
General guidelines
Do
- When a user removed a dashboard item from the layout, add it back to the board palette, to enables users to bring it again to the layout.
- Pair remove dashboard item within the item dropdown menu and add dashboard items together.
- Follow the static dashboard pattern to create the structure and layout of the dashboard.
- Preserve the configuration that users have made for future visits.
Don't
- Don't show an alert in the layout as feedback when removing a dashboard item from the dashboard.