2020 saw the birth of a new kind of phone - foldable phones - with promises of screen space and versatility. Many thought foldables were just a passing fad, however they have secured a small but growing slice of market share, and are expected to hit almost 5% market share by 2030. So, as more users choose them over traditional phones for everyday use, our apps must adjust to the new form factor.
Differences between regular and foldable phones
Foldable phones aim to take the already-cemented ‘candy-bar’ design and cram a large, foldable screen inside. This allows your small phone screen to transform into a larger, tablet-like experience at the drop of a hat. The key differences between a foldable and a normal smartphone are:
- Foldables give you an additional aspect-ratio and size to take advantage of. While with a normal phone you only have portrait or landscape options, foldables give a third, larger and ‘square-r’ view, better for media viewing or for completing advanced tasks.
- Generally, foldable phones allow you to transition from a normal-sized screen to a larger display. Users can switch between the two states at any time, and expect their apps to transition seamlessly.
- Foldables let you use the screen half-folded. You may think you can only use the large screen, but you can half-open it to take advantage of the extra screen space with laptop-like ergonomics.
What happens if you don’t design for foldable phones
If you don’t consider foldable phones when designing your app, you could leave your users with a sub-par experience. There are two key ways that foldables will display these unoptimised apps:
- Black Bars. Foldable phones may display the app in the aspect ratio of a normal phone with the extra space filled with black bars. This doesn’t look great, and pushes all touch interactions to the centre of the large screen, greatly reducing ergonomics.
- Stretched. Foldables may use the same structure as defined by the app, but stretch the viewport to cover the entire width. This comes with two downsides: firstly, you aren’t taking advantage of the extra room, but secondly again is ergonomics. Touch points that were previously in-reach are no longer, making your app more difficult to use.
Neither of these results are great for user experience. Both fail to utilise the extra space afforded, and neither provide a great ergonomic experience. While technically the app is usable, the far better option is to adjust your app for these devices. Let’s go through a few ways to do this.
3 ways to take advantage of the foldable phones’ extra screen space
Designing for foldable phones doesn’t have to mean rethinking your entire app. Besides, most users still don’t use a foldable, so any changes you make to your app can’t impact their experience. Instead, you should consider tweaking your app to support larger screen sizes.
1. Splitting the screen in two
Even though the Surface Duo didn’t make it past its second version, its premise of splitting the display in two lives on. For simpler apps, having two existing pages display side-by-side provides a familiar, straightforward and effective way of maximising the use of screen space. This comes with the added benefit of not requiring a redesign of any pages specifically for foldable phones, instead just reusing existing pages in a smarter way.
This approach works well for email clients, app with layered navigation, notes apps, and any app with simple pages. This approach may also suit your app if you have two really important pages that users keep switching between.
2. Redistribute components
This method does require changing up page designs, however if the previous approach doesn’t suit your needs, this may be a good choice. Many webpages today are responsive - designed to shift elements around to cater better to small and large screens - and this method applies that philosophy to apps for foldables. In this example of the Calm app above, the navigation has been moved to the right-hand-side so it no longer takes up space underneath the main content. The split is not 50/50 as we saw before, allowing the app to feature a dominant section.
3. Provide new functionality too large for a small phone display
Let’s be honest, some apps just don’t provide a good experience on mobile. Apps that are focused on productivity, have large dashboard or complex interfaces, or just need to give you a lot of features, all have to make sacrifices to accommodate small screens, sometimes sporting a completely different interface.
Foldable phones provide a better way forward - akin to having a tablet in your pocket - so you can start to bring tablet-oriented features or interfaces back to the mobile phone. Microsoft has updated Excel to introduce a desktop-like interface, giving users a greater experience on foldables. But this is just the beginning: you can bring features to your app that previously you couldn’t because of the screen size constraints, giving foldable phones a key differentiator in the market.
Bonus Tip: Utilising the split display
Foldable phones come with a party trick: using the hinge to prop up one half of the screen like a laptop. While at first this might seem like a gimmick, there are some situations where this position can be useful. For example, it can provide an ergonomic way typing, or act like a built-in stand for taking photos and videos. Either way, apps which support this split view need to think about where they place their UI elements. In the example above, Samsung rethought their camera app by moving all interactable elements to the bottom half, leaving the top half entirely for the viewfinder. This principle can be expanded to fit various scenarios, especially where you want a clear divide between content and interaction.
Closing thoughts
The introduction of foldable phones has been the largest change to the smart phone since the first iPhone, and it appears its position in the market will only solidify and grow as we close out this decade. Designing your apps to take advantage of foldables can benefit your users who wish for a bigger screen, however ignoring the space could lead to your app providing a poor experience to this growing market.
Whichever way the future runs, foldables today have the potential to provide a heightened user experience, but it up to you to build the experiences for today and for tomorrow.
Get FONSEKA to help turn your app for foldable phones!
Upgrade your app for the future! Fonseka specializes in custom app designs for foldable phones. Maximize user experience with innovative features and seamless transitions. Let's bring your app to the next level. Contact us today!