Improve styles and readability

[rodolfoalmeida01]

Hi! Based on issues #71 and #13 me and @arieltonglet are assessing improvements to the general user experience. We're planning on altering text, button and help icon styles to improve readability and information hierarchy on both desktop and mobile.

Later on we intend to work on the charts, but it'd be best to open a separate issue for that.

[ivan-aksamentov]

@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! 🧑‍🎨

[ivan-aksamentov]

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

[rodolfoalmeida01]

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.

[ivan-aksamentov]

@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!

Related:
#14
#120

P.S. Parts of this post can make an excellent user documentation page

[arieltonglet]

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

[ivan-aksamentov]

@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

[ivan-aksamentov]

This was implemented in #336
General followup is in #13 #71