Metro Pass 0003 – Being Fast and Fluid

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920

OK, I’ll admit it “Being Fast and Fluid” is getting to awfully close to marketing speak. What “Fast and Fluid” means to you, the developer, is that your applications should respond to user actions quickly AND with matching energy. If a user swipes to the left quickly, your app should scroll quickly. Making you apps fast and fluid is actually not as much work as you might think as long as you use purposeful animations, design for touch, and make heavy use of the built-in controls.

Purposeful Animations

Motion is a core part of the Metro design language. Well designed animations bring apps to life and make the experience feel crafted and polished.

• Use purposeful animations to visually tie experiences together and tell a story. Everything comes from somewhere and goes somewhere in a fluid interface.
• Leverage the Animation Library’s set of scenario-specific animations, designed to convey information. Familiar motions reinforce concepts, help people know what to expect, and build a sense of confidence. See the guidelines for animations in the Animating your UI section.
• When using animation to communicate important information, be sure to also provide an alternative, accessible way to convey the information.

I think the keyword here is Purposeful. Don’t be gratuitous with your animations. Use them where the make sense within your app.

Design for Touch

Metro style apps are designed to be touch first. They leverage the hands and fingers for what they are great at, with comfort and ergonomics in mind.

• Embrace the Windows 8 Touch Language and use the prescribed gesture set to let people naturally and consistently manipulate content. See Touch interaction design for more info.
• Let content directly follow your fingers. Think beyond tap and use sliding interactions, such as Semantic Zoom, to let people quickly and effortlessly navigate and interact with content.
• Provide immediate visual feedback on touch so people can confidently know if they have hit the intended target. Keep interactions reversible, and commit only when people let go to give room for errors and encourage explorations.
• Do not build separate touch and mouse interactions.
• For accessibility, ensure that all interactive elements are accessible programmatically.

These are all good points. The only thing I’ll add is that, just like with Windows Phone, you should test your Windows 8 Metro apps on touch enabled hardware. The emulator is a good place to start, but it’s good try out your apps on as many pieces of hardware as possible. For example, I’ve noticed the touch experience on Samsung devices is a bit smoother than on Asus machines. You’ll want to be aware of these differences and how they impact the usability of your applications.

Built-in Controls

Leverage the built-in controls to get fluid, beautiful, consistent animations and touch-optimized behaviors baked in. Built-in controls are also accessible by default. To name a few examples:

• Selection through the swipe gesture (cross-slide) is built into the ListView control. It can be extended with Semantic Zoom to let people quickly and fluidly navigate within a long list. See the guidelines on the ListView control.
• The FlipView control lets users drag to move between items, and has transition animations built-in.
• The button, toggle, checkbox, radio button, rating, and slider controls all provide visual feedback on touch down, commit only on touch up, and allow users to reverse their action by dragging away to cancel. See the guidelines on button, toggle, checkbox, radio button, date and time pickers, rating, and slider controls.

In short, use what you get for free with Visual Studio and buy where you can instead of building custom controls. Building touch-optimized and accessible custom controls can be a costly affair that will quickly increase the cost of a development project.

Got it? Good! Coming up on Monday, snapping and scaling. Have a great weekend!

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920