While foldable devices have been a thing on Android for quite a while, we don't see too many apps really making use of them. If you have been following my publications you know that I am a big fan of this device category. Therefore, I'm on a mission to foster its adoption.
This is the first part in a series of articles called Understanding foldable devices. The series expands on my previous work. Still, this is no copied content. Instead, it takes into account all things that happened after I wrote the earlier pieces. Today we'll stay theoretic. I'll analyze several misconceptions and introduce you to general layout considerations. The upcoming parts will transform this into running code.
So, what's a foldable anyway?
Foldable devices allow you to fold and unfold your screen. Often, unfolding makes the screen real estate bigger. So, being folded the device resembles a smartphone, whereas in its open position it may look like a tablet. Here comes the first takeaway:
Foldables aren't necessarily tablets that can be shrunk to a smartphone form factor
To be more precise, some must be opened (unfolded) to be used, and even then the screen has just the size of a smartphone. This immediately leads to the second takeaway:
Making the screen real estate larger not necessarily relates to one screen
Often, foldables have one screen that is used in smartphone mode, and a bigger one which is then folded and therefore not in use. Unfolding this one deactivates the small screen.
But, putting the small screen aside, isn't that a tablet, after all? That depends on what we mean when we say unfolding the device.
Take a look.
The first picture shows a Microsoft Surface Pro 8, a classic tablet. The second one shows a Microsoft Surface Duo, a foldable. Both look pretty similar, which supports the notion of an opened foldable essentially being a tablet.
Yet, do we really want to hold a foldable like this? Isn't the posture displayed in the following picture way more natural? That's how we usually hold a book we are reading.
I know what you are thinking... Ahh, he's once again turning to that niche product
No.
The point is, we can easily make our apps work well on dual screen devices, and therefore should do so. But that comes out of the box if we make our apps really shine on foldables.
Let me elaborate.
About folds, hinges, and gaps
Dual screen devices do have a bit of a problem, which is best shown with another picture.
No matter how well designed a mechanical hinge is, connecting two physical screens will always leave a noticeable gap. This gap counteracts the perception of one surface.
But is that really a problem?
Books have wonderfully crafted … hinges... 🤣
Jokes aside, the way books are bound makes the area towards the middle a bit hard to access. The natural way we have been dealing with this for centuries was as simple as ingenious - we just left that area blank.
As you can see, the gap that was so prominent on the web page practically disappeared. The idea of two pages works really well for more traditional apps, too.
We can think of the two pages of a book as two columns. So, arranging the main content of your app in a two column layout makes your app feel at home on any foldable device, no matter if it is made of one or two screens.
Wait a minute
On that picture of a web page that didn't look particularly nice on the Surface Duo we saw two columns, right? 🤔
Just using two columns is not enough. The two columns must match the two areas connected by the hinge. That's, by the way, why foldables are no tablets.
Let me explain.
Often, (non mobile) web pages have a 33 : 66 ratio for two columns. Here are a few reasons for this design decision.
Traditionally, the left part of the page contained some sort of menu or vertical navigation, whereas the larger part to the right showed the main content. This is still widely used today.
Often, web pages show a list (contacts, emails, …) on the left and present details related to the currently selected item on the right.
This interaction design pattern is frequently used in tablet apps, too. It looks so natural because the list-like content on the left can be made less wide due to its content, a name, a meeting title, an address. The details, on the other hand, may benefit from having more space available to it.
As 33:66 usually doesn't match the widths of the two areas of the foldable, the fold or hinge appears somewhere inside the right one. Yet, by utilizing the ratio that is given by the hardware (the sizes of the two screens) we make sure that no parts of the main content are obstructed by hinges or folds.
Wrapping things up
Again, you may be thinking that dual screen devices are so rare that it's not worth bothering. I beg to differ. Again, please take a look.
The picture above shows a simulated foldable that has a fold but not a big hinge that obstructs parts of the screen. So, with such a device a 33:66 ratio should be fun to use, right?
If we agree that holding the device like a book is a pleasant posture, there will always be areas on screen that are less easy to interact with - tapping on one of the items shown in the picture will certainly work, but it may be less easy, because of the fold.
One more thought.
The bigger the screen real estate is, the more likely it is that we want to hold the device with two hands. The center of the screen may then be difficult to reach with any finger from either hand.
To conclude, for foldable devices I suggest to use a two column layout for the main content of your app, where the width of the columns is determined by the width of the two areas left and right to the fold or hinge.
Is that all?
No. We can rotate our device, which means that the fold or hinge may no longer be running vertically. We'll tackle this in the next article. So please stay tuned.
Oldest comments (2)
I wonder if holding the device like a book is actually more comfortable / the way most people use these devices. I don't think every foldable has a good enough hinge to allow this, some can only be opened or closed completely. Then there's also the factor of people being used to standard tablets.
In any case, we should definitely be designing our UIs taking into account the hinge, although it looks challenging, considering how many different form factors there'll be (and also considering rotations, resizing and such)
Thanks a lot for reading my article. Very interesting and important thoughts, thanks a lot for sharing. You are right, the book posture may not always be the best way to hold the device. The Surface Duo can report more granular angles, so the UI could react to it. If I am not mistaken Jetpack Window Manager can't do that right now (will check for the next part) but Google said this may be added in a future release. To be honest I even think dual screen device may remain a niche but generally speaking we really need to make our apps behave better on foldables (and tablets, too).