Unlocking Foldable Phone UX: Design Strategies, Challenges & Opportunities
This article explores the current market of foldable smartphones, classifies their folding mechanisms, examines user‑experience postures and scenarios, and provides practical UX design guidelines—including readability, accessibility, continuity, and layout techniques—to help designers create effective foldable‑screen applications.
Current State of Foldable Phones
Since the first global foldable smartphone was launched by Royole in October 2018, major manufacturers such as Samsung, Huawei, OPPO, Vivo, Xiaomi and Motorola have released their own models. CINNO Research predicts 15.69 million units sold worldwide in 2022 (a 107 % YoY increase) and 57.4 million units by 2025 (CAGR 66 %). Despite this growth, foldable phones remain a niche product for most consumers.
Classification of Foldable Phones
Foldable phones are grouped by the direction and style of the fold: horizontal, vertical, inward‑fold, outward‑fold, etc. The most common configuration today is a horizontal inward‑fold.
Foldable Postures
Three primary postures are defined: folded posture, expanded posture (horizontal and vertical), and half‑open posture (desktop mode).
1. Folded Posture
The front screen maintains a typical smartphone aspect ratio. Designers should follow general mobile UI guidelines when creating layouts for this posture.
2. Expanded Posture
When unfolded, the screen size roughly doubles, comparable to a small tablet. Expansion can be horizontal or vertical.
2.1 Horizontal Expansion
The longer side of the screen is horizontal.
2.2 Vertical Expansion
The longer side of the screen is vertical.
3. Half‑Open (Desktop) Posture
The device is partially opened, with one half of the screen lying flat and the other standing at about 90°, similar to a laptop.
Use‑Case Scenarios for Foldable Phones
1. Adding a Second Screen
Split‑screen display of the same page within a single app.
Split‑screen display of different navigation or filter results.
Transforming a single screen into a dual‑screen layout, scaling content horizontally.
2. Parallel Multi‑Tasking
Displaying main task and sub‑task side by side.
Showing parent and child pages simultaneously.
Running two distinct apps in parallel.
UX Advantages and Pain Points of Foldable Screens
Advantages
Multi‑Scenario Support : Larger screen area satisfies gaming and high‑definition video needs while remaining pocket‑friendly.
Efficient Learning & Work : Full‑screen immersion and flexible drag‑and‑drop improve productivity.
Visual Enhancement : More diverse information display and richer visual interaction.
Multi‑Task Experience : Simultaneous multi‑window operation when expanded.
Pain Points
Screen Ratio Issues : Video playback often shows large black bars due to mismatched aspect ratios.
Poor System UI Adaptation : Apps not optimized for the narrow outer screen result in tiny fonts and reduced usability.
Complex Interaction Hierarchy : Deep menus and massive content portals can confuse users during cross‑screen interactions.
Design Entry Points for Foldable UX
Foldable devices have two distinctive traits: they can be folded/unfolded at any time, and the screen size expands dramatically when opened. Designers should address the following concerns:
1. Readability
Two hinge types exist:
Seamless hinge : Almost invisible; avoid placing critical UI elements within the central 48dp area where the hinge may cause visual artifacts.
Visible hinge : Physically separates the device into two screens; treat it as a functional gap.
2. Accessibility
When unfolded, the top 25 % of the screen may be hard to reach for many users. Designers should limit interactive elements in this region and avoid placing essential controls near the bottom edge.
2.1 Clickability
Four scenarios illustrate reachability:
Users can stretch a finger to reach the area (some inconvenience).
Users can comfortably tap the area.
When holding the device with one hand, the area is difficult to reach.
When using both hands, the top area remains hard to access.
2.2 Scrolling
Scrolling behavior may differ between folded and expanded modes; designers can choose to scroll the whole screen together or allow independent scrolling per pane.
3. Continuity
Applications must maintain state when transitioning between folded and expanded postures, preserving input text, keyboard state, scroll position, and media playback.
4. Experience Value Add
More Content : Larger screens display more information, enabling multi‑column layouts.
Greater Immersion : High‑resolution, large‑area displays improve video, image, and gaming experiences.
Parallel Multi‑Tasking : Multiple windows can run side‑by‑side, reducing context switching.
5. Manipulation (Drag & Drop)
The expanded screen provides ample space for drag‑and‑drop interactions, with visual feedback for both coarse and precise placements.
Conclusion
Although foldable smartphones are not yet mainstream, they present a unique opportunity to blur the line between phones and tablets, offering new interaction paradigms. Designers should continue exploring content presentation and interaction techniques to address current pain points and unlock the full potential of foldable devices.
References:
Huawei Foldable Design Guidelines: https://developer.huawei.com/consumer/cn/doc/90101
Google Foldable Design Guidelines: https://m3.material-io.cn/foundations/adaptive-design/foldables/overview
Zhaori User Experience
Zhaori Technology is a user-centered team of ambitious young people committed to implementing user experience throughout. We focus on continuous practice and innovation in product design, interaction design, experience design, and UI design. We hope to learn through sharing, grow through learning, and build a more professional UCD team.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.