Microsoft Surface 1.0 SP1: UX Guidelines - Motion Design

Overview

Motion design defines how objects move on-screen and plays a critical part in Microsoft Surface applications. It provides the animations and effects that most powerfully convey emotion, action, interaction, system response to touch input, cues and invitations to explore, and screen transitions.

Motion design is never gratuitous in a Surface application. Animations should always support the content and the experience as a whole. Motion design consists of an extensible vocabulary, just like visual design. Transitions provide critical functionality clues and help users to make sense of application states. Ambient animations help to build brand and an overall sense of personality in a Surface application. No matter what the technique or effect, you should use motion design to create natural, alluring, and responsive experiences.

1. Designing Motion Design Vocabularies

Motion design should consist of an extensible vocabulary of consistent and shared behaviors, just as a visual design vocabulary builds on a library of color, shape, and typographic rules. A motion design vocabulary should create a sense of rhythm for all on-screen movement.

You can create rhythm by devising a system of consistent time intervals, which can give a perceptible rhythm to a Microsoft Surface application. For example, if objects move in intervals of 150 milliseconds, or half-seconds, pre-animated behaviors will feel consistent and predictable.

You can also reinforce rhythm by standardizing the apparent weights of objects. On-screen content and controls should feel light, buoyant, and responsive, and they should have a slight sense of weight or inertia. All animations should accelerate and decelerate (an animation technique known as easing) to convey a sense of realism. Remember to use deceleration and the edges of the screen to dampen velocity so that users cannot flick an object off the screen.

A consistent motion design vocabulary helps to make Surface interactions learnable (if animations are tied to functionality), repeatable, and predictable.
 

Using Motion, Animations, and Visual Effects

Should

Ensure that all on-screen objects feel smooth, agile, light, and flowing. Ensure that all objects that users can move, flick, and throw ease in and out of their movements. Their velocity should increase at first and decrease after the user releases it. This approach guarantees smoother and less-jarring movement. The amount of easing in can be different than easing out. Less easing makes objects seem to have less inertia, and therefore less apparent weight. Always establish a motion-design vocabulary around recognizing and rewarding any user input. Even if a touch triggers no specific event, Surface must respond visually to ensure the users stay comfortable and know that Surface has recognized their input. A lack of visual response implies a failure on the users’ part to interact with the Surface unit, which you should avoid at all costs.

Could

Use motion design as a branding opportunity. Never hesitate to interpret brand descriptors or brand attributes into movement. It can invisibly build emotional connections that are difficult (or impossible) to convey by using static imagery.

 

2. Importance of the Transition

Motion design governs how all transitions occur. Transitions help users build a context and sense of place throughout their entire Microsoft Surface experience. They help users build mental maps of their experiences, provide examples of how to use controls, and remember where on-screen objects have gone if they are moved.

Transitions act in concert to stitch together discrete moments and actions into a seamless, responsive, natural experience. In this way, transitions play an integral role in the overall Surface experience.

The following image sequence shows the importance of the transition. Seamless, immersive experiences reduce frustration by always maintaining continuity and helping users maintain a sense of place and context.

http://i.msdn.microsoft.com/dynimg/IC373541.jpg 
 

Using Motion, Animations, and Visual Effects

Should

Ensure that motion in Surface applications is never jarring, sudden, chaotic, or intense. In fact, users will create most of the on-screen movement. Just as in visual design, tasteful restraint and elegant understatement best serve the Surface user experience. Use motion design to mitigate load times or distract the user during wait states. While all Surface applications should be sufficiently performance-tuned to minimize or eliminate all system delays, sometimes a brief lag is inevitable. This fact underscores the need to create reactive, inviting, and fun Surface applications, even if that means the application provides users with an interactive distraction while they wait. Make the loading process itself interactive.

3. Latent Learning: Transitions as Affordances

U.S. behavioral psychologist Edward C. Tolman coined the term “latent learning” to describe how learning occurs passively by repeated observation. Any experience with a naturalistic user interface will take some time to learn, like any other human experience, but Microsoft Surface should enable extremely natural, rapid learning and reward exploration with constant enjoyment.

Motion design gives the designer many tools to allow Surface users to rapidly learn by passive observation without requiring explicit tutorials or demonstrations. For example, consider an application with a list box control. If the list box suddenly appears on the screen without any transition, it can sometimes appear deceptively static. Are there more options than are shown? Is it scrollable?

In the following image, the list box’s contents slide in when the control is initiated, which conveys a lot of information quickly. This transition suggests that users can scroll through this list and that it contains more content beyond the current display, which helps encourage user interaction.

http://i.msdn.microsoft.com/dynimg/IC373506.jpg

If the list box appears empty for just a moment, and then its content slides in, the user sees this movement and can infer that the list box contains more options than what currently appears. Likewise, the sliding movement acts as a clue that users can manipulate the content that appears.

In this way, you can use motion design to create transitions that passively and succinctly illustrate how Surface content and controls may function.
 

Using Motion, Animations, and Visual Effects

Should

Ensure that motion in Surface applications is never jarring, sudden, chaotic, or intense. In fact, users will create most of the on-screen movement. Just as in visual design, tasteful restraint and elegant understatement best serve the Surface user experience. Use animations to progressively disclose detail in ways that help preserve user focus and context. A control or content can flow, fold, flip, or transform in reaction to user input to reveal increasing levels of detail or new perspectives on the same data.

 
 

4. Ambient Animations

Few computing experiences offer much in the way of personality (think of a spreadsheet or word-processing document). But Microsoft Surface experiences are different. They should immediately and emotionally engage users with a sense that Surface has a personality and some sense of awareness.

In the following image, a horizontal ambient animation behind the Launcher menu subtly indicates that users can interact with Launcher by using horizontal or side-to-side gestures. The application preview Movie is playing as well.

http://i.msdn.microsoft.com/dynimg/IC373517.jpg

In contrast to entering data in a traditional application, Surface users should see their interactions change the state or mood of the Surface application. Subtle ambient movement in the deep background can give life to a Surface application, and altering this ambient movement based on user input can give the impression that Surface applications subtly interact with and respond to users.

For example, a background animation could change color from neutral to warm based on how many touch inputs the application senses. When users place several objects on the Surface screen, animations could build visual connections between the objects to illustrate relationships. Visual touch feedback could change shape, color, or rhythm based on how many touch inputs an object registers, which could suggest new gestures and encourage interaction. Microsoft Surface offers many opportunities for you to create ambient animations that help maintain emotional engagement.
 

Using Motion, Animations, and Visual Effects

Should

Never let the Surface application become completely idle. Whether you use ambient animations or interactive loading states, a Surface application should seem aware and responsive at all times. Use animations to progressively disclose detail in ways that help preserve user focus and context. A control or content can flow, fold, flip, or transform in reaction to user input to reveal increasing levels of detail or new perspectives on the same data.

Could

Use motion design as a branding opportunity. Never hesitate to interpret brand descriptors or brand attributes into movement. It can invisibly build emotional connections that are difficult (or impossible) to convey by using static imagery.

 

5. Effects

You can animate effects over time to respond to user input. The simplest example is drop shadows that change their offset and orientation based on where users move them. You could also manipulate color, brightness, blurs, glows, displacement or distortion, and so on.

There are two primary challenges in using effects: visual intensity and performance.

• Microsoft Surface experiences need to maintain a sense of subtlety and restraint while still feeling aware, responsive, and engaging. If you use too many effects, fast movement, and overly energetic transitions, you will overwhelm users. Every effect must support the overall user experience, and usually the most beautiful effects are the most understated.

• Effects require a lot of processing power, so you should use them sparingly. If any interaction or animation feels sluggish, users will sense that the Surface unit is not responsive, decreasing the quality of users’ emotional connection with the Surface experience. You should especially avoid distortions and blurring, which significantly affect the performance, unless the content and themes of the application rely on these effects.

Use effects as enhancements, not as critical elements. In this way, you can scale, alter, or remove them to improve performance and not compromise the visual or motion design of the experience.
 

Using Motion, Animations, and Visual Effects

Should

All on-screen objects should feel smooth, agile, light, and flowing. Motion design on Surface should never be jarring, sudden, chaotic, or intense. In fact, users will create most of the on-screen movement. Just as in visual design, tasteful restraint and elegant understatement best serve the Surface user experience. Never let the Surface application become completely idle. Whether you use ambient animations or interactive loading states, a Surface application should seem aware and responsive at all times. Use Surface capabilities to create super-realistic experiences. Just because users cannot roll or flip a sculpted, seemingly solid, volumetric object in the real world does not mean that limitation extends to a Surface application. Treat super-realism as a license to move beyond literal representations of real-world objects.

Could

Use animations to reduce the visual footprint of on-screen controls. For example, a scroll bar may appear only 0.5 inch wide, but users can increase it to 1 inch wide when they touch it. This type of reaction offers a visual input response and improves the usability of the control. Get inspired. Watch how television commercials use motion to communicate aspects of the brands they represent. See how the opening and closing credits express the themes of a movie, especially as seen in the classic work of Saul Bass and the contemporary work of Kyle Cooper and his firm, Imaginary Forces.