Snapsible — Data Visualization Exploration for Foldable Screen Displays
By: Mehul Shah
Tags: UX Design, New York, Interaction Design, Foldable Phone, UX Research

Experience Design Details

User Interface

Snapsible leverages the dual-screen smartphone displays which have the capability of folding into two equal halves. This interface allows users to interact with either one of their rear screens or the entire unfolded display. This device can be used in one hand much like how they currently use their smartphones when it’s in the folded state and with both their hands when they seek to perform more actions by unfolding the display to gain a larger screen real-estate. These multiple states of the display allow users to interact with visualized data in different ways. Each state supports certain types of interaction with both graphs and other users.

Folded and Unfolded states of the device

Characteristics of effective graphical displays

Before describing certain Snapsible interactions and gestures, it is necessary to understand the main qualities of effective graphical displays. Professor Edward Tufte explained that users of information displays are executing particular analytical tasks such as making comparisons. The design principle of the information graphic should support the analytical task.[1] In his 1983 book The Visual Display of Quantitative Information, Edward Tufte defines ‘graphical displays’ and principles for effective graphical display in the following passage: “Excellence in statistical graphics consists of complex ideas communicated with clarity, precision, and efficiency. Graphical displays should:

Show the data

Make the viewer think and focus on the substance, rather than on methodology, graphic design or technology

Avoid distorting what data really reflects

Present a lot of numbers in a limited space

Make even large data sets coherent

Encourage exploration and comparison of different data pieces

Reveal the data at numerous levels of details, give multiple view perspective

Have fine and structure

Serve a clear and reasonable purpose (description, exploration, decoration, etc.)

Integrate closely with both statistical and verbal description of data

Graphics reveal data. Indeed graphics can be more precise and revealing than conventional statistical computations.”[1] So these characteristics were taken into account while designing Snapsible.

Device Orientations

Unfolding the device to provide a larger screen can have a positive impact on users:

A larger screen real-estate usually means a more immersive experience.

With multi-windows the user can perform multiple tasks at the same time.

With docking, mode users can interact with another user with two rear screens.

Folding and unfolding can change the screen size, density, or ratio.

This is not a new problem and already happens in these non-folding cases:

Phones: switching between portrait and landscape mode.

Chrome OS running in desktop mode: resizing Android apps.

Devices with multiple or additional screens.

Continuity

Folding states of the device

When exploring data on a foldable device, Snapsible can transition from one screen to another automatically.[3] To provide great user experience, it is very important that the current task continues seamlessly after the transition and resumes in the same state and location. Following are the different states a foldable device can fold, such as in or out:

New Screen Ratios

Android 10 (API level 29) and higher support a wider range of aspect ratios.[3] With Snapsible, form factors can vary from super high long and thin screens (such as 21:9 for a folded device) all the way down to 1:1.

Device screen ratios

Multi-window

Being able to run multiple windows is one of the benefits of larger screens. In the past, having two apps side by side was common in some devices. With the advancements in technology; three or more apps can run on the screen at the same time, and also share content between themselves:

Multi-window screen

Resizing Windows

Snapsible ensures that it works in multi-window mode and dynamic resizing.[3] This is achieved by setting resizeableActivity=true which provides maximum compatibility with whatever form factors and environments it might encounter (like foldables, desktop mode, or freeform windows).

With AOSP (Android Open Source Project) emulator providing support for folding devices. To provide the best experience we test Snapsible in their specified folding scenarios.[3] Such as the mentioned 7.3” and 8” emulators below:

Screenshot of Android Virtual Device selection on Android Studio

If we set resizeableActivity=false, this tells the platform it doesn’t support multi-window. Then Snapsible may still resize your app or put it in multi-window mode, but compatibility is implemented by applying the same configuration to all the components in the app (including all of its Activities, Services, and more). In some cases, major changes (like a display size change) might restart the process rather than change the configuration.

Once resizeableActivity=false is set along with a MaxAspectRatio and the device running Snapsible is unfolded, the activity configuration, size, and aspect ratio are maintained by putting Snapsible in compatibility mode.

If we do not set resizeableActivity, or set it to true, the system assumes Snapsible fully supports multi-window and is resizable.