[E/P] Some thoughts on the recent mobile layout changes.

[DeathByAutoscroll]

Let's start this opinion piece off strong: The new mobile update has made the editor nearly impossible to use with a comfortable phone position without enabling "View on desktop". I believe the layout changes to the editor should be reverted until more testing has been undertaken. For the sake of comparison I have taken screenshots of mobile with "view on desktop" enabled (simulating the old view (which is not 1:1 accurate but it's close enough for demonstration purposes)) compared to the recent mobile layout change. The new mobile layout is on the left/top while "view on desktop" is on the right/bottom.

(Warning: Very large images, taken with a Oneplus 7T Pro with a browser user agent string of Mozilla/5.0 (Android 12; Mobile; rv:133.0) Gecko/133.0 Firefox/133.0):

Spoiler : First impressions (not great) :

When loading into the editor, the user can zoom out past the "active area" of the webpage (in this case, the character profiles). This does not look good, and effectively wastes space the editor could use to display itself. In this example, a good mobile layout could have 2 profiles side by side in each row. The root cause of this problem navbar at the top of the editor, which extends and clips off the screen. This could be resolved by splitting the navbar up into segments or by extending the "active area" to use the full width of the screen. The desktop version showcases the latter solution, displaying 3 profiles side by side in each row under the nav bar, without it overlapping.

Spoiler : Frame editor (Practically unusable now) :

When viewing on the storyboard, the new mobile layout displays the components of each frame row underneath itself. This makes it particularly difficult to read and edit the text on each frame, and makes it downright impossible to use other functions of the editor, such as toggling if a frame should be hidden or merge with the next. Compare this to desktop view where the frame rows are smaller, but allow the user to use all the functionality in them, as they are able to fully display horizontally.

Spoiler : New player layout (actually really good) :

Overall this is an improvement, as the vertical nature of the trialplayer is able to mesh well with the phone's narrower dimensions, and as a result it makes a case far more comfortable to play. While not being able to see evidence without scrolling is a shame, being able to read it comfortably without constantly zooming in and out is something worth keeping. Besides a bug with this new layout detailed in-depth in a separate report, I mostly have praise for this new design.

As seen in the images above, the AAO website is internally displayed as being a lot more zoomed in, and unfortunately on my phone this breaks when displaying the webpage in a vertical orientation. However, when being displayed in a horizontal orientation the website does not run into the same width limitations. Unfortunately, in most cases this offers a worse experience compared to using the desktop layout on mobile (note: I could not get the URL bar to hide at all for these screenshots.):

Spoiler : Horizontal Editor :

In the top image (mobile layout) the "Hide at start" & "Merge with next" buttons are hidden behind the frame's action bar, and the next frame's screen editor. This leaves only the "Wait for" input box accessible for each frame. The delete button also overlaps the "Voice selection" dropdown menu, which may result in frames accidentality being deleted trying to change the voice. In the bottom (desktop layout) image the control block is able to display inline with the other controls, and the delete button does not overlap with the frame's functional elements.

Spoiler : Horizontal player :

When using the new mobile layout horizontally, both screens of the caseplayer clip off the screen, resulting in the user having to scroll up and down to see both screens fully. The debug menu on the right side of the screen's text is also not given sufficient width to render clearly, resulting in text overflowing boxes or appearing squished. The desktop layout renders the player to be perfectly sized vertically (on this screen) and can comfortably display the full extend of both screens without requiring the user to scroll the screen.

Overall the new layout changes completely break the functionality of the editor on mobile, and introduces numerous rendering issues. I believe these changes should be reverted until a new design can be made and properly tested.

10/12/2024 edit: Rewrote a lot of the points to be less complaint, and more technical in tone, and fixed a few misreferences.

[ThePaSch]

Thanks for your thoughts. We’ll be fully reverting the editor changes in the next update.

The player is not intended to be used in landscape mode on the tiny screen dimensions that are commonly found on phones. The smallest screen resolution the player is optimized for is 1280x720; anything below that will likely cause display issues, and we have no plans to change that (since it’s difficult to find any real estate at that point without compromising some component or another). Besides, it seems odd to me to play a game in landscape that inherently screams to be played in portrait (because of its inherently vertical screen dimension ratio) if you’re on a small screen. As such, the player will remain as it stands now.

[DeathByAutoscroll]

Thanks for your thoughts. We’ll be fully reverting the editor changes in the next update. [...] As such, the player will remain as it stands now.

Thank you. Once all the bugs have been ironed out, I will certainty enjoy using the new vertical player to play cases, and I am glad to hear those changes are remaining whist the editor is reverted.

Besides, it seems odd to me to play a game in landscape that inherently screams to be played in portrait (because of its inherently vertical screen dimension ratio) if you’re on a small screen.

I included the landscape modes as it was how I personally played cases on mobile before this update: The player's display stayed roughly the same size between the 2 orientations, however when played horizontally the evidence/profile descriptions were easier to read as they were added to the court record. This post would also have felt horribly incomplete without exploring all of the reasonable ways to interact with AAO on mobile, especially as some users may be using something such as an iPad with a much wider display than my phone.

[ThePaSch]

This post would also have felt horribly incomplete without exploring all of the reasonable ways to interact with AAO on mobile, especially as some users may be using something such as an iPad with a much wider display than my phone.

That’s fair. Any device that has a logical viewport size higher than 1280x720 (which will include most, if not all, tablets) will have no display issues in either orientation mode, as that’s the minimum resolution the player view is designed to work with. I understand your case of playing in landscape before this update, as the previous layout didn’t place the player’s screens front and center; though I’d imagine that after this update, there should be little reason remaining to play in landscape on small screens/phones.

Edit: substituted “display resolution” for “logical viewport size”

[DeathByAutoscroll]

For the record, these screenshots were taken on a Oneplus 7T Pro, with a display resolution of 1440 x 3120*. I will certainty be enjoying the larger vertical layout of the player once I have time to fully engage with playing cases on AAO again.

* The screenshots were downsized later to display nicely in the post**
** On a computer at least

[ThePaSch]

For the record, these screenshots were taken on a Oneplus 7T Pro, with a display resolution of 1440 x 3120.

That is your device’s base resolution, but it employs a pixel ratio of 3.5, meaning its effective viewport size—i.e. the amount of pixels your browser has to work with by default—is 412 x 892 (reference).

[DeathByAutoscroll]

Fun. Thank you for the clarification, and I wish you luck with the next update.