Microsoft Surface 1.0 SP1: UX Guidelines - Shape and Form - TechNet Articles - United States (English) - TechNet Wiki

Using Shape and Form

Overview

To make content the interface of your Microsoft Surface application, use shape and form to provide clues that help users anticipate the function of Surface objects. Properly define the vocabulary of shapes and forms to improve the quality of the overall Surface experience.

Edges and Corners

In Surface applications, volumetric, organic shapes can be friendlier and more approachable than rectilinear forms. Rounded corners and flowing edges make users think that objects are free-floating and that they can drag and rotate the objects as they see fit.

In the following image, each control uses rounded, organic forms and subtle shading to appear enticing, approachable, and interactive, while keeping its actual interface elements minimal yet discoverable.

Still, some objects should retain sharp edges and rigid lines of their real-world equivalents, such as photographs and CD jewel cases, to help users quickly recognize them and understand their function. In cases where Surface objects mimic their real-world equivalents, you should incorporate pleasantly surprising super-realistic enhancements and features.

In the following image, the interface elements behave and appear like large cards, and they appropriately mimic real cards with straight edges and bright surfaces.

Consistency is vital in determining shape and form. If a control within an application has a rounded header that users can touch and drag, regions or objects with similar properties should have a similar look and feel.

Line Work

The 360-degree nature of Microsoft Surface applications requires special consideration when it comes to line work. Users should be able to freely orient, rotate, scale, and move all objects. This flexibility can cause thin lines to appear ragged, soft, or uneven. Thicker lines tend to look better from all angles, while thinner ones can develop visual artifacts like “stair-stepping” at certain angles. For this reason, line work should generally be at least two (2) pixels wide.

Using Shape and Form

Should

Use rounded forms, which generally help to improve approachability, evoke organic shapes, adjust user preconceptions, and appear more malleable than rectilinear forms.
Ensure that interactive objects have some sense of volume relative to naturalistic representation. For example, a photograph should not have volume because its real-world counterpart has little to no volume, but the photo could have shaded corners if a user flipped it over. On the other hand, a critical gadget that has no real-world equivalent and acts only as a virtual device should have some appearance of volume.
Let the form imply the function. Ensure that interactive objects appear to float, have affordances for users to drag or rotate them, and so on. Use shape and form consistently when you develop these form-function relationships. This approach ensures that users can use gestures to consistently achieve predictable and repeatable results.
Avoid rigid or sharp forms unless the object you design has those characteristics in the real world. Do not overlook the principles of super-realism.
Keep line work to a two-pixel minimum width for best results when users rotate or scale objects.

Microsoft Surface 1.0 SP1: UX Guidelines - Shape and Form - TechNet Articles - United States (English) - TechNet Wiki

Table of Contents

Overview

Edges and Corners

Line Work

Using Shape and Form