Microsoft Surface 1.0 SP1: UX Guidelines - Introduction
Overview
Microsoft Surface
introduces a new relationship between people and technology, one that unfolds intuitively through the natural input of human touch. This relationship appears in space and form by paying attention to design.
To design compelling Surface 1.0 experiences, you should think differently about the user interface (UI) than you do when you create traditional graphical user interface (GUI) products or Web experiences. If you are accustomed to working in the mouse-based
world of GUI applications, you must consider many issues when you create applications for a multitouch system like Surface. For example, because Surface is a multiuser system, each user should be able to act independently yet simultaneously, so you cannot
just enable users to click a tool that applies to all contacts on a Microsoft Surface unit.
These guidelines can help you develop and design high-quality applications and user experiences that make the most of multitouch interaction principles. The
2 Interaction Design Guidelines section describes the core principles for optimal user-interaction paradigms in multitouch applications developed for Surface and provides basic
guidelines for when and how to use those principles. The other sections provide the principles for visual and textual design together with practical guidelines for implementing them.
These guidelines represent what the Surface team has learned over the last several years and are not exact specifications of Microsoft Surface applications. Instead, the guidelines include approaches to design great Surface experiences so that you can create
applications that demonstrate the Surface promise of a natural user experience.
Touch and Multitouch
The primary mode of user interaction with Microsoft Surface is “natural” and “intuitive” touch. A good Surface application stimulates people’s interest and offers a fun, engaging experience without intimidating them. Whether the application is a game, one
that involves a task (such as ordering food from a menu or making a reservation or ordering tickets), or just a playful or entertaining experience (such as the Water attract application or Photos application), the users’ hands go immediately to the Surface
screen and they just “know” what to do.
Interacting with Surface is as simple as touching. Users gain confidence and gradually try more interactions, from one finger to multiple fingers. Microsoft Surface is a multitouch platform that users can approach and use from any side. While you can create
more traditional applications that orient to one side, Surface offers the unique feature of a 360-degree user interface without any fixed top, bottom, left, or right.
Multitouch also means that multiple people can use a Surface unit at the same time. Microsoft Surface can also respond to physical objects placed on it and offers a significant opportunity to facilitate social interaction among users.
Users can use their entire hand to interact with Surface. It can sense and respond to large contacts.
Users can use gestures to interact with Surface. They can brush or move their fingers or hands across the screen and see that it responds to more than just a stationary touch. Microsoft Surface facilitates a social experience after a second or third person
joins in.
Microsoft Surface responds to objects. In the default Water attract application, when someone places an object on the screen, water ripples will bounce off the object.
Keep these key points in mind:
- Microsoft Surface can recognize and respond to more than 50 discrete simultaneous contacts.
- You can design a Surface application for one person or for multiple people to use simultaneously. (In many cases, the same application can do both.)
- A Surface application can have a top and bottom, but it can also have a 360-degree orientation so that users can approach the unit and use the application from any side.
- Surface applications that have a 360-degree orientation demonstrate the maximum potential of a multiuser experience.
Gesture, Manipulation, and Movements
Let’s clarify the Microsoft Surface terminology. You must understand the different things the system can do and how the guidelines refer to them.
Three Manipulation Gcontacts.
You can design a Surface application for one person or for multiple people to use simultaneously. (In many cases, the same application can do both.)
A Surface application can have a top and bottom, but it can also have a 360-degree orientation so that users can approach the unit and use the application from any side.
Surface applications that have a 360-degree orientation demonstrate the maximum potential of a multiuser experience.
Let’s clarify the Mestures
Microsoft Surface recognizes and responds to one kind of touch, which is called a
manipulation, a gesture, or a manipulation gesture.
A manipulation gesture occurs when a user puts a finger (or object) on a virtual object and changes that virtual object while the finger or the object retains its position relative to the virtual object.
For example, if the Surface screen displays a photo of three people standing next to each other and you touch the head of the person in the middle and slide your finger to right, the photo will move to the right, and the middle person’s head will stay under
your finger. Or, if you touch one finger to the upper-right corner of the photo and another finger to the bottom-left corner and then slide your fingers in either a clockwise or counterclockwise direction, the photo will rotate and your fingers will stay in
the same places on the photo.
In traditional applications, a system gesture is one in which the system recognizes a contact and runs a command that is based on that contact. A system gesture causes changes to the system state without a change in the visual representation under
a user’s finger or object. For example, a user could trace a question mark with their finger to open Help. Or, a user could put a physical object on the screen and cause virtual objects to scatter—this is a change in system state even though it has an associated
visual change. There are no examples of system gestures in the Microsoft Surface platform today.
Microsoft Surface recognizes three discrete manipulation gestures:
Movements
The Microsoft Surface SDK describes only three manipulation gestures. However, from a design and user-interaction perspective, users can make many different movements with those three manipulation gestures, which opens a world of interactive design possibilities.
The following table shows a variety of movements that a user can use on a virtual object with one finger and multiple fingers (using one or both hands).
| Movement |
Description |
|
 |
Tap
|
Press and then release
|
 |
Slide or push
|
Move the object under your finger with a sliding or pushing action
|
 |
Flick
|
Press, slide quickly, and then release
|
 |
Touch-and-turn
|
Slide your finger on the content around a point of the content
|
|
|
Twist
|
Twist the object with two or more fingers, like turning a knob or paper
|
 |
Spin
|
Twist quickly to rotate the object
|
 |
Pull apart
Stretch
|
Use two hands and move fingers away from each other
|
 |
Push together
Shrink
|
Use two hands and move fingers toward each other
|
 |
Pinch
|
Use one hand and move two fingers toward each other
|
 |
Squeeze
|
Use one hand and move three or more fingers toward each other
|
|
|
Spread
|
Use one hand and move fingers away from each other
|
 |
Pin turn
|
Use two hands to pin the object in place with one finger on one hand while the finger on the other hand drags the object around the pinned point
|
