Rippledata handling
Analyze Data
These tasks involve presenting related information side by side, allowing users to reference and analyze key details. They rely on patterns that present data within a single display, enabling users to make relevant connections, trends, or insights without the need to switch between multiple screens or views. This approach supports decision-making by reducing cognitive load.
Best Practices
-
Focus on key details and limit unnecessary information
Additional information can be revealed by using drill down or expansion patterns like Flyouts or Toggletips.
-
Provide users with filters to focus on the most relevant data
This helps bring focus to information relevant to the task at hand.
-
Place related metrics close to each other for easier comparison
Use consistent labels and layouts so users can quickly compare the data.
-
Use summary sections to help the user understand key insights
Pair summary views with detail views to help the user understand the full picture.
-
Do not use patterns that navigate to new pages to reveal more data, unless to trigger a new task
Keep the user in context of the analysis task by remaining on the same page.
-
Avoid placing unrelated information together on the same page
This can create confusion and distract the user from their primary task.
Patterns to Use
Cards
Multiple cards can display essential information, such as Charts and Tables, in one view. They can be used to create dashboards that give users a high-level overview of essential information and tasks relevant to their roles. By presenting data in a single view, these dashboards offer a comprehensive understanding with key insights in context.
- Group related information together
-
Contain concise information, key insights, and data summaries
Consider pairing with other patterns, such as Flyouts or expandable sections, to allow users to reveal more detailed information.
-
Avoid using too many cards on the same view
This can be overwhelming to the user. Prioritize the most important information to display and use other patterns to reveal more details when needed.
Example
Use Case
A lead conservation biologist must determine priorities to effectively guide their research efforts in supporting the conservation of endangered amphibians.
Description
This dashboard is designed with cards that break down amphibian species by habitat and region, helping conservation biologists identify priority areas to support the greatest number of species. It also features a visualization of the top 3 at-risk species for focused conservation efforts. Additionally, as the user manages data collection, they can monitor the latest status of field survey completion.
Side Panels
Side panels can be used for tasks that require specific information to remain visible in one view. They offer separate scrolling, enabling users to reference information and interact with data separately from the main content. This allows users to maintain context without needing to switch screens or lose their place in the data.
-
Can contain filters, hierarchy navigation, or details relevant to the rest of the content
Use side panels as containers to keep relevant information and interactions within the same view as the user’s task.
-
Avoid including primary actions in side panels
Keep primary actions in the main content area. Interactions in the side panel should be supplemental or secondary to the main task.
Example
Use Case
The lead conservation biologist must ensure that detailed species information is kept current with the most recent field survey efforts.
Description
This example displays species details with a collapsible side panel that shows the field survey reports used to populate the species data. This setup helps the user decide whether the data should be updated with the latest survey reports or if a request for additional field surveys is needed to refresh the information.
Tables
Tables efficiently present large amounts of information and help users to quickly identify key insights. They are ideal for side-by-side comparisons of structured data and can include interactive features such as sorting and filtering to support users in their analysis.
-
Use tables for data sets that share the same type of information
Display similar types of information that follow the same structure and use consistent columns.
-
Allow sorting and filtering options for users to control the information displayed
This helps users stay focused on their goals by presenting only the relevant information needed to complete their tasks.
-
Avoid including too much information without filtering or pagination
Too much information can overwhelm users if they cannot reduce the data to meet their needs. Consider using other patterns to reveal more information when needed.
-
Avoid using if there is little data to display
Consider using Cards to present simple lists or a small number of items instead.
Example
Use Case
The lead conservation biologist needs to identify the most at-risk species in specific regions to effectively plan next year’s field surveys.
Description
This example showcases amphibian species in a table, allowing for comparison of details such as region and conservation status. The filter section above helps the user refine the data to uncover insights. The table is sortable and uses pagination, with each row offering additional actions to reveal more information.
