Table of Contents


Overview

The 360-degree, multiuser interface of the Microsoft Surface poses unique challenges when you consider how to position visual elements on the Surface screen. In most Surface applications, any user from any side should be able to read, understand, and interact with any object on the screen at any time.

The Surface screen has no true absolute direction. That is, depending on the application, any side of the Surface unit could be the top, bottom, left, or right. When you design a Surface application, you should think in terms of each object’s relative position to each user, and how objects might be rotated or positioned towards or away from a user.

You should keep these principles in mind to position and orient on-screen objects in such a way that users can easily recognize them from any angle. If users can move an object, its form and design should indicate that capability to any user, on any side of Surface unit.

1. Application Orientation

When a Microsoft Surface application opens, make sure that its default orientation benefits users on all sides of the unit.

You can achieve this ideal situation in two ways:

  • If an application must face one particular direction, it should orient toward the access point that opened it or follow the same orientation as Launcher. For example, you should orient applications that include tasks that require immediate text entry, such as logging on, in a way that facilitates easy access to the relevant controls, such as an on-screen keyboard.

    The following illustration shows the typical sequence when a person starts to use Surface, moving from the attract application, to Launcher (oriented based on which access point has been touched), to a specific application (oriented in the same direction as Launcher).

    Water attract application

Launcher with several applications

An example of the card screen

  • If users can freely orient an application’s objects from any side of the Surface unit, you should orient those objects in a sensible manner that enables users to change those orientations later. For example, if the application displays photos over the Surface screen toward all users, the application should orient some photos toward each side of the screen. That way, anyone on any side of the screen can see some photos directly and can freely manipulate them.

    For example, while the Photos application seems to arbitrarily distribute photos across the screen, careful inspection reveals that the photos near the edges of the screen are oriented in such a way that any user will at least have some photos that are “right-side up.”

    Photos - Loading transition

 

Choosing Orientation and Layout

Should
  • For multiuser experiences, plan default object locations and orientations for a 360-degree orientation. Each side of the screen should have content facing it.

  • Allow users to freely switch from less-structured content viewing (using controls like ScatterView) to highly structured content viewing (using controls like stacks and scrollers).

Could
  • Look to other media for layout inspirations. Photography’s “rule of thirds,” for example, can help add interest and drama to full-screen layouts that do not have any specific orientation.

2. Gridless Layouts

Many visual designers create layouts based on grids. However, the 360-degree nature of Microsoft Surface does not always lend itself to grid-based applications and requires a new perspective on visual layout.

For example, you can create a gridless screen-wide layout by using the Microsoft Surface SDK ScatterView control. It encourages users to organize and explore the content in their own way. ScatterView acts as an invisible container for objects that would otherwise just sit on a tabletop. You can use it to orient some content toward the each edges of the screen, which offers users a natural, direct, and immediate experience (unlike productivity-oriented software) that encourages curiosity and exploration.

Photos - Fingers resizing image

Not all layouts have to be gridless. For example, the Photos application uses the scroller control to enable users to enforce an order on content so that they can sort, filter, and organize it. You can use layout grids modally and let users switch between different visual organization methods as they choose.
 

Scroller - Example 
 

Choosing Orientation and Layout

Should
  • For multiuser experiences, plan default object locations and orientations for a 360-degree orientation. Each side of the screen should have content facing it.

  • Allow users to freely switch from less-structured content viewing (using controls like ScatterView) to highly structured content viewing (using controls like stacks and scrollers).

  • Provide a way for users to reset gridless layouts to their default states. If users lose their sense of place in a free-form, gridless experience, they should have an easy way to regain their bearings and continue.
 

3. Gridded Layouts

Despite the multiuser, 360-degree Microsoft Surface experience, you can still use gridded layouts for some applications. For example, gridded layouts might make sense for productivity applications that users use to sort data linearly, and gridded layouts can help create a visual rhythm to certain screen states. You can think of layout grids for Surface applications as either global (screen-wide) or local (within an object, piece of content, or a control).

  • Global grids determine the arrangement of content and controls screen-wide. While this type of layout enables a user to easily scan and organize content, the layout also orients the entire interface toward one side of the screen and limits the potential for collaboration with other users. If you lay out elements on a global grid in your Surface application, consider how users on all sides of the Surface unit will perceive the content and controls.

    Global grids can also make controls accessible to each user or to each side of the Surface screen. For concurrent, collaborative experiences, each user will need a separate set of controls either to facilitate real-time interactions or to prevent situations where multiple users try to access a single control. For example, if multiple users are playing a card game, each user should have a separate hand of cards and controls to draw, discard, or request a new deal.

    However, collaborative action that does not require simultaneous input from multiple users works best with only one set of controls. For example, if multiple users were to act together to create a playlist in a jukebox application, multiple controls could make it difficult (for the users and the application) to keep track of who added which songs to the playlist and in what order.

  • Local grids apply to the layout of specific objects, not to the entire screen. They give structure to controls and content and help make them more usable and easier to scan. Users should be able to easily drag and rotate items that are most usable from one orientation (such as list-view controls) and text-heavy content, so that they can use them effectively from any position around the Surface screen.

    For example, the layout of the Concierge application is free-form and gridless. Each element is carefully composed with a local grid to facilitate visual scanning and to create a rhythm of information from object to object.

    Concierge - Card screen with category open

 

Choosing Orientation and Layout

Should
  • Always look for opportunities to move away from global gridded layouts to ensure that users can read and use applications from any side.

  • For multiuser experiences, plan default object locations and orientations for a 360-degree orientation. Each side of the screen should have content facing it.

  • Always consider multiple users on all sides of the screen when you design by using a global grid system. A perfect layout for one user may make an application more difficult to use in a multiuser situation, which can reduce the opportunity for collaboration.

Could
  • Use local grid systems within (and between) controls and content so that each on-screen object shares similar visual spacing and rhythms. Ensure such controls have obvious affordances for users to drag, rotate, and scale them as appropriate.