Surface Controls

The topics in this section describe some of the user interface (UI) controls that are included in the Microsoft Surface SDK or in Surface applications. Each control represents a fundamental unit of interaction that an application can bring together to compose an overall interaction scheme.

In general, direct interaction encourages designers to avoid traditional UI controls within applications. However, think of the controls in this section as fundamental interaction units, instead of as a particular visual element or metaphor. For example, the SurfaceButton control is not really a button. It is an area of the screen that a user touches to complete an action.

To create Surface experiences, you should reconsider the following fundamental ideas:

  • The select/complete cycle

  • The metaphor used to represent the control

Traditional GUI experiences use the selection/completion cycle. For example, a user selects the content or parameters and then presses a button to complete the action. A Surface application should not use this cycle; instead, the experience should be direct and immediate, so that actions complete as the options are selected. This type of design might be challenging but it creates more compelling experiences when it is completed correctly.

After you reconsider the select/complete cycle, if you determine that an application still needs, for example, a SurfaceButton control, you should consider the underlying metaphor that the button uses. The metaphor of a button that produces an action is useful because it translates to a real-world interaction. However, it is not the only viable option. As you build experiences for Surface, do not limit your thinking to the mechanical metaphors that traditionally are mapped to UI controls.

Alternative Designs

Each topic in this section describes the interaction unit that the control provides, the elements of its behavior, and which parts you can modify. Several controls also include alternative designs, which avoid using the control to create a more compelling experience for Surface. In some cases, the alternate design does not cover all situations in which the fundamental unit of interaction might be required. When you find such a limitation, try to extend the alternate designs or build interaction schemes for the Surface experience. Traditional UI controls should be a lesser alternative.

Redesigning Existing Controls

The Surface SDK controls provide a default visual design but they enable maximum flexibility so you can apply a custom visual design and maintain the underlying behavior of the control. The Surface SDK and Microsoft Windows Presentation Foundation (WPF) provide a lot of flexibility if you want to define the visual look-and-feel and behavior of each control.

If you redesign existing controls, consider the following design recommendations:

  • The Surface experience uses direct and natural manipulation so users can interact directly with content, so the experience minimizes the number of traditional GUI controls or desktop computing frameworks. Keep visible controls to a minimum, and always think about how users could accomplish tasks by interacting with content directly.

  • Surface SDK controls should be neutral in tone and branding, should have a minimal impact on the user experience, and should complement almost any content or color scheme. If you redesign any controls, keep the understated minimalism of the controls so a user's attention is captured by the actual content. Do not let the ornamentation, texture, or color of a control draw attention to itself.

  • Use animations, transitions, effects, and other details for interaction feedback and to communicate the state of a control to users. Use detailing, glows, illumination, movement, or other visual ornamentation to respond to a user's gestures. This style helps make the Surface experience feel aware and responsive.

  • If a user needs a set of controls to complete a task (such as a multistep questionnaire or a sequence of inputs), phase the appearance of these controls over time, whenever possible. This way the experience is "scaffolded," progressively disclosing controls and complexity to the user over time, and not overwhelming the experience with control-heavy or input-heavy screens. Try to use smooth, seamless transitions and animations to help maintain the user's context and sense of place.

Creating New Controls

The advantage of visually redesigning an existing control is that you benefit from the research and design work in the control's underlying behaviors. This work goes beyond the basic look-and-feel and includes fine detail about some subtle behaviors. If you create new controls, carefully ensure that your designs keep with the subtle details.

If you design your own controls, you should consider, design, research, test, and implement each of the following considerations:

  • What is the fundamental interaction unit of the control? How can that unit be abstracted for reuse?

  • What are the states of the controls for each of the various touch-state combinations?

  • What is the model for how the control interacts with multiple fingers? How does that model fit with the application's overall model and with the Surface team's models and other companies' models?

  • Does the new control comply with the Surface design principles?

The Surface Design Guidelines include additional considerations that apply to the design of new controls, including the following items:

  • New controls should support the display and direct manipulation of content as a substitute for more traditional GUI-style controls. Controls should be "superreal" objects that hold directly interactive content, react with realistic physics, and exhibit unexpected behaviors that are discoverable, repeatable, and natural.

  • Use simplicity and understatement for the visual design of new controls. Controls should support content, not distract from it, so the most minimal design approach is often the best one. This approach also helps make new controls flexible, reusable, and easily customized.

  • Regardless of what the new control does, if it looks like content and reacts sensibly to a user's touch (hopefully revealing or exposing something about itself or how it can be interacted with), the user will consider it content and will not need other visible controls.

  • Avoid simply adding touch to existing controls from related frameworks, such as WPF. Existing controls might perfectly support desktop GUI frameworks, but they rely on large amounts of visible indirect controls, which is not an ideal Surface experience. The ideal Surface experience should be completely free of indirect controls, enhancing enjoyment and exploration.

  • Be creative in eliminating unnecessary controls. You should reduce "interface clutter" and find innovative ways to let content be the interface itself. For example, consider how object recognition can facilitate authentication or text input. Think about how users can trade and shuffle controls between themselves to reduce duplicate controls (for example, a shared set of options at the center of the application rather than individual controls for each user). Be bold, reductionist, and clever.

In most situations, you can adopt Surface SDK controls to meet your needs. When you consider these existing SDK controls for various uses, limit your thinking to the abstract role and purpose of the control and do not be limited by the particular look-and-feel or functional mapping that are included in the Surface SDK and sample applications.

Did you find this information useful? Please send us your suggestions and comments.

© Microsoft Corporation. All rights reserved.