Device modes

Dual-screen devices can come in a range of hardware and industrial design variations. The recently released Surface Duo, along with other planned devices, are intended to help define the category, but other devices may come with larger displays or varying hinge designs. As you design your apps, keep in mind that you should avoid designing to the specifications of any specific devices available today.

All dual-screen devices can fold, flip, and rotate. Both screens can be used as displays, or one screen may act as a keyboard. The different form factors support a wide variety of activities and allow the user to fit the device to their situation. By taking advantage of the various modes with your app, you will help your users achieve more.

On this form factor, applications can reside on one side, or can be spanned across both display regions. An app or a website that responds to this spanned state integrates with the semantics and intent of logically splitting the presented content.

Spanning modes

When a single app is presented across two screens, we say it is spanned. How your app responds to being in a spanned state can have a great impact on the user experience. The unique modes that a dual-screen device enables may unlock unprecedented ways your app can be used. For example, devices that have seams down the middle lend themselves well to productivity scenarios that benefit from the compartmentalization of content.

Users are empowered to have full control over how they use your app, including when they want to span your app. Some apps, like calculators, may not look great or derive any benefit from this configuration, but it's still the user's choice. However, you might decide that since most users won't choose to span your app, it's okay to not do anything to accommodate the user's action.

While spanning a dual-screen device one can try viewing the content in a variety of modes as seen here: laid flat, held like a book in their hands, laid vertically flat or laptop posture.

The spanned state should enrich the user's experience as part of the end-to-end flow of tasks they perform with your app.

Folded modes

By default, apps open in a maximized state and occupy a single screen. In dual-screen modes, users can run two apps beside each other to simultaneously compare, consume, or cross-reference content. Here the app on a single screen behaves just like any app that you come across a traditional smartphone.

In folded state, the app can take two type of orientations; Landscape orientation or Portrait orientation which is quite similar to how apps currently orient in the any single screen smartphones.