Evolution of responsive app design
We’ve heard it before, this year is the year of the foldable. That might but true but I cant say I’ve seen any regular people with a foldable. Even if I want my next Android device to be a foldable. If only to better understand how the UX flows work in terms of App design. With all that said, let take a look and see where the industry is at. Instead of looking into each phone I would like to explore how Android 10 and Android 11 is going handle the UX of a foldable screen. Plus what opportunities to craft UX experiences for my users.
Some of the more notable phones on my raider are for example the very well known Galaxy Fold, Galaxy Z Flip and Motorola Rarz (2019) Other companies have been releasing and experimenting quietly with this new form factor such as the Xiaomi Mi Fold and their second device the new prototype Xiaomi Mix Flex and even TCL are exploring tri-folding devices. Not to be forgotten the Oppo Foldable looks like a solid device plus the curious LG concept Beni device takes a completely different take on what a foldable can be.
The more I research the foldable devices category the more I realise that firstly it is building on previous Android functionality. Some of which I’ve already taken a look into when designing for in previous apps. Secondly the category is expanding very quickly from one or two devices released in early 2019. The market now counts at least 10 notable folding devices. Although my question still stands when will is these phones be in peoples hands? Let’s dive in to see the details.
When you starting to look into the software side of Responsive Apps for Foldable devices we introduced to three Android OS concepts. Firstly App Continuity, secondly Screen radio and lastly App Multi-Window. For Multi-Screen or Dual-screen functionality see here With these three fold related features we can start exploring how to design for these devices.
Building apps for foldables
First off, any app that a UX designer will want to create will have the minimum requirement of Android 8 (API level 26) which improved and added support for foldable devices and different folding patterns. This means that all Foldable devices will have to run Android 8 and above which gives the user the advantages of an unfolding features:
- A larger screen usually means a more immersive experience.
- With multi-windows the user can perform multiple tasks at the same time.
Folding and unfolding can change the screen size, density, or ratio. This is not a new problem in Android development. It already happens in these non-folding cases:
- Phones: switching between portrait and landscape mode.
- Chrome OS running in desktop mode: resizing Android apps.
- Devices with multiple or additional screens.
1. App continuity
When running on a foldable device, an app can transition from one screen to another automatically. To design a continuous user experience between the 2 screens. It’s very important that the current task continue seamlessly after the user unfolds the device. The app should resume in the same state and location. Note that foldable devices can fold in many ways, such as in or out.
Since the user will trigger a state change during the transition within the app, an app should save app state between the different states. Folding/unfolding triggers a configuration change of the small screener mobile to the larger tablet screen when unfolded. This feels very similar to either designing for the responsive web.
This configuration change is similar with apps that are configured in multi-window mode. Even apps that does not support multi-window can be resized when a device gets folded or unfolded. From a design perspective the aim is to consider what happens when your app is resized. Similar to when taking an app from Phone to Tablet.
Generally speaking you should aim to design for Android OS and not for specific devices but there are certain things you should consider when designing for these devices. Look out for display cutout, just ask you would for other hole-punch or notched devices just consider that it is there. Furthermore consider that your app won’t be always full sized on the screen so how will a user achieve their tasks on a smaller surface area.
2. Additional screen ratios
Android 10 and higher has increase the number of screen ratios it supports with a wider range of aspect ratios. With Foldables, form factors can vary from super high long and thin screens (such as 21:9 for a folded device) all the way down to 1:1.
To be compatible with as many devices as possible, you should test your apps for as many of these screen ratios as you can. There might be times where the devs cant support all these radio. As a designer I would have to design the maximum and minimum Aspect Radio and the they can tested in the Android Studio simulator to see the results
3. Multi-window for Multi tasking
Being able to run multiple windows is one of the benefits of large screens. Previous to Android 10, say in Android 9 and earlier, having two apps side by side was common in some devices. The technology has improved to the point where three or more apps can run on the screen at the same time, and also share content between themselves. A UX design consideration would to support Drag and Drop when having multiple apps open at the time. I would consider thinking about how a user interacts with your app and others in Android platform as a whole and not the design the app thinking the user will stay with your app.
There are two types of multi-window. One is ‘Split view’, and the other is ‘Freeform window’. In non-foldable devices, Split view can hold two apps at the same time. In addition to this, our foldable device supports 3 split view to manipulate a big display. The big display also enhances usability of freeform window. Thus, it’s important to utilise multi-window while concurrent multiple app running in order to make the best use of foldable devices.
From a UX design perspective it important to understand the importance of Multi-resume. Previously in Android 9 and earlier, only the app in focus is in the resumed state. Any other visible Activities are paused. This can create problems if apps close resources or stop playing content when they pause.
In Android 10, this behaviour changed so that all Activities remain in the resumed state when the device is in multi-window mode. This is called multi-resume. Note that an activity can be paused if there’s a transparent activity on top, or the Activity is not focusable (e.g. picture-in-picture mode). It’s also possible that no activities have focus at a given time, for example, if the Notification drawer is opened. I will have to dig further into this to see what real UX impact it has. The subject is very much is development and foldables are the a very real thing. 2019 was the start and 2020 with release of 10 or more device plus the improved support in Android 11 is showing that as I keep designing App this is something that shouldn’t be push to the side of Nice to Have support. I wonder how long it will be until I start seeing these devices appearing in my Device list when asking the question. What kind of devices do your users use?
Lastly, since you don’t or cant get time with these devices download the Android Studio and start using the AVD. Some manufactures have test app out there to help better understand what is possible.
