2023 will likely see Google's return to tablet land, as well as an entrance to foldables. Already in 2022 we witnessed a somewhat unexpected love of the search giant of both device categories with regard to technical talks and updated libraries. Therefore, it's been no surprise that the developer relations teams have been hard at work advocating the adoption of foldables and large screen devices. But how about the products teams? Are they sharing the same love? In fact, quite a few Android Apps released by Google try to follow the design guidelines provided by the Material Design teams regarding both large screens and foldables.
Try to?
In this article I will be sharing my thoughts about an, in my opinion, failed attempt at a large screen and foldable UI. I'll do the post mortem on a very popular product, Files on Android. But before, let's briefly talk about the term large screen device. While a foldable may have a large screen (upon unfolding), a large screen may not necessarily mean tablet. Large screen may also mean TV, but not necessarily touch screen. Also, large screen may not necessarily refer to tablet, but could easily mean resizable, even freeform windows.
Feeling confused? Right so. In this article, when I say large screen I mean tablet-like, and given this wording, even an unfolded foldable may have a large screen.
OK. Let's turn to Google Files. Here's how the app looks like on a smartphone:
Key UI elements include
- Navigation drawer
- Navigation bar at the bottom
- A scrollable list
Have you noticed that scrolling the card-like list moves the app bar out of the screen? To be honest, I don't like that because in order to open the burger menu I need to scroll back. But that's a minor issue compared to what I'll be showing you now.
The screenshot was taken on a foldable, the Microsoft Surface Duo. The device has an obstructing hinge which blocks part of the UI. But I'm not going to elaborate on this here. Let's pretend the user interface is fully visible and usable. So, what has changed?
- The navigation bar became a Navigation rail on the left edge of the screen. This nicely follows Material Design guidelines.
- There are now two big, black, empty areas on both sides of the scrollable list.
Sorry, this was a bad one. We still see a scrollable list, which leads to the unused areas I just mentioned. Before I continue my rant on this, let's see what happens upon scrolls.
The good news is that we still see the burger menu and the practically empty app bar. We also see the bottom of the list By the way, do you know what this is for? Tapping on it temporarily colors parts of it, but otherwise 🤔 Please share your thoughts in the comments.
Now, why is maintaining the layout of the list so bad? Sure, it makes coding efforts easier. Actually, there's nothing that needs to be done. But it makes using the app unnecessarily hard. Take a look:
As you can see, the area that is likely most interesting to the user is pretty difficult to reach with the two thumbs. The larger the tablet or foldable is, the more difficult this will be.
Instead of showing just a list, we could arrange the cards in a more natural way:
Basically, we combine a two column layout with a flex box. The cards flow from left to right and top to bottom, maintaining two columns. If there are more cards than the screen can host, we perform classic vertical scrolling.
Have you noticed that the used and available storage bar is left aligned? This way it will be fully visible on devices with an obstructing hinge. The same applies to the cartoonish illustrations at the bottom. Although it may not have much purpose, I feel an obstructing hinge would hurt the overall visuals too much.
Wrap up
I believe my hypothetical large screen UI of Google Files gives the app a much more pleasing look on such devices, and, what's even more important, makes it more user friendly. What do you think about optimizing apps for large screen devices? Is it worth the effort? Please share your thoughts in the comments.
Unless mentioned otherwise all images (c) Thomas and Monika Künneth
Top comments (0)