neherlab / covid19_scenarios

Models of COVID-19 outbreak trajectories and hospital demand
https://covid19-scenarios.org
MIT License
1.36k stars 353 forks source link

Add popup on startup #25

Closed ivan-aksamentov closed 4 years ago

ivan-aksamentov commented 4 years ago

We want to add an initial modal popup with a sort of a "user agreement" info, and consent

rcbevans commented 4 years ago

Do you have any UI mockup for the how you want the dialog to look/what the text should be?

rcbevans commented 4 years ago

I have a basic bootstrap based dialog, with light-dismiss, and sample liability disclaimer text:

image

It shows as part of the layout component when the component is first mounted. I implemented it using just the bootstrap css classes, though it would be simpler if a dependency were taken on react-bootstrap.

ivan-aksamentov commented 4 years ago

@rcbevans Hi Rich, thanks!

Feel free to submit a PR! We are currently using reactstrap.

Honestly, not only we don't have a mockup, we haven't even yet figured what should be there as text. Mostly something along the lines of what there is already on the results card. Something like: "this is theoretical math and these are the human lives and also predicting the future is hard, so be careful", but more official :)

We may also need a GDPR disclaimer, because we may start storing the parameters and user preferences in local storage.

Not sure if we are crossing the line where we should add a FDA-style disclaimer that this is "not a medical device" for US folks out there.

In any case, if you have any thoughts, let us know.

I'll cc Richard @rneher, he may want add something.

rcbevans commented 4 years ago

Ah, didn't realize you had reactstrap. In that case, there is already a nice component ready to be used which is cleaner than my css based implementation (not to mention likely more bug-free, and accessible friendly.

How does this issue jive with #107 for adding a landing page? Is that preferred to a modal, or anticipated to be in addition to?

ivan-aksamentov commented 4 years ago

@rcbevans With popup in simulator we will gather consent once. I think we need an explicit action, like "I agree" checkbox. Then we store the consent version and skip the popup, until we release a new version of the app with a new version of the disclaimer. If disclaimer's version is greater than the one stored consent version, show popup again.

Landing is purely cosmetic, we will have a checkbox to remember and skip next time (redirect in router maybe? we use connected-react-router)

Does it make the first visit too annoying? Click on landing and then on modal. What you imagine would be a better UX? (for first visit and for returning users)

rcbevans commented 4 years ago

If users come to the site, they're going to want the simulator; having to click through two dialogs to reach what they want could lose users at each step.

I think the modal shouldn't intercept navigations to the simulator. Perhaps update the routes so the sim is at /simulator, and the landing page functions as a homepage at /. I think the modal should show every time, but with a checkbox to not show again.

rcbevans commented 4 years ago

That way users can bookmark /simulator to jump straight to it. I think it's a good idea to show the disclaimer if terms change, just need to ensure it doesn't happen too often, else it'll annoy.