Foldable and flippable smart devices emerged at a time when the standard smartphone design was growing stale. Initially, many considered them unnecessary, forced evolutions. However, even though they aren’t dominating their market space, their popularity is still increasing. What do designers and developers need to do to keep up?
Why Web and App Design Must Change for Foldable Devices
Foldable cellphones and tablets are a more recent type of smart device that folds in half either vertically or horizontally and can clip to clothing or tuck easily into a pocket. In a bid to become trendsetters, several companies have been at the forefront of driving these devices’ growing popularity.
Designers should know that the foldable device market is still a small portion of the overall mobile device share. Only around 17.7 million foldable phone shipments are made yearly. Thus, while mobile devices overall make up 50% of digital media use worldwide every day, foldables in particular are expected to exceed just 2% of the overall mobile device market by 2025.
Although these devices obviously haven’t overtaken the market as some predicted, they are increasing in popularity. Professionals should revisit their development strategies to appease users, preserve brand reputation and set trends. While developers must rethink compatibility, designers must reimagine user interface (UI) and user experience (UX) design.
Because foldables bend in half, users can access dual screens that they can use separately. Hinges and variable display sizes further complicate layouts. Some phones have external screens that only turn on when the device closes, meaning designers must consider differences in folded and unfolded states.
6 Best Practices for Foldable-Friendly Design
The explosive popularity of mobile-friendly and mobile-first design demonstrates how important optimizing for all experiences is. You should follow these best practices:
1. Design for Multiple Screens
UI should be able to seamlessly transition from a split screen view to a tablet-like dual display or half of a flippable screen. You must consider how your app or website will adjust to various aspect ratios as users fold their devices inward or outward. A foldable phone becomes about 33% larger when users go from using its standard 16:9 screen size ratio to its unfolded landscape mode.
Use a stretchy grid to ensure each element remains appropriately aligned no matter how the end user utilizes their device. The dynamic modules stretch to fill the space within the frame without distorting, optimizing your content for various screen sizes. Scaling this way helps you maintain readability and legibility no matter the folding pattern.
2. Reimagine Functionality
Scaling UI and adding transition animations shouldn’t be your only priority — users will expect some additional or unique functionality. Conversely, they won’t want to lose key features when transitioning to a smaller screen. Consider why they move from one folding pattern to another and adjust your UI accordingly.
For example, a social media platform could show content on one screen and the comment section on the other when expanded. For the device’s smaller external display, you should trim unnecessary buttons, hiding any icon that isn’t immediately necessary in a kebab menu. This strategy makes the app more convenient without compromising the user’s experience.
3. Put Yourself in the User’s Place
The way people interact with foldable technology may differ. Take the time to use a foldable device and see how it differs from other screens and products you’ve used. It’s much easier to design something that is usable and efficient once you understand how people engage with the item.
Pay particular attention to the different layouts of the device, such as folded, unfolded and tent mode. How do people interact with each version of their device throughout their day? To create a truly easy experience, you must understand the varied uses and how to best design for different environments and modes.
4. Minimize the UI Clutter
A good rule of thumb in design in general is to cut the clutter. It’s tempting to show off everything a foldable design might offer. However, the UX will be off if the software is too complex for devices that have smaller screens and shorter battery lives.
More designers are turning to minimalistic, anti-design methods that deliberately ignore best practices to put the focus on the core messaging and lose anything extra. Only keep your must-haves and remove anything you could add later. Hide any features users won’t access consistently behind a hamburger, accordion or drop-down menu.
5. Mind the Foldable’s Gap
Foldable devices’ OLED screens are flexible so that they can bend without breaking. They connect via a hinge mechanism, which creates a gap. One of the most essential best practices for foldable-friendly design is to avoid placing any content or interactive element here. Think of it like keeping text away from a book’s spine to keep it legible.
6. Make UI Design Ergonomic
Hinge mechanisms, multiple displays and extra internal components make foldable devices heavy. For example, the Galaxy Z Fold 4 weighs around 9.27 ounces, making it much heavier than the comparable Galaxy S23 Plus, which is 6.87 ounces. This difference makes sense since it is essentially two phones stacked on top of one another.
Consider how this weight affects ergonomic reach zones. For example, while having a back button at the top of the screen is standard for most websites, users may be unable to reach it. Forcing them to adjust their grip or use their free hand causes friction. Instead, you should strategically place icons within their reach, adjusting for various displays and orientations.
Keep the Future in Mind
Expect more possibilities as companies ramp up production of foldable products. Plan accordingly, developing features you can scale to include new uses as they become available. Consider the ongoing growth of these technologies and how they will likely impact device usage over time. With a bit of planning and consideration of the future, your designs will stand out from anyone else’s in the industry.
