Animations, motion, and output for Windows Phone

Article
11/23/2015

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

Windows Phone apps should use motion, sound, and vibration to create the sensation of real-life tangibility inside an app. These effects and outputs help augment touch and help users get feedback on operations and tasks in progress.

This topic contains the following sections.

Design in motion

Motion is more than making things move. On Windows Phone, motion is a tool for creating a physical ecosystem for the user to live inside and manipulate through touch. The quality of the experience depends on how well the app responds to the user, and what kind of personality the UI communicates.

There are two kinds of motion in Windows Phone:

Transitions: Triggered by user actions, transitions provide a mental breadcrumb for the user as they navigate the UI. The various transitions have been authored to lead the user along a path and give them confidence as to where they are. Larger transitions are used app to app, whereas smaller transitions are used to navigate within an app.
Animations: Visual feedback confined to a local element within a view, but not always as a result of user action. One example is the lock screen’s “hop” motion, which informs the user how to unlock the device.

Make sure motion serves a purpose in your app. The best Windows Phone apps use motion to bring the UI to life. Motion should:

Serve up information without taps.
Give feedback based on the user’s behavior.
Teach the user how to interact with touch targets.
Indicate how to navigate to previous or succeeding views.

One simple example of motion can be found in the behavior of edit boxes in Windows Phone. An edit box does not simply snap bigger when it expands; instead, it animates to indicate its resize.

What motion adds

As a user spends more time inside your app, or as tasks in your app become more sophisticated, high-quality motion becomes increasingly important: it can be used to change how the user perceives their cognitive load and your app’s ease of use. Motion has many other direct benefits:

Motion delights the user. Animations and other visual feedback create moments of surprise and intuition. Delights also endear the device and app to the user.
Motion adds hints towards interaction. Motion is directional: it moves forward and backward, in and out of content, leaving minimal “breadcrumb” clues as to how the user arrived at the present view. For example, the Panoramic Entrance animation can draw the user’s eye across the main navigation as the app opens, giving the user a clue about how to operate the Panorama control.
Motion gives the impression of enhanced performance. When network speeds lag or the system pauses to work, animations can make the user’s wait feel shorter.
Motion adds personality. The well-considered Windows Phone UI uses motion to create the impression that an app is concerned with the here and now, and helps counteract the sensation that the user is burrowing into nested hierarchies.
Motion adds consistency. Transitions can help users learn how to operate new applications by drawing analogies to tasks that the user is already familiar with.
Motion adds elegance. Animations can be used to let the user know that the phone is processing, not frozen, and it can passively surface new information that the user may be interested in.

Rules of the motion ecosystem

Each animation is part of the system, and no animation should stand out as different.
Each animation serves a purpose, and gets out of the way quickly.
Animations appear in 2.5 dimensions, not 3-D, and don’t make use of elaborate textures, lighting, or extrusions. For example, the Tilt animation doesn’t reveal any depth behind a touch target, only a flat surface. This emphasizes content.
UI elements can move other UI elements around. For example: if an object expands on a page, it should expand the page downward in an animated way.
Motion can be triggered by both hardware and software interactions. Transitions need to be designed to be aware of all possibilities.
Actionable items get movement based on user interaction. For example, the Tilt animation activates to show that an object is being touched.
If an item is updated to a level of importance that merits the user's attention, motion should be used to inform the user.

Directions in motion

Because Windows Phone devices use forward navigation and a hardware Back button, transitions and animations can move in either two or four directions, as represented by the matrix in the following figure. This figure uses the Turnstile animation as an example, showing four different directions from which a user can enter an app.

Navigation Matrix

Using two or four specific forward and backward motions helps the user remain aware of his or her position in a given task flow.

Generally, you should consider the role of motion from the very beginning of an app’s design. Motions added at the end of the design process are more difficult to integrate in an organic way, and the benefits of well-used motion warrant careful prototyping.

Easing

Easing is very important to Windows Phone UI. Correct easing can quite literally mean the difference between an amazing experience and abject failure. Many lab studies have come back with negative results simply due to the fact that the easing was not tuned properly. Below are the most common types of easing in Windows Phone:

Logarithmic. If an object is entering the screen, it uses a Logarithmic easing, sliding to a nice, easy stop.
Exponential. If an object is leaving the screen, it uses an Exponential easing, which builds tension and then quickly flies the object off.
SCurve When Logarithmic easing feels too jarring, SCurve easing is can be used larger moves on the screen.

Because the easing motion curve is dynamic, testing has shown that users cannot fully gauge how long they’ve waited for an action to take place. This easing increases the perceived responsiveness of your app. Using easing settings consistently across the device enables a consistently fast, lightweight experience.

Show feedback

Be sure to provide proper feedback to users when they tap a touch target. Design visual states for custom controls that show them in different stages of operation or activation. Users should know when a button has been pressed or a control has been toggled.

Note

The most prevalent method for touch feedback on Windows Phone is the tilt effect. For more info, see How to use the control tilt effect for Windows Phone 8.

Present changes immediately. With the exception of some settings, controls should generally show feedback by bringing about an immediate change.
Provide immediate visual or auditory feedback to interaction with a touch control. All actions should have immediate and obvious consequence—responses should occur while the gesture is happening, not afterward. An example of poor design would when a user flicks a photo and the movement occurs after the gesture is completed.
For time-consuming processes, provide feedback. While an operation is ongoing, you must indicate to the user that something is happening. You can use content to indicate progress, or use a progress bar or raw notification as a last resort.
Response to gestures should be consistent across the phone and app. Using the touch controls in the Windows Phone SDK helps maintain consistency because they have built-in support for the touch gestures discussed in this topic. If you create custom touch controls, they should respond to gestures in a similar manner.

Outputs

Windows Phone apps have four methods of output:

Display
Audio output jack
Internal speaker
Vibration

You should consider all four outputs when you design an app.

Sound and vibration

Windows Phone uses sound and vibration to make meaningful contributions to the user experience. Think of audio as being a soundtrack to your app, and not as a way of jarring the user into action. When you design the audio for your app, apply the essential principles of minimalism; avoid annoying or unnecessary audio. The best Windows Phone apps use audio to complement and support their visual design story.

Guidelines for audio are as follows:

Avoid gratuitous audio.
Avoid generic sound effects.
Avoid harsh, alarming sounds that may prompt anxiety in users.