Improve desktop user experience

heuermh commented 4 years ago

Thank you for this useful resource! Unfortunately it is rather difficult to work with in the web browser because of the rigid boxy layout. Labels, values, and column headers are truncated and/or difficult to read.

Please consider a more flexible web layout; perhaps moving the Results box to the bottom might help.

ivan-aksamentov commented 4 years ago

Hi @heuermh , Yes, the user experience is currently suboptimal, especially on any screen that is smaller than a typical 1080p. Having only limited amount of resources, we primarily focused on the tool to be useful, but now we are definitely want to invest into making it prettier and to improve usability.

Currently we use bootstrap (more specifically, reactstrap) for the grid layout, so on smaller screens Results box eventually goes to the bottom.

The difficulty is to test all that on different displays. Also we have some small elements, like form inputs and large elements, like plots. And it is not obvious how to compose them better, while also preserve the grouping into scenarios.

Do you have difficulties on a particular device? Let me know the resolution and screen size or DPI.

Going further we may look into tweaking the layout, for example by:

adjusting the bootstrap's breakpoints (we use the Sass version, so overriding the default variables should be not too hard)
adjusting the column sizes for different screens (see Col components through the app's source code)
replacing bootstrap with something else
shortening the form labels and moving the information into the corresponding help boxes
adding ellipsis-truncation to form labels
warning the users ("optimized for desktop, 1080p and larger" or something like that)

neherlab / covid19_scenarios

Improve desktop user experience #13