openmindanesth / openmind

anesthetic database
Eclipse Public License 1.0
1 stars 1 forks source link

Mobile Version #71

Open hlesaint opened 4 years ago

hlesaint commented 4 years ago

At a later time point ~stage 4 we could think about adjusting the layout slightly to display extracts better on a mobile device. This is primarily about the ratio of thumbnail, text, and features within one extract.

As the extract has limited width and hence extends in height there is a lot of unused space below the thumbnail. I'd suggest to always put the thumbnail top-left and text starts right next to it (as it is now), but the text flowing around the thumbnail (continues left below thumbnail). Features are below thumbnail and text.

hlesaint commented 4 years ago

Potential contributors may attend virtual meeting of the ISMRM with their mobile phone, let's be prepared.

hlesaint commented 4 years ago
Bildschirmfoto 2020-06-16 um 14 03 08
hlesaint commented 4 years ago
Bildschirmfoto 2020-06-16 um 14 14 08

For short text it appears better when the features follow text and not below thumbnail (second example, bottom). Nice design is if features are positioned right hand side to the bottom of the thumbnail. And after break when text flows around thumbnail (as shown in the example images above). Features itself should not flow around text – either next to thumbnail or below.

hlesaint commented 4 years ago

other alternative, most simple and effective: figure, text, features.

Bildschirmfoto 2020-08-04 um 08 53 55
hlesaint commented 4 years ago

Good point with the search bar. Another one regarding mobil mode: once you enlarge a figure via touch it can be difficult to close it again. Touch on the enlarged figure to close it again would substantially improve the usability.

tgetgood commented 4 years ago

There was a bug in my change to the search bar. I've fixed it now. I think 1 row is good for anything bigger than a phone, but 2 rows are necessary once screens are small enough.

Good point with the figure. I've had problems closing popups in the past. I'll try to make a second click close all popups and see how that works. For figures and sources I don't foresee any problems, but there might be complications with, say, comments, where clicking on the reply button opens a reply window, but clicking just outside of the reply button closes the comment window. I'll have to think about that.

hlesaint commented 4 years ago

That's true – although comments are likely clicked less often than figures and occupy smaller areas of the display after expansion. It should be therefore easier to click next to it to close a comment, as long as click next to it works immediately (sometimes it doesn't right now). A cross for closing comments could be also an option.

Besides an adapted layout for better readability on the mobile (figure, text, features from top to bottom, see last example above) there are some formatting issues in Firefox and Safari (iphone):

Bildschirmfoto 2020-08-19 um 19 07 02
tgetgood commented 4 years ago

Sorry for the delay on this, I was close but got pulled aside by other work.

I think it looks good enough to browse now, but I haven't tested creation, commenting, etc. on mobile extensively yet.

Reopen this if you find anything broken.

tgetgood commented 4 years ago

I made the images bigger, and one thing that strikes me is that the captions now feel strange. The extract itself looks like the caption of the figure until you click the figure and see another caption.

To start with, we should get rid of the figure popup entirely on small screens, because it's already as big as the screen allows. Maybe that will fix the confusion.

tgetgood commented 4 years ago

Popups are still wonky, so I'm reopening this.

hlesaint commented 4 years ago

That looks neat. Showing the caption by clicking the figure comes quite naturally. Usually the caption appears below the figure, which helps to read and compare text with figure. In rare cases – when the figure is at the bottom half of the screen – the caption covers the figure. Having always the caption below the figure would be a bit more handy. Apart from that it's a very convenient and comprehensive design and usability.

Currently it is easy to change search term and filters, but this could change when many extracts are in the data base. Once you scrolled down for a while it would make sense to have some collapsed symbol on the top or top side that allows to expand either the search bar or the filter tags /the entire menu.

Specific errors:

hlesaint commented 4 years ago

In the desktop version, for some wider thumbnails the distance to the text is very close (see red frame – might be selective perception occurring in pandemic times).

Bildschirmfoto 2020-08-30 um 23 24 09
tgetgood commented 4 years ago

The text is aligned properly, but it is too close to the figure. That's only apparent when the figure has colour on the right edge. I'll fix this.

As for the figures not displaying and disappearing, I can't reproduce this. I'd like to think it a transient error. Let me know if it comes up again.

I've also discovered that wide figures sometimes escape from the surrounding box they're supposed to be in. I'll track down the cause of that as well.