Designing for foldable technology
Despite the astronomical price-tag and highly breakable look of early foldable phones, we can confidently predict a future of interesting new design challenges thanks to flexible screens.
A quick refresher in case you’ve missed it...
- Screen technology has advanced to the point where displays can be flexed repeatedly without breaking
- 2019 saw the race officially commence to dominate the foldables market, with major players including Samsung and Huawei releasing luxury foldable handsets
- ‘Foldable’ phones can exist in two states, open and closed, like the clamshell designs of yesteryear but waaay more beautiful and with edge-to-edge displays
Expected user behaviour
With most debut flexible devices offering two screen states, will people always use their device in its expanded state just because they can? – It’s safe to say that for most people the answer to this is no.
Aside from physical context and whether you have two hands free (if you're walking you're using it like a normal phone, if you're on the sofa you've probably got it unfolded), to unfold or not to unfold is a question of immediacy and complexity of task.
Think of the calculator app for Mac:
If you're trying to quickly add two numbers together you need the basic calculator, because the task is immediate and uncomplicated.
If you're trying to predict where your company's growth will be by the end of the year just using the calculator app (ill-advised, but let's go with it) you're going to expand the calculator to reveal more functions as the task is complicated, time consuming and infrequent.
Thinking about foldable devices in a banking context for example, the same pattern of behaviour applies.
For immediate tasks, glancing at the smaller, folded screen represents the simplest way to access basic information and actions quickly:
- Balance check
- Reviewing recent activity
- Quick social payment
Unfolding presents the opportunity to understand further context around your task, and enjoy greater usability for actions that take more than a couple of taps and require more detailed information:
- Applying for a new product
- FX transfers
- Bill splitting
- Multiple account views / aggregation
- Checkout flows
With a better experience and greater functionality potentially hidden ‘beyond the fold’ are we about to see that term rear its ugly head again?
Return of the fold?
'The Fold' – a much maligned term that took a newspaper analogy and was applied to the scrollable reality of web. Thankfully the perceived importance of this concept with no regard for good content hierarchy died a death years ago (outside of some awkward client conversations).
With the introduction of devices that feature a foldable screen though, 'the fold' takes on new meaning and becomes a much more physical, vertical design consideration.
If the relatively low numbers of properly tablet-optimised apps is anything to go by, it's safe to assume that the vast majority of app developers, certainly in the short-term, will fail to adapt their apps for foldable screens. But let's imagine a world where we've all gone nuts for foldables. Brands, developers and OS's have taken it seriously and standard patterns have started to emerge.
One of the first patterns to solve will be how we tell users 'this screen provides a better experience if you unfold your device'. Unlike simply scrolling for content on a fixed viewport device, revealing additional functionality on a foldable device requires a less natural interaction - we’re going to need a nudge.
Our team believe this nudge should be:
- a momentary hint
- entirely visual
- oriented to the side of the screen where the fold exists
These constraints logically translate to a quick flash at the side of the screen after load that indicates enhanced functionality is available if the user unfolds the expanded view.
As designers however we should be wary of developing new navigation patterns unless adopted and advocated by the OS itself through its native apps. Time will tell what variant of this pattern becomes universal.
As important as manufacturers getting the price point right and app designers truly understanding the behavioural patterns, over time foldable devices will really live or die on whether this technology brings an enhanced customer experience for our common contexts and interactions.
When it comes to the benefits of the tech, these are being communicated in two broad categories by manufacturers of early foldable handsets:
- Greater screen estate
- Opportunity to multitask
Greater screen estate
We're really talking about tablet design here right?
Yes and no.
Yes, the greater screen estate puts the screen size closer to small tablets (or *shudder* phablets - the worst portmanteau since 'guesstimate'). But in contrast to the fixed, predictable screen size of a tablet, the inherent duality of foldable screens creates design challenges more akin to a web environment with a varied landscape of viewport sizes to accommodate.
Unlike the seemingly infinite possibilities facing those designing web-based experiences though, developers of apps for foldables will have a much more defined set of constraints:
- One single breakpoint (the physical fold)
- 2 screen states
- Defined ratio between screen states
Much like tablet design, screen orientation also becomes a consideration. When your expanded screen is closer to a square than a letterbox, some users may prefer a little more width, some a little more height.
Taking these constraints and considerations into account, the team began to unpack the benefits that a second, wider screen state could bring in a banking context, improving existing features and interactions.
‘Unfold for more information’
What we’re really talking about here is a wider change in how we approach modality. Once unfolded, what previously had to be presented in a modal state has the potential to be automatically expanded within the additional screen estate – but that doesn’t mean it should be.
Many interactions require modality to support user orientation or focus, but where mobile app users currently enter a modal view simply to gain contextual information, this presents an opportunity to ‘unfold for more information’. We see this being most useful for complicated form-based processes like a mortgage application.
Persistent reassurance in purchase flows
Throughout a checkout process, users want persistent oversight of the purchase details to confidently move through each step and buy – we’re cautious creatures when it comes to parting with cash and like to double check the details.
We also like simple interfaces that gives us one decision at a time.
Unfortunately with limited screen estate it’s hard to achieve both a focused interface and a persistent basket/ticket element. We explored how foldable screens can solve this…
The trouble with using livechat on a phone is that you can’t do anything else at the same time. In a web environment we’re used to live chat popping up over the current task, the team has explored how we may be able to ‘unfold for help’ and be guided through a process via live messenger.
Truly useful multi-account views
Many of us have our money spread across different accounts. Boosted by the effects of PSD2, banking services such as Yolt let us see the balances and transactions from our different accounts in one place – woohoo!
But trying to show a timeline of transactions for all of your accounts at once becomes complicated, so most apps just show a single account view once you get into the details – not so woohoo.
Unfolding your phone however could give us more screen estate to show a complete financial picture across accounts.
Greater location context
Ever tried to fit a map and list view on the same mobile screen? It’s nigh on impossible to have both elements on screen at the same time and keep things usable.
With banking customers expecting to be able to understand and filter their transactions in all sorts of ways as standard, greater screen estate allows us to offer the ability to show transactions within a certain area, much like looking for local businesses on Google Maps...
Multi-tasking in this context simply means having two (or three) apps open at once, visible on the same screen. Easy.
In a wider context beyond banking, this affords customers the benefits they have enjoyed on desktops, laptops and Windows tablets for years – you can stream world cup games while doing work (amongst other infinitely more boring multi-window configurations).
Is multitasking going to be useful in a fintech context though?
The answer to this centres around security. As authentication is no-longer a complicated process thanks to touch ID et al, many modern banking apps require re-authentication every time the app becomes inactive. And when swiping through your apps that are in stand-by mode, often banking apps will hide all details. So when apps can be docked in the second half of a foldable screen, the challenge will be maintaining both usability and security.
Multi-tasking is however a reality right now on the modern breed of tablets, and we can observe that multi-tasking with banking apps affords an easier way to check balances or reference information while completing another process. By having a banking app and shopping site open at the same time allows us to quickly answer questions like; ‘can I afford this?’ or ‘what are my virtual card details?’
Should I care about this yet?
In short, not just yet. Nascent foldable tech is cool enough to garner a huge buzz, but likely to be too prohibitively expensive to attract significant buyer interest, with no optimised apps. It’s like releasing a flimsy £2,000 games console without any games.
The day will come very soon, if it hasn’t already, that someone in a big bank will see an opportunity to prove they’re innovative by releasing an app optimised for foldable devices, just because they can.
Right now, the obvious retort is ‘that’s a complete waste of money, none of our customers have one!’
But in the next year, when the dust has settled from these initial handset launches, flexible screens will work their way into more of our hands, and we’ll want an enhanced experience as a result.
Plan for that by bearing the following in mind:
- Consider context, immediacy and complexity to predict which screen state users are likely to want to view an app screen in.
- People will want the same access to features whether their screen is folded or open, unfolding the phone should enhance the experience rather than completely change it.
- Adopt a mindset borrowed from responsive or adaptive web environments to tackle duality of screen size.