Mobile usability in full screen mode

[CAYdenberg]

Description

Full screen mode is a nice addition which has the potential to drastically improve the experience for mobile users, however it seems to have the opposite effect, crowding screen real estate with the header and footer and leaving little/no space for the data. Turning the phone to landscape actually makes things worse. This matters because many users are instinctively trained to turn to landscape when in full screen because this is how they watch videos.

Expected behaviour

Full screen mode should emphasize the actual data across a range of device capabilities, possibly with the header and footer accessible if needed. In general though this information isn't going to be critical at this point because the user is aware they can access it by exiting full screen mode.

Steps to reproduce

Steps to reproduce the behavior:

1. Go to https://ourworldindata.org/grapher/co2-emissions-vs-gdp
2. Click on "Enter full screen"
3. Turn device to landscape mode
4. Attempt to tap, scroll up and down, etc.

Screenshots

Environment

See https://www.whatismybrowser.com/w/54YSQKM

• iPhone SE
• OS: iOS 16.6.1
• Browser safari 16.6

Yes, this browser is out of date. It also occurs in Brave. I'm pretty certain it's a viewport and not a browser issue per se.

Additional context

Loving the redesign, just a suggestion for improvement.

[danyx23]

Thank you for reporting this, @CAYdenberg! We agree, there are definitely some desperately needed improvements to be made here. We'll rethink grapher on mobile at some point in the near future and then will make sure to consider improving this area in particular.

For reference, Christian and I think that a reasonable area of investigation would be to drop the full screen button in scenarios where it doesn't make much sense and to introduce a minimum chart height that would make the chart scroll to some degree in cases like these. Just getting rid of the note and subtitle is probably not enough on it's own for some scenarios.

[CAYdenberg]

If you're interested, I wrote up a small UX case study https://livingpixel.io/blog/improving-web-scatterplots

[danyx23]

Oh wow, that is a great critique! I'll share it with the team so we can take it into account when we work on this area. Thanks a lot!

[danyx23]

Thinking about the cost/benefit ratio of this feature maybe it is almost worth just hiding the fullscreen button on mobile in landscape? And/or if you are in fullscreen and flip the phone switch out of fullscreen mode. So basically if the grapher height is higher than the available viewport height we would drop out of fullscreen or not allow entering it in the first place.