top of page

Designing Effective User Interfaces for Foldable Devices



Overview


The rise of foldable devices has brought a new dimension to the mobile market, offering users a versatile device that combines both portability and functionality. Nevertheless, the design of an effective user interface and user experience for foldable devices poses novel challenges.


At TecAce, we recognize the importance of delivering exceptional user experiences to our customers, which is why we have conducted extensive research to identify key considerations for designing foldable device interfaces.


In this research, we delve into the fundamental design factors for foldable devices, including screen size, app continuity, and user interaction patterns. By examining these factors, we aim to optimize our product designs to ensure that our customers receive the best possible user experience.


Screen Flexibility



The emergence of foldable phones has introduced a new dimension to mobile technology. With a larger screen that represents almost 80% of the device, the screen is the main feature of foldable phones. Today's smartphones commonly use the 16:9 or 18:9 aspect ratio for on-screen entertainment, while tablets often use the 4:3 ratio for wider visual delivery. In contrast, foldable phones have different aspect ratios that vary based on the device's different conditions and functions.


To design foldable phones, it is essential to consider the different screen modes, such as folded, half-folded, and unfolded, and ensure that the app's interface and content adjust dynamically to different screen sizes, aspect ratios, and orientations. By designing for seamless transitions and using responsive design techniques, you can create a great user experience for all users, regardless of the device they're using.


Responsive and Adaptive Design



Designing apps for foldable devices requires more than just responsive design. While responsive layouts can adapt to a variety of display sizes, including the folded and unfolded screens of a foldable device, the differences in screen size and aspect ratio can be significant. In such cases, adaptive design is necessary to create alternative layouts optimized for different screen sizes and configurations.


Adaptive layouts provide an optimized user experience when a foldable device is folded or unfolded, in portrait or landscape orientation, or tabletop or book posture. For example, a large-screen foldable device unfolded in landscape orientation is like a tablet, and a two-pane layout with a navigation rail makes excellent use of the wide screen.


Folded, the device is like a standard phone, and a single-column layout with a bottom navigation bar is simple but effective. By creating separate layouts for each use case, you can optimize each layout for its specific purpose. This approach ensures that your app looks and works great on any foldable device, regardless of its screen size or configuration.


Supporting foldable devices requires a combination of responsive and adaptive design. Responsive layouts provide flexibility, but adaptive layouts are necessary to optimize the user experience for different screen sizes and configurations. By using both techniques, you can ensure that your app looks and works great on any foldable device.


App Continuity



When a device folds or unfolds, an app may stop and restart as it transitions between screens. To ensure a seamless user experience, the app needs to restore its state and maintain continuity across different screen layouts. Here are some ways to achieve this:


  • Save any text that the user has typed into input fields so that they can resume their work without losing progress.

  • Restore the keyboard state to ensure that any changes made to the keyboard settings are preserved across screen transitions.

  • Keep track of the scroll position of any scrollable fields, so that the user can easily pick up where they left off.

  • If the app was playing media before it was stopped, it should resume playback from where it left off.


In addition to preserving the app state, it's also important to make sure that the different screen layouts on foldable devices complement each other. For example, if the app displays an image and description of a product on the folded screen, it should continue to show the same image and description on the unfolded screen, along with additional content such as product specifications or reviews. By doing so, the app can provide a consistent and seamless user experience, regardless of the screen size or orientation.


Usability and Accessibility




In traditional single-screen mobile devices, most users are accustomed to operating the device with one hand. However, with foldable devices, this changes as the unfolded state typically requires two hands to operate the device effectively. Even the process of unfolding the device itself requires the use of both hands in current devices. This state change can have significant implications for the user experience, particularly when it comes to usability and accessibility.


To address these challenges, designing for foldable must consider the implications of the change in different states. It should strive to create interfaces that are accessible and user-friendly for all users, regardless of their physical abilities or preferences. This could involve implementing features such as a one-handed mode, which can make it easier for users to operate their devices with one hand. Additionally, designers should consider the placement of critical UI elements, such as buttons or controls, to ensure that they are easily accessible to all users.


Overall, designers must consider the impact of the change in state on users with different physical abilities and preferences when designing foldable devices. By doing so, they can create interfaces that are inclusive and accessible to all, ultimately enhancing the user experience for all users.


Multitasking



To make the most of the larger screen size on foldable phones, it's essential to design for multitasking. This can involve incorporating features such as split-screen, resizable elements, and drag & drop interactions between apps. By enabling users to interact with multiple apps simultaneously, designers can enhance productivity and make it easier for users to accomplish multiple tasks at once.


App pairing is another key feature that can help users multitask on foldable devices. By allowing users to pair two apps together, designers can create an environment where users can work with two apps at once without the need to constantly switch between them. This can be particularly useful for tasks such as taking notes while reading an article or responding to messages while watching a video.


Overall, designing for multitasking on foldable devices is essential to make the most of the larger screen size. By incorporating features such as split-screen, resizable elements, and drag & drop interactions between apps, designers can help users work with multiple apps simultaneously and enhance their productivity.


Navigation and Interactions



When designing apps for foldable devices, it's important to consider how users will interact with the app in different screen modes. This means optimizing touch targets, gestures, and navigation patterns to accommodate different postures and hand placements.


For example, users may be holding the device with one hand in the folded mode but using both hands in the unfolded mode. Designers should consider how these different postures and hand placements will affect the user's ability to interact with the app and adjust accordingly.


Visual cues and feedback are also essential when designing foldable devices. With multiple screens and modes available, it's important to guide users in navigating between them. This can involve incorporating visual cues such as arrows or animations to indicate where to swipe or tap to access different modes or screens.


Hinge and Device Awareness



Be mindful of the hinge and device position. Designers should consider how the hinge affects the user experience and ensure that the hinge's status, battery life, and system information are visible. This can involve providing visual cues or notifications to indicate the hinge's status and other important information.


It's also crucial to avoid placing critical UI elements near the hinge or fold. Doing so can cause usability issues and make it difficult for users to access important features. Designers should carefully consider the placement of UI elements and ensure that they are easily accessible and visible, regardless of the device's position or hinge status. By doing so, designers can create a more user-friendly and accessible experience for foldable device users.


Consistency



Maintaining consistency is key when designing foldable devices. It's important to ensure that the overall visual design, brand identity, and interaction patterns of your app remain consistent across different screen modes and devices. This ensures that users have a seamless and cohesive experience as they transition between different states of the foldable device.


Inconsistencies in design or branding can lead to confusion for users and make it difficult for them to navigate your app. It's important to maintain a consistent look and feel, regardless of the device's state or screen size. This involves carefully considering how elements like color, typography, and layout will appear in different screen modes, and adjusting as needed to ensure a cohesive experience.


By maintaining consistency in your app's visual design, brand identity, and interaction patterns, you can create a user-friendly and accessible experience for foldable device users. This will help to ensure that users can easily navigate your app, regardless of the device's state or screen size, and enjoy a seamless experience throughout.


Foldable UX/UI Checklist



Download the checklist:



Comments

bottom of page