Microsoft wants developers to optimize their apps for these dual-screen patterns

Microsoft today revealed details about how dual-screen devices create an opportunity for developers to create new innovative app experiences. Microsoft demoed three dual-screen patterns: expansive workspaces, focused screens, and connected apps.

1) Expansive workspaces.  It is the simplest dual-screen pattern that allows developers to show more detail as their app spans across two screens and allows them to highlight their content on a bigger, more expansive, canvas. Map apps, drawing canvas apps are some of the examples that can take advantage of this pattern. Whether users are reading an article, scrolling a feed, or browsing a gallery, having more real estate helps them to see more of app’s content.

2) Focused screens. This pattern allows you users to see the app on one screen and the tools on the other and stay in your flow. The companion pane pattern allows apps to take advantage of dual-screen real-estate by taking second-level surfaces that are otherwise hidden and exposing them when the app is spanned. For example, consider an image editing tool, the image preview will appear in one screen and all the available tools will be available on the other screen. Or in the case of a game, you can have controls on one screen and the actual game play on the other.

3) Connected apps. Your work flows naturally for app-to-app launches, or if your app opens a new window – content will be placed naturally across screens making side-by-side comparisons and multi-tasking easy and natural. For example, you have a list in your app, when a user taps an item in the list, the details about the item can be displayed on the other screen. In the case of Mail app, you can have the preview of the selected mail in second screen.

Microsoft is providing these patterns as an example for developers. Developers can create their own design pattern that takes advantage of dual screens.

You can learn more about developing for dual-screen devices here.

Leave a Reply

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}