Patterns
Dashboard
Present data visualization from the variation of information
A dashboard is a tool that consists of screens that provide data visualization for specific information. Information comes in any form of data displaying actionable and relevant insights. Therefore, a dashboard should be easy-to-scan and contain the key information that users need.
- Information design & user experience
- Data Visualization
- Hierarchy & Layout
- Table & Data Filter
- Form for Submit Data
Information design & user experience
When designing a dashboard, we need to prioritize the following information of design goals in conjunction with the use of a grid. A challenge in creating and developing dashboards is that they too often obscure or otherwise fail to deliver the information they are intended to impart because they are poorly or at least not thoughtfully designed.
Information design goals
User experience goals
Hierarchy Layout
Users usually read from the top left corner, so we should put the important information from left to right. Create a continuous flow that is easy to scan across the dashboard by placing related information in a grouping that makes sense. On the other hand, don’t overwhelm users with too much information. We suggested using max 5-8 different card chart or information to create the dashboard. Personalization and customization will help users to see what information matters to them.
Do
Use consistent structure, making it easier for users to work with the data and heavy information can be grouped and divided by tabs.
Don't
Display too much information on a card can create confusion for users and present too much data in the above-the-fold area of the dashboard.
Do
Structure the information or layout design based on 12 column grids for desktop.
Don't
Not using the grid makes the dashboard design not have a balanced layout.
Table and Data Filter
This pattern provides suggestions for the most used table in a dashboard. The table shows information and data in rows and columns from the database, such as product or customer lists. Because a table usually shows a lot of data and value, a filter will help users to go through the data and analyze it more easily.
User Story: As a website user, I want to find and analyze data that shows from a table in a dashboard.
Requirement Scenario/Acceptance Criteria
Column alignment recommendation: right-aligned numeric columns, left-aligned text columns, and align the column of names and content.
Provide a call to action attribute for the table (filter, download, etc.).
Row-level actions, such as edit, delete, etc., can be presented directly at the row, but if more than three actions are needed, they can be provided through the kebab menu or hover.
On heavy data, use pagination to reduce the user’s cognitive load (max. 20 rows per page).
Do
Use filters outside the table, and those filters can apply multiple filters.
Don't
Use filters and sorting for data that don't need to be analyzed, such as history.
Do
The column is best presented in 5-7 columns and select the data priority and input it in the filter if you need to serve a lot of data.
Don't
Present too many columns make high cognitive load for user to scan or find the data inside the table.
Form for Submit Data
This pattern will provide information on how to create a usable form for submitting data that consists of input fields, suggested layout, grouping related fields, and dividing the information in a way that is easy to follow for users to go through a lot of information.
User Story: As a website user, I want to find a simple way to submit data to go through the form easily and quickly.
Requirement Scenario/Acceptance Criteria
Related fields can be grouped by proximity, similarity, continuity, and connectedness.
Avoid using multiple columns. Use a single column throughout the form.
Left-aligned labels have a twice faster completion time.
Provide input fields such as text, password, checkboxes, buttons, and other fields for user input.
If it requires many fields more than 5 grouping fields, break columns into simple steps (Wizard form).
Reduce the option to navigate outside the wizard form, and avoid putting links or other navigation that will disrupt the process and create confusion.
Do
Grouped forms by categories & combining fields can make users focussed and using wizard form to handle many form submissions.
Don't
Displaying a list of fields in the vertical form with long scrolling can make users confused.
Do
Keep the wizard steps less than 7 steps and display the steps and communicate the progress visually to motivate users.
Don't
Use multi-column for heavy data and use too many steps as it will not help users but annoys them instead.