search

neherlab / covid19_scenarios

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

Improve mobile user experience #71

Closed ivan-aksamentov closed 4 years ago

ivan-aksamentov commented 4 years ago

Our current mobile experience is suboptimal.

Key defects:

We currently use reactstrap as a frontend library with some Sass stylesheets and bootstrap utility classes sprinkled here and there. As a team of 3 people, we would not able to change that. But if we find knowledgeable contributor(s) in UI/UX space, then the transition to another styling solution will become more realistic, including the full revamp of the UI.

Our main focus is desktop, with 720p or 1080p screen at least, but having broken mobile experience hurts the outreach, because we mostly promote our project on social media (Twitter). People are coming from there on the phones first, and they are probably not very impressed and are less compelled to switch or return with a larger device.

Related issues:

Screencast of "iPhone X" simulation in Chrome:

mobile

ivan-aksamentov commented 4 years ago

This is a huge issue (in terms or amount of work). Feel free to open separate issues for smaller fixes and mention this one.

miksa1987 commented 4 years ago

Hi! I could start working on the elements. As for clicking run and more items appearing, could it be done so that form items would be kind of like menu overlay on top of everything, and when clicking run, they go away to a menu button ready to be invoked again? Also, I was thinking about the popups in graphs, perhaps they should be placed on top of the graph on mobile, so that it wouldn't be on top of the pointer making it hard to tap on certain spot?

ivan-aksamentov commented 4 years ago

Hi @miksa1987,

I could start working on the elements

It'd be awesome! Make sure you coordinate with other folks, such as in #83 and other issues and PRs listed above

form items would be kind of like menu overlay on top of everything, and when clicking run, they go away to a menu button ready to be invoked again

That's a great design idea!

about the popups in graphs, perhaps they should be placed on top of the graph on mobile

That'd be fantastic! Although, I am not sure if our graph library allows that to be done easily or even at all. But I'd be glad if you can look into it!

Please, in order to ensure that the merge conflicts are small and there is no work wasted on different people doing the same thing, keep your work constantly visible:

miksa1987 commented 4 years ago

form items would be kind of like menu overlay on top of everything, and when clicking run, they go away to a menu button ready to be invoked again

That's a great design idea!

about the popups in graphs, perhaps they should be placed on top of the graph on mobile

That'd be fantastic! Although, I am not sure if our graph library allows that to be done easily or even at all. But I'd be glad if you can look into it!

I'm going to look deeper into these two today for starters and open an issue when I'm ready to start working. I really hope your graph library makes it easy(or even possible, like you said) to adjust the popup position based on, for example, media queries. Personally that was a major annoyance when I tried this on my phone.

I'll do this by starting a "DO NOT MERGE" PR first and when it's ready, I'll change the title? I will join the chat too.

ivan-aksamentov commented 4 years ago

@miksa1987 Sounds like a plan!

I'll do this by starting a "DO NOT MERGE" PR first and when it's ready, I'll change the title? I will join the chat too.

Yes, you can remove the "WIP" or "DO NOT MERGE" status or draft flag and and I'll review and merge. You may also ping me with @ivan-aksamentov to make sure I pay attention :) And of course, let me know if you need something.

ivan-aksamentov commented 4 years ago

There's been numerous PRs and mobile experience is somewhat better now. We will address the remaining concerns in more focused issues.