Overview

When you design Surface applications that incorporate compelling touch solutions, you have to think about the user interface (UI) and overall graphical screen design differently than you do when you develop applications for traditional graphical user interface (GUI) products or Web experiences.

While interaction design defines behaviors, gestures, and responses, visual design brings those elements to life on the screen. Visuals for interactive, high-quality Microsoft Surface applications that respond to touches from one or multiple users differ from the visuals used in more traditional computing experiences. The final on-screen visual experience significantly contributes to user satisfaction and presents a key opportunity to emotionally connect users and Surface.

Successful visual designs for Surface applications use a design language that subtly and subliminally shows users where and how they should touch, drag, and flick objects. While visual design should add beauty and branding to the user experience, it should never distract from the content. You can create the best possible Surface experiences by focusing on solid design fundamentals that relate specifically to the unique attributes of Surface.

Just as you would when you design applications for any human-computer interface, when you design applications for Surface you should create an extensible design vocabulary with specific attributes, a language of shapes, forms, colors, and controls that help guide users through tasks to meet their goals. The guidelines in this section will enable you to make informed visual design choices that can help ensure your Surface applications meet Surface user-integration goals.

1. Consistency

Consistent visuals help users successfully interact with Microsoft Surface applications. A Surface application should use a standard set of forms, colors, shapes, textures, and other design elements, or a set of controls that helps users orient themselves and anticipate how the application will respond when they touch an object on the screen.

2. Flexibility

Users can rotate and scale most Microsoft Surface content and controls. Therefore, visual design vocabularies should be extensible and flexible and accommodate efforts to change the size and shape of objects and other elements of the user interface. You should use a design vocabulary that can extend from one control to another so that different controls will look related and harmonious.

3. Premium Quality

Attention to small details can help deliver a high-quality experience. Logical, predictable, and beautiful visuals should support every piece of content, every control, and every change in application state to maintain the context and continuity of the user experience. Attention to detail does not mean you should add nonfunctional decorations to the design, but that you should make sure that those visual details have a purpose and a consistent aesthetic.
 

4. Understatement

Microsoft Surface applications generally lack visual noise and clutter. The design of your Surface application must support the content and be beautiful, but it should not call attention to itself. Like the best music in motion pictures, the best visual designs support the users’ goals without creating a distraction.

In the following image, the photos scattered on a Surface screen encourage direct and immediate interaction because the content is the interface.
 

5. Minimalism

In a Microsoft Surface experience, the content should be the interface, so you should keep visual elements to a minimum. A “less is more” aesthetic goes a long way toward this goal. Ornaments and fine details should only support the discovery of on-screen controls and provide some clues about their function. Eliminate all unnecessary ornamentation, excessive details, and nonessential controls to let the content take center stage at all times. In this sense, “minimal” means “elegant” and “simple,” so make sure to maintain a proper sense of scale to preserve text legibility and the users’ context and sense of place in the overall Surface experience.

6. Welcoming

The visual design of Microsoft Surface applications can most influence the approachability, discoverability, and error tolerance of Surface. Colors and forms should be warm and welcoming, and erroneous or accidental touches should never cause jarring results or make users perceive a failure. A Surface experience should not create a sense of exclusivity, but instead it should provide a welcoming, inclusive, and rewarding environment.

In the following image, the Music application uses CD covers for direct manipulation and offers a friendly, approachable, jukebox-style virtual device for playback.