SurfaceButton Control



A SurfaceButton control is a region of the screen that has been labeled with a command. When a users touches the control, the button command runs. The SurfaceButton control provides a physical clue to an action when the action is not clear otherwise, and it provides a focal point for interaction, with a clear and well-understood metaphor.

SurfaceButton - Example

An example SurfaceButton control

Proper Usage

You should use SurfaceButton controls to initiate an immediate action. With the principle of direct manipulation, use SurfaceButton controls only when a direct and physical interaction is not apparent or appropriate to initiate an action.

The action that is associated with a SurfaceButton control starts when a user's finger touches a button on the Microsoft Surface screen and removes it. This action should not start before the user's removes the finger and should not occur at all if the user's finger slides off the button before removing the finger from the screen. This design enables the user to reconsider, and possibly cancel, the action before continuing.

The following figure shows a good example of a button in the Microsoft Surface Music application. When a user taps the album cover, the album flips over to display the song list. A SurfaceButton control covers the entire top of the song list, blending it among the content. When a user touches the top, it grows like it's moving towards the user, demonstrating that the contact is received. When the user removes the finger, the album flips back to the album cover.

SurfaceButton - Design example to turn album over

A user taps the cover art and the album cover flips over to the song list

SurfaceButton - Design example to turn album back

A user taps the SurfaceButton control at the top of the song list and the album flips back over to show the cover art

Detailed Description

SurfaceButton controls complete immediate actions, such as beginning a process or submitting a form. They are not for other purposes, such as setting parameter values or states.

You can use text or icons for the labels on a SurfaceButton control. There are four states of SurfaceButton, which you can easily assign different visual designs. The following table describes each state of SurfaceButton and shows the default visual design in the Microsoft Surface SDK.

 

State Description Default visual design

Enabled

The default state for a button. A user is not touching the button, but it is available for input.

The visual design for this state includes:

  • No glow effect on the border.

  • Darker text (grayed out).

  • No background gradient.

SurfaceButton - Enabled state

Disabled

The button is not available for input. If a user contacts the button, no action is taken.

The visual design for this state includes:

  • No glow effect on the border.

  • Darker text (grayed out).

  • No background gradient.

SurfaceButton - Disabled state

Captured

A user touched the button and then dragged away from the button, or a user touched the screen outside of the button and then dragged over it. Typically, do not use this state to initiate actions.

This state does not include a visual effect.

SurfaceButton - Captured state

Pressed

A user initiated contact on the button. Typically, do not use this state to initiate actions.

The visual design for this state includes:

  • A glow effect on the border.

  • Grayed text color.

  • Grayed background.

SurfaceButton - Pressed state

Multitouch Behavior

Users can use multiple inputs when they are interacting with a button. The control state changes from the default state to the pressed state when the first contact touches the button. As subsequent contacts touch the button, no additional action is initiated. The action that is associated with the SurfaceButton control initiates when the last contact that is captured to the control removes from the screen while it is still inside the control.

Customization

You can customize the interactive behavior and the visual design of SurfaceButton controls.

Behavioral Customization

You can customize how a SurfaceButton control is invoked. Typically, the command runs when a user releases the button after having touched it. This behavior is the preferred behavior. Alternatively, you can start the command when a user first presses the button, when a user's finger slides off the button, or when a user's finger slides (hovers) over the button without first touching it. In most situations, users prefer to start the action when they release the button because it enables them to cancel their action by sliding off the button.

Some applications, such as the Grand Piano sample application, require a modified behavior to achieve the desired result. The keys are SurfaceButton controls that also activate when a finger slides onto them, creating a more realistic keyboard.

a4103014-0567-4888-b85c-de5a40ce4202

The Grand Piano SDK sample application

Visual Customization

You can change all visual elements of a button, such as its shape, colors, visual appearance in each of the states, and transition animation. In the Grand Piano sample application (from the earlier figure), each key is a SurfaceButton control with its shape and visual appearance modified.

Make sure that any changes to the visual appearance continue to enable users to touch the control. While the piano keys in the earlier figure do not resemble default SurfaceButton controls, user still clearly understand that they are interactive.

Another example of custom buttons is the Launcher menu, as the following figure shows. In this situation, the content of the SurfaceButton buttons is modified to show an animation of the application that they represent, and their size depends on their on-screen location.

Launcher - Close-up example

Selecting an application from Launcher

In addition to the content animation, the buttons are inside a SurfaceScrollViewer control, and the size of the button and space between buttons depends on its position on the screen. This design creates a focal point and allowing for larger buttons without the need for a user to first manually select the button from the list.

Design Recommendations

If you use SurfaceButton, we recommend that you adhere to the following guidelines:

Behavioral Design

The following list includes some behavioral design recommendations:

  • The Microsoft Surface SDK prescribes the interactive behavior of a SurfaceButton control. Although you can create a replacement control that mimics some subset of the included behavior, we highly recommend that you do not do this. In almost all situations, you can achieve the desired behaviors and appearances by replacing the visual design of the button, instead of replacing the entire button.

  • Display appropriate graphics if the SurfaceButton control result does not instantaneously happen. Without feedback, users might assume that the selection did not happen and they might touch the button again. This confusion is also true with traditional computer interfaces, but it is especially true on Microsoft Surface because the vision system produces a higher error rate for input recognition. Ideally, any graphics that you add should occur within the SurfaceButton control itself, to keep with direct manipulation.

Visual Design

The following includes some visual design recommendations:

  • Ensure button labels are clearly legible. Remember that users might need to touch buttons that are not oriented towards their position around the Microsoft Surface screen. Likewise, button controls are usually embedded in (or represented as) other objects or content that users can move or rotate away from their original orientations. Make sure that you follow proper typographic guidelines when you are typesetting button labels—use strong sans-serif typefaces, make button labels at least 12 pixels in height, and ensure that the label is legible from all angles and sizes (if the button or its parent object is scalable).

  • Use richly formatted content as buttons themselves. Buttons do not always need to be discrete visual objects, so always look for opportunities to use content itself as a button. Be sure to balance this simplicity of form with clarity of function; the visual minimalism of a button must always be balanced with how predictable or natural its response or result will be.

  • Ensure that buttons are the appropriate minimum size for easy interaction. Be sure that all button controls are not less than 30 pixels wide (the minimum size of a touch gesture). The larger the button, the easier it will be to touch, and the easier its label will be to read.

  • Volume is good, but avoid directional button movements. While you can have buttons that are volumetric to encourage touch and interactions, do not make buttons appear to physically depress below the plane of the Microsoft Surface screen. Also, avoid any visual movements with perspective. Some users will see this movement from the wrong angle and it will look incorrect, disrupting the suspension of disbelief. Instead, illuminate from within to indicate toggle-state or reaction.

  • Typically, embed controls within the content of an application, instead of appearing alongside it as a separate visual element.

Alternate Designs

You can create many visual designs for SurfaceButton controls by using the wide array of alternative design visuals for Microsoft Surface SDK controls. In general, we recommend that you do not use SurfaceButton controls for many Microsoft Surface experiences. For example, consider the selection of a song to play from an album. Under a traditional scheme, a user might select a song from the list and then press a Play button. In a Microsoft Surface experience, the user would simply select their desired song from the list.

SurfaceButton - Design example with songs on an al

A user selects a song and it plays immediately in a music application

In general, activation and the mapping of functionality directly onto the content is desired, in favor of separating the object from the SurfaceButton causing it to perform an action.

Examples

You can modify the visual design of SurfaceButton controls. For example, access points non-square buttons with an animation that occurs when users touch them.

Access points - SurfaceButton example

An access point

The Launcher menu uses SurfaceButton controls to demonstrate applications to user and to enable users to select an application. The following figure shows the modified buttons in Launcher that include animations that demonstrate the functionality of each selected application.

Launcher - Close-up example

Selecting an application from Launcher

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

© Microsoft Corporation. All rights reserved.
Show: