wcl202. slate mobile slate mobile laptop portable laptop portable displays tv, monitor displays tv,...

Building a Windows 7 Touch Optimized App: A Practical Guide from Design to Release

Pat AltimoreSr. ConsultantMicrosoftpatricka@microsoft.com

WCL202

Ben FarmerSr. DeveloperClarity Consultingben.farmer@claritycon.com

Objectives

Understanding the developer platforms and tools for designing touch applicationsHighlight several touch applications and discuss key design choices based on platformDiscuss tips, tricks, and advice for building a touch optimized application

A Diverse Windows 7 Touch Ecosystem

SlateMobile

Laptop Portable

Displays TV, Monitor

All-in-One Desktop

New Windows 7 Form Factors

Processor: Atom N550Memory: 2GBScreen: 10.1” (1366x768)Touch: 2-finger capacitiveGraphics: Intel GMA 3150

Processor: i5 470umMemory: 2GB or 4GB Screen: 12.1” (1280x800)Touch: 2-finger capacitiveGraphics: Integrated

Processor: Atom N405Memory: 2GBScreen: 11.6” (1366x768)Touch: 2-finger capacitiveGraphics: Intel GMA3150

Asus EEE EP120 ExoPC Dell Duo Inspiron

Levels of Touch Support

Friendly

• Finger friendly targets• Gestures supported via mouse

Enabled

• Frequent controls optimized for fingers• Relevant gesture support• Smooth, responsive feedback

Optimized

• Frequent tasks directly on UI• Immersive touch experience with real-world physical feedback• Handle user’s touch inaccuracies• Reduce text input or precise selection

Which Developer Platform Should I Use?

• What gestures make sense?• Need text entry?• Targeting cross platform?• Deployment requirements?

Scenario and Functionality

• Native Code• .NET• Web

Developer Skillsets

• Existing application?• Reusing code? • Targeting different devices?

Existing code

Development Platforms

Native

•C++•MFC

.NET

•WPF•Silverlight

IE 9

•HTML 5•Silverlight

Windows 7 Touch APIs

**

Raw Touch Data

Single Gestures

Gesture Combinations

Windows 7 Native API (C/C++)

.NET

Silverlight

DirectX/XNA

WM_TOUCH messages

x/y packets for each touch point

WM_GESTURE messages

Pinch/stretch, pan, rotate, etc.

Manipulations interface

Ability to combine multiple gestures

Windows 7 Touch Application Development Guidance Document

Design Principles. Recommendations on application design Windows 7 Touch APIs - Windows 7 Touch, Gesture, and Manipulation APIs Developer Platform Choices - Windows 7 developer platform support for Windows Touch Software Quality - Windows 7 client software logo requirements Windows Touch Assets - Additional developer resources http://archive.msdn.microsoft.com/wintouchguide

Demo

Touch Application Demo

Windows Touch in the Real World

Ben FarmerSr. DeveloperClarity Consulting partner

Touch Apps

Plan

Things to consider

Introduction to writing touch applications

Example touch applications

Things to consider

Platform

What to Expect

Design Considerations

The Windows 7 platform has some key differences from other touch platforms.

Things to Consider

The Windows 7 UI is primarily designed for use with a keyboard and mouse

Things to ConsiderPlatform

Highly focused business scenarios

Hybrid applications

Incremental touch support

Things to ConsiderPlatform

There is no marketplace for Windows 7 touch apps

(but there are many deployment options)

Things to ConsiderPlatform

You have a lot to build on

Things to ConsiderPlatform

Components and libraries

Peripherals

Wide range of devices

Things to ConsiderPlatform

What should you expect about writing touch applications on Windows?

Things to Consider

Things to ConsiderWhat to expect

DON’T PANIC

It’s still the same platform

Things to ConsiderWhat to expect

The tools are the same

Things to ConsiderWhat to expect

You’re really just changing the UI layer

Things to ConsiderWhat to expect

Touch applications have some unique design considerations compared to keyboard and mouse applications.

Things to Consider

Users have higher expectations for touch applications

Things to ConsiderDesign considerations

Challenge your assumptions about UI

Things to ConsiderDesign considerations

Target size

Hover state

Window mode

Menu system

Text entry

Things to ConsiderDesign considerations

Device ergonomics

Use your application on the target device as early and as often as possible

Things to ConsiderDesign considerations

Things to consider

Platform

You can totally do this!

Design Considerations

Plan

Things to consider

Introduction to writing touch applications

Example touch applications

Standard controls

Touch* events

Manipulation* events

Introduction to Writing Touch ApplicationsCode

Demo

Demo

Introduction to writing touch applications

Plan

Things to consider

Introduction to writing touch apps

Examples

ExamplesMosaic by Tribune

Silverlight 4.0 Out-of-BrowserConsumer focusDownload it now: www.mosaicbytribune.com

ExamplesChicago Mercantile Exchange Group

WPF 4.0 Enterprise focusSurface Toolkit for Windows Touch

Summary

Windows has some differences from other touch platforms

Summary

Writing touch applications is a little different from writing keyboard and mouse

applications

Summary

You can totally do this!

Summary

You can create a great user experience on this platform

Track Resources

Don’t forget to visit the Cloud Power area within the TLC (Blue Section) to see product demos and speak with experts about the Server & Cloud Platform solutions that help drive your business forward.

You can also find the latest information about our products at the following links:

Windows Azure - http://www.microsoft.com/windowsazure/

Microsoft System Center - http://www.microsoft.com/systemcenter/

Microsoft Forefront - http://www.microsoft.com/forefront/

Windows Server - http://www.microsoft.com/windowsserver/

Cloud Power - http://www.microsoft.com/cloud/

Private Cloud - http://www.microsoft.com/privatecloud/

Resources

www.microsoft.com/teched

Sessions On-Demand & Community Microsoft Certification & Training Resources

Resources for IT Professionals Resources for Developers

www.microsoft.com/learning

http://microsoft.com/technet http://microsoft.com/msdn

Learning

http://northamerica.msteched.com

Connect. Share. Discuss.

Complete an evaluation on CommNet and enter to win!

Scan the Tag to evaluate this session now on myTech•Ed Mobile

© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to

be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS

PRESENTATION.