Comments (7)
Hi, @ivan-aksamentov, thanks!
We've designed the following wireframe sketch with some of the changes we propose (desktop only for now). It'd probably be best indeed to split these changes in smaller pull requests so as to avoid merge conflicts.
PROPOSED CHANGES:
Design
- Alter font weights in titles and subtitles to improve hierarchy
- Give form inputs clear visual distinction by using white background color
- Add instructive subtitles to modules (“Use presets”, “Input data below” etc)
- Push help buttons to the right side of labels and change its color/opacity to a more subtle one (from light blue to a light grey)
- Change “Population” subtitle to “Universe”. We think it makes sense, as the box contains data for hospital beds and time range. Is this term correct?
Other changes
- Add h1 to main title “COVID-19 Scenarios” and proper semantic tags for subtitles (h2, h3 and so on), as well as “main”, “article”, “section” etc where applicable
- The text on the "severity assumptions" module is overflowing on mobile. We should wrap it in its div
- Add a spinner to “Run simulation” button, to indicate to the user that the simulation is being created/updated
WHAT IS NOT COVERED:
- So far we are not making visual adjustments to the charts
- Mobile wireframe
ABOUT THE SCENARIO PRESETS
One thing we found confusing about the scenario presets was that they aren’t labeled as presets. Therefore, it could be confusing to be given the option to fill the “population”/“universe” box with a city’s data, after selecting “country - no mitigation” on the first field.
Also, selecting "country - no mitigation" defaults to Germany, when there are other fields also being altered. Labeling it as "Germany, no mitigation, moderate/north" might convey all the changes occurring.
Let us know what you think about these proposed changes.
from covid19_scenarios.
@rodolfoalmeida01 @arieltonglet
Hello, you are most welcome!
If possible, try to split the work in small pieces to avoid huge merge conflicts.
Feel free to create "work in progress [DO NOT MERGE]" kind of Pull requests. Rebase on master often. Your PRs are autodeployed on Now.sh and the bot will give you a link.
It make sense to coordinate the work with Internationalization folks in #56 , because their changes will be very intrusive too.
Feel free to join our new chat:
Let me know if you have questions, or if you need me to organize anything (permissions, subscriptions, etc.)
Create! Improvise! 🧑🎨
from covid19_scenarios.
If you folks have a list of TODOs in mind, let us know. We can setup a Project if you'd like too.
We need to ensure that there are no huge merges.
I just merged a couple of Mobile PRs. Not sure if those align to your ideas:
#84
#87
from covid19_scenarios.
@rodolfoalmeida01 This looks wonderful! Can't wait to see these little checkboxes checked :)
Change “Population” subtitle to “Universe”. We think it makes sense, as the box contains data for hospital beds and time range. Is this term correct?
I am not sure. @rneher should know better. I think we plan to move simulation params like date range somewhere else.
One thing we found confusing about the scenario presets was that they aren’t labeled as presets. Therefore, it could be confusing to be given the option to fill the “population”/“universe” box with a city’s data, after selecting “country - no mitigation” on the first field.
Also, selecting "country - no mitigation" defaults to Germany, when there are other fields also being altered. Labeling it as "Germany, no mitigation, moderate/north" might convey all the changes occurring
The general idea behind scenarios:
- user simulates the outbreak under different parameters, grouped into "scenarios"
- then user will be comparing the results for different scenarios (not yet implemented)
- this way user learns which scenarios has better outcomes (spoiler alert: push hard into mitigation :) )
- there are 4 parameter groups: population, epidemiological, containment (same as mitigation) and simulation (all others)
https://github.com/neherlab/covid19_scenarios/blob/master/src/algorithms/types/Param.types.ts - we have pre-defined default combinations, "scenarios", for 3 of these groups (except simulation). Hardcoded here:
https://github.com/neherlab/covid19_scenarios/tree/master/src/assets/data/scenarios - user can switch scenarios of all 3 groups independently: mixing and matching scenarios gives large variety of possible parameters and outcomes
- user can change a value in any scenario and this action it will switch the corresp. scenario to "Custom"
- there are "overall" scenarios (previously "global", but "global" is a keyword in js, so I changed to stay safe)
- overall scenario, the largest "Scenario" dropdown on top, is a combination of 3: population, epidemiological, containment (sub-)scenarios
https://github.com/neherlab/covid19_scenarios/blob/master/src/assets/data/scenarios/overall.ts
There is only a few of them so far, one of them is indeed about Germany. - overall scenario is not limiting what sub-scenarios can do, but just replaces the values with some hardcoded defaults
- when user changes any of these sub-scenarios or any values, overall scenario becomes "Custom"
- pre-defined scenarios are more like tutorials, a sandbox. Professionals will enter their own values
So yes, the word "country" in scenario names is probably wrong now that we also have regions and cities (it was not the case last week ;))
I would insist on word "scenario", and not "preset", because it is closer to the ear of an epidemiologist, plus we already have it in out brand name and new domain name (to be announced soon).
Mitigation card should be visible on the page load. It is our primary goal to convince people that infection control matters. We are planning some drastic changes to the way mitigation data is entered by user: #14
Note: our users are not the same as a typical web user: these are epidemiologists, biologists, physicists, but also scientists and clerks in the government, possibly practicing medics, and hospital administrators. Clarity and ability to make work done and make a hard decision is more important for them than animations and transitions.
Let me know what you think. We are looking not only to prettify styles, but also improve the user experience as a whole. So any suggestions are welcome!
P.S. Parts of this post can make an excellent user documentation page
from covid19_scenarios.
Thank you for the thorough explanation, @ivan-aksamentov !
We'll keep the "scenarios" term, and make some adjustments to the scenarios input.
As @rodolfoalmeida01 go on with this, I'm forking the project and making a draft pull request for the adjustments we are talking about here
from covid19_scenarios.
@arieltonglet You are fantastic folks! Thank you.
Your sketch also look like an A4 page. I wonder if later we can also have a PDF- and print-friendly layout (for "busy executives")? #110
from covid19_scenarios.
This was implemented in #336
General followup is in #13 #71
from covid19_scenarios.
Related Issues (20)
- Option for adding Google Mobility data as an additive mitigation NPI HOT 3
- Option for correcting observed case counts using test positivity data and/or recorded deaths HOT 3
- Simulation plot changes every time refresh is pressed. HOT 1
- 🇧🇷 Brazil case data is incorrect HOT 7
- Step-by-step guide for parameter adjustment HOT 5
- Port to Next.js HOT 1
- Split app data per region and load on demand
- Don't bunde the data HOT 7
- weekly cases(data) vs weekly death (model) HOT 7
- Document, improve schema modification workflow
- Second wave
- Seroprevalence
- I want to contribute for Spanish translation HOT 4
- Missing Patients in hospital (data) in the results HOT 5
- Not all strings are translated
- API HOT 4
- Include effect of vaccination HOT 3
- Outcomes Summary Table
- Missing (And wrong) data shown before 08-16-2020 HOT 3
- [Security] Workflow eslint.yml is using vulnerable action reviewdog/action-eslint
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from covid19_scenarios.