Skip to content

Commit

Permalink
Merge pull request #37 from strudel-science/update/taskflow-content
Browse files Browse the repository at this point in the history 
Merge from Update/taskflow content
  • Loading branch information
@Rjdesh
Rjdesh authored Jan 11, 2024
2 parents bae038f + 984a47b commit 91c93a7
Show file tree
Hide file tree
Showing 15 changed files with 291 additions and 40 deletions.
36 changes: 31 additions & 5 deletions content/design-system/task-flows/compare-data.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ id: 'task-flows-compare-data'
title: 'Compare Data'
tagline: 'Comparing Scenarios/ Analyses / Simulations'
tags: ['comparison', 'differences', 'analysis']
intent: 'It enables users to scan and compare multiple complex entities with similar information categories and helps them make decisions based on the differences.'
intent: 'Enables users to scan and compare multiple complex entities with similar information categories to support decision making based on the differences.'
intentDetails: 'Comparison may be between just two entities requiring a dedicated focus on differences in values, shown visually or numerically. Comparison may also be between multiple attributes — requiring a soft highlight on all differences and other visual representations.'
exampleUrl: 'https://strudel.science/strudel-kit/#/compare-scenarios'
codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/compare-scenarios'
figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A65420&mode=design&t=w7GGrEXSOV1T8UCr-1'
Expand All @@ -27,11 +28,36 @@ import { InfoTable } from '/src/components/InfoTable';
</Grid>
</Grid>

Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
### Guidelines

### Dos and Don'ts

Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
<ul>
<li>
Consider whether the users would want to compare 2 sets of attributes or more than 2 sets.
<ul>
<li>
When comparing 2 sets of attributes, you can represent the differences between the sets as a subtraction between values or showing side by side values. These deltas can also be represented as a plot.
</li>
<li>
When comparing more than 2 sets of attributes, you can consider displaying values of each set as columns in a table. Also consider visualizations to aid in comparison.
</li>
</ul>
</li>
<li>
Data visualizations like graphs and charts can help to highlight the differences and similarities between sets being compared.
</li>
<li>
Prioritize the attributes which are critical for comparison instead of exposing all of the attributes in a single view.
</li>
<li>
If there are too many attributes to compare, allow users to prioritize comparisons by providing ways to search & filter the attributes. This makes it easier for them to focus on their interests instead of getting overwhelmed by a large comparison matrix.
</li>
<li>
Consider offering an expanded view of a selected set or attribute to view additional related details, data tables, or diagrams. The expanded view could be displayed in a pop-up or a vertical or horizontal slide out panel.
</li>
<li>
Consider providing the ability to save or export comparison results.
</li>
</ul>

{/*
## Variations & Examples
Expand Down
38 changes: 34 additions & 4 deletions content/design-system/task-flows/contribute-data.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: 'Contribute Data'
tagline: 'Consectetur magna ad non enim mollit ea Lorem ullamco.'
tags: ['upload', 'dataset', 'register', 'repository']
intent: 'Enables users to upload their work and data to a community managed repository.'
intentDetails: 'This type of Task Flow promotes community sharing of research data / knowledge and is essential for growth & promotion of open science.'
exampleUrl: 'https://strudel.science/strudel-kit/#/contributing-data'
codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/contributing-data'
figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A62422&mode=design&t=YPdwq8c0BdXx5Um8-1'
Expand All @@ -30,11 +31,40 @@ import { InfoTable } from '/src/components/InfoTable';
</Grid>
</Grid>

Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
### Guidelines

### Dos and Don'ts

Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
<ul>
<li>
Determine the primary information required to identify a contributed dataset, and use this to display the contribution table to the user
</li>
<li>
Define the process of data contribution and the stages involved in the verification and acceptance of submitted data.
</li>
<li>
Group the data required from users into relevant categories and split the process into a small number of steps to keep the flow simple.
</li>
<li>
Give a progress indicator showing users where they are at in the overall flow.
</li>
<li>
The first step of collecting meta data and uploading files could get complex. Users may need to work on the this step over multiple sessions and would need a ‘Save as draft’ option.
</li>
<li>
Uploading files could take long time and running in the background should be supported.
</li>
<li>
Provide a review step to confirm user submission details.
</li>
<li>
Provide a status indicator to show users where they are in the contribution lifecycle (i.e. draft, in review, etc) and whether their dataset is currently public or private.
</li>
<li>
A dataset submitted to a community repository will need to be verified for quality control and it will likely take some time before it is published. Associate statuses with every submission to show users what stage the submitted dataset is at in the process.
</li>
<li>
Consider offering an automated validation step to check file formats, sizes, and any other basic data checks which can save time during further manual verification work.
</li>
</ul>

{/*
## Variations & Examples
Expand Down
53 changes: 48 additions & 5 deletions content/design-system/task-flows/explore-data.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ id: 'task-flows-explore-data'
title: 'Explore Data'
tagline: 'Esse exercitation cupidatat commodo eiusmod aliquip id ad.'
tags: ['data table', 'data grid', 'summary', 'filter', 'facets', 'search']
intent: 'Lorem fugiat culpa labore proident incididunt. Aliqua velit officia consectetur reprehenderit dolore dolore dolor labore laborum velit duis ullamco exercitation non.'
intent: 'Enables users to view and work with data in a tabular layout with search, sort, filter, and summary view interactions.'
intentDetails: 'It is the most commonly used task flow to showcase any entity and make it easily consumable and accessible.'
exampleUrl: 'https://strudel.science/strudel-kit/#/exploring-entities'
codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/exploring-entities'
figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A52634&mode=design&t=YPdwq8c0BdXx5Um8-1'
Expand All @@ -30,11 +31,53 @@ import { InfoTable } from '/src/components/InfoTable';
</Grid>
</Grid>

Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
### Guidelines

### Dos and Don'ts

Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
<ul>
<li>
<b>Data table:</b>
<ul>
<li>
Search and filter capabilities are very important to make information findable and accessible.
</li>
<li>
Data tables can have pagination or lazy load with scrolling option. Pagination is usually better interaction for data as users can refer to the page numbers to jump further to find a particular piece of information if they don’t want to use search and filter options.
</li>
<li>
Consider giving options for number of rows that can be viewed in single page.
</li>
<li>
Clicking on row can trigger opening summary view in side panel for the selected entity.
</li>
<li>
Consider not displaying all data values in the data table to optimize signal to noise. Focus on showing only important fields, with ancillary fields as optional hidden fields or available through detail views.
</li>
<li>
Pay attention to the principles of recognition over recall. Display as many fields in the data table as are necessary to accomplish a task or goal without needing further reference.
</li>
<li>
For a more detailed view, link the entity name or identifier to navigate to the detailed view page. It may also be triggered via a primary button on a summary view panel.
</li>
<li>
Data table can be accompanied with a graph or summary statistics to give overview about important data points. Consider brushing and linking between the graphs / plots and the data table.
</li>
<li>
Individual rows may require actions. A single button may be displayed as a column at the end of the row. If there are multiple actions available, consider icons or a dropdown actions menu on each row.
</li>
</ul>
</li>
<li>
<b>Data detail view:</b>
<ul>
<li>
Give proper title and breadcrumb navigation on top header to go back to main data table.
</li>
<li>
Consider giving in-page navigation section if it contains too many sections with lot of data.
</li>
</ul>
</li>
</ul>

{/*
## Variations & Examples
Expand Down
32 changes: 28 additions & 4 deletions content/design-system/task-flows/manage-account.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: 'Manage Account'
tagline: 'Mollit laboris nulla consectetur sint sunt.'
tags: ['profile', 'settings']
intent: 'Enables users to manage their individual or team account information and settings.'
intentDetails: ''
exampleUrl: ''
codeUrl: ''
figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=19%3A73769&mode=design&t=YPdwq8c0BdXx5Um8-1'
Expand All @@ -24,11 +25,34 @@ import { InfoTable } from '/src/components/InfoTable';
</Grid>
</Grid>

Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
### Guidelines

### Dos and Don'ts

Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
<ul>
<li>
Determine type of account to be managed - user account/ team or project account
</li>
<li>
Determine primary account information needed to be accessible for viewing and editing to the users
</li>
<li>
If there is a long list of information & settings, organize them into smaller relevant category groups
</li>
<li>
If there are only a few settings, navigation can be on a single scrollable page
</li>
<li>
Tabs can be used when there are 2-5 categories of information & settings
</li>
<li>
If there many settings and categories (>5), consider a left panel for navigating through them
</li>
<li>
In case of many settings, give a search option to search for settings
</li>
<li>
Editing sensitive information & critical settings should give a confirmation prompt before saving the changes
</li>
</ul>

{/*
## Variations & Examples
Expand Down
41 changes: 36 additions & 5 deletions content/design-system/task-flows/monitor-activities.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ id: 'task-flows-monitor-activities'
title: 'Monitor Activities'
tagline: 'Ullamco et dolor enim mollit aliqua.'
tags: ['jobs', 'experiments', 'observations']
intent: 'Minim tempor velit exercitation pariatur duis labore qui. Occaecat reprehenderit commodo eu non eu. Est mollit adipisicing exercitation non fugiat labore sint ex nisi in non dolore in.'
intent: 'Enables users to monitor running tasks, jobs, experiments, and observational studies and make decisions based on the status of those activities.'
intentDetails: 'Monitoring can be both real-time and asynchronous. Live monitoring of experiments helps teams determine if something has gone wrong and the experiment needs to be stopped (such as in cases where there are problems with an instrument). Asynchronous task monitoring can be used to determine if the task should be run again in cases of failures.'
exampleUrl: 'https://strudel.science/strudel-kit/#/monitor-tasks'
codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/monitor-tasks'
figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=10%3A67734&mode=design&t=YPdwq8c0BdXx5Um8-1'
Expand All @@ -27,11 +28,41 @@ import { InfoTable } from '/src/components/InfoTable';
</Grid>
</Grid>

Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
### Guidelines

### Dos and Don'ts

Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
<ul>
<li>
<b>Real-time experiments</b>
<ul>
<li>
The display should refresh to show new data as the data becomes available.
</li>
<li>
If data or events need to be reviewed, highlight the new data / events to draw attention to the ones needing review.
</li>
<li>
To support real-time decision making, keep the display as simple as possible with only what data is needed to make decisions. Plots and other quick analysis methods can be useful for these determinations.
</li>
<li>
Consider providing a simple way for users to add notes alongside monitored events.
</li>
<li>
If the monitor is to be used alongside other software, consider providing a smaller aspect ratio app for monitoring events. Provide a full desktop ratio version for more detailed work.
</li>
</ul>
</li>
<li>
<b>Asynchronous monitors</b>
<ul>
<li>
Users may rely on scanning states to help determine next steps. For example, in a job monitor, some indication if the job failed is helpful to determine if the job should be re-run. In cases of experimental observations, the state can determine if more observations are needed.
</li>
<li>
While real-time monitors should be kept simple, asynchronous monitors can be much more data dense, since time is not as constrained. Rich data access can help users determine next steps.
</li>
</ul>
</li>
</ul>

{/*
## Variations & Examples
Expand Down
38 changes: 34 additions & 4 deletions content/design-system/task-flows/run-computation.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ title: 'Run Computation'
tagline: 'Running optimizations, simulations, analyses'
tags: ['execution', 'scenario', 'job', 'simulation', 'optimization', 'stepper', 'wizard']
intent: 'Enables users to run computation(s) through a multi-step flow to generate results.'
intentDetails: 'Computations could be optimizations, calculations, or simulations for a model, scenario, or experiment with attributes to observe and compare results. Attributes may include input data and settings. Computations may be long running and require the ability for a user to leave the flow and return later.'
exampleUrl: 'https://strudel.science/strudel-kit/#/optimization'
codeUrl: 'https://github.com/strudel-science/strudel-kit/tree/main/src/app/optimization'
figmaUrl: 'https://www.figma.com/file/UQT4iRirRG9lrgzayfzswY/STRUDEL-task-flows?type=design&node-id=1%3A26644&mode=design&t=YPdwq8c0BdXx5Um8-1'
Expand Down Expand Up @@ -36,11 +37,40 @@ import { InfoTable } from '/src/components/InfoTable';
</Grid>
</Grid>

Tempor irure voluptate Lorem ea elit laborum laborum laboris voluptate id irure proident. Lorem fugiat ut mollit ad eiusmod minim voluptate. Officia ea non voluptate voluptate amet veniam ipsum aute. Eu velit consectetur velit adipisicing Lorem et ex ullamco consequat pariatur mollit excepteur dolore occaecat. Et velit pariatur ipsum quis amet sint dolore. Voluptate elit deserunt consequat minim velit qui nostrud proident sint ut. Ut officia sunt sit nulla.
### Guidelines

### Dos and Don'ts

Occaecat irure qui mollit aliqua cupidatat aute. Esse commodo non sunt tempor. Irure elit occaecat aute est ullamco tempor ullamco magna est ut. Sint cupidatat et aliquip est ullamco. Incididunt irure velit qui incididunt laborum ullamco veniam sit excepteur fugiat cillum. Cupidatat excepteur velit dolore proident laboris dolor.
<ul>
<li>
Break the task flow into multiple workable steps and use a progress indicator / stepper to help users see the progress and remaining steps in the process to complete.
</li>
<li>
Organize information into sections that are easy to digest. This helps improve the readability and searchability.
</li>
<li>
Offer guidance, tips, and links to detailed documentation for complex inputs & interactions.
</li>
<li>
Pre-fill the forms with sensible default values wherever possible, especially if data inputs require long forms.
</li>
<li>
Consider allowing users to upload input data as external files or spreadsheets, especially for computations that require large amounts of input data.
</li>
<li>
Make attributes searchable and filterable to make it easy to find attributes of interests.
</li>
<li>
Give real time error warnings for mis-configurations, especially for long complex forms. For example, specify bounds for values and provide warnings if values are outside of bounds.
</li>
<li>
Help users recover from failed computations by providing meaningful and actionable error messages and allow them to go back and change configurations and inputs.
</li>
<li>
Don’t break the workflow into too many small steps. Users may perceive this as a long and overwhelming process to complete.
</li>
<li>
Don’t assume users will understand each input field and the values to configure it. Provide contextual information when able.
</li>
</ul>

{/*
## Variations & Examples
Expand Down
Loading

0 comments on commit 91c93a7

Please sign in to comment.