Responding to user interaction (Windows Store apps using JavaScript and HTML) (Windows)

Language: JavaScript and HTML | VB/C#/C++ and XAML

23 out of 32 rated this helpful - Rate this topic

In this article

Developer audience
Overview of the Windows 8 user interaction platform
Customize the user experience
Related topics

Here we describe the user interaction platform, the input modes (touch, mouse, pen/stylus, keyboard, and so on), and user interactions supported by Windows Store apps and the new Windows UI in Windows 8. We explain how basic input and interaction functionality is provided for free, how to customize the user interaction experience, and how the interaction patterns are shared across language frameworks (Windows Store apps using JavaScript and Windows Store apps built for Windows using C++, C#, or Visual Basic).

Using guidelines, best practices, and examples, we show you how to take full advantage of the interaction capabilities of Windows 8 to build Windows Store apps with intuitive, engaging, and immersive user experiences.

Roadmap: How does this topic relate to others? See Roadmap for Windows Store apps using JavaScript.

In this section

Developer audience

We assume you are familiar with HTML, JavaScript, and Cascading Style Sheets (CSS).

If you're not that into JavaScript

See these user interaction docs for other language frameworks:

Overview of the Windows 8 user interaction platform

Design your Windows 8 apps with touch interactions in mind: Touch input is supported by an increasingly large and varied number of devices, and touch interactions are a fundamental aspect of the Windows 8 experience.

Because touch is a primary mode of interaction for users of Windows 8, the new Windows UI is optimized for touch input to make it responsive, accurate, and easy to use. Rest assured, tried and true input modes (such as mouse, pen, and keyboard) are fully supported and functionally consistent with touch (see Gestures, manipulations, and interactions). The speed, accuracy, and tactile feedback that traditional input modes provide are familiar and appealing to many users. These unique and distinctive interaction experiences have not been compromised.

Incorporating touch interactions into the design of your apps can greatly enhance the user experience. Be creative with the design of this experience, support the widest range of capabilities and preferences, appeal to the widest possible audience, and attract more customers to your app in the Windows Store.

The user interaction platform for Windows Store apps is based on various layers of functionality that progressively add flexibility and power:

Built-in controls

Take advantage of the JavaScript project templates and built-in controls exposed through the language frameworks to provide a full platform user interaction experience..

The built-in controls are designed from the ground up to be touch-optimized while providing consistent and engaging interaction experiences across all input modes. They support a comprehensive set of Windows 8 gestures (press and hold, tap, slide, swipe, pinch, stretch, turn) that, coupled with direct manipulations (pan, zoom, rotate, drag) and realistic inertia behavior, enable a compelling and immersive interaction experience that follows Windows 8 best practices and is consistent across the Windows platform.

The interaction functionality of the built-in controls works well for the majority of Windows Store apps.

For more info on the control libraries, see Adding controls and content (Windows Store apps using JavaScript and HTML).

Views

Tweak the user interaction experience through the pan/scroll and zoom settings of your app views. An app view dictates how a user accesses and manipulates your app and its content. Views also provide Windows Store app behaviors such as inertia, content boundary bounce, and snap points.

Pan/scroll settings dictate how users can navigate within a single view (such as a page of a magazine or book, the folder structure of a computer, a library of documents, or a photo album) when the content of the view doesn't fit within the viewport.

Zoom settings apply to both optical zoom and the SemanticZoom control. Semantic Zoom is a touch-optimized technique for presenting and navigating large sets of related data or content within a single view using two distinct modes of classification (or zoom levels). This functionality is analogous to panning and scrolling (which can be used in conjunction with Semantic Zoom) within a single view.

Using app views and the following CSS properties, DOM attributes, and DOM events to modify the pan/scroll and zoom behaviors can provide a smoother interaction experience than is possible through the handling of pointer and gesture events as described later.

API surface	CSS Properties	DOM Attributes	DOM Events
-ms-touch-action specifies whether a given region can be manipulated through panning or zooming.
Panning/Scrolling	-ms-overflow-style -ms-scroll-chaining -ms-scroll-limit -ms-scroll-limit-x-max -ms-scroll-limit-x-min -ms-scroll-limit-y-max -ms-scroll-limit-y-min -ms-scroll-rails -ms-scroll-snap-points-x -ms-scroll-snap-points-y -ms-scroll-snap-type -ms-scroll-snap-x -ms-scroll-snap-y -ms-scroll-translation	scroll scrollHeight scrollLeft scrollTop scrollWidth	onscroll
Zooming	-ms-content-zoom-chaining -ms-content-zooming -ms-content-zoom-limit -ms-content-zoom-limit-max -ms-content-zoom-limit-min -ms-content-zoom-snap -ms-content-zoom-snap-points -ms-content-zoom-snap-type	msContentZoomFactor	onmscontentzoom
Both			onmsmanipulationstatechanged

For more info on app views, see Defining layouts and views.

For more info on zooming, see Guidelines for optical zoom and resizing or Guidelines for Semantic Zoom.

For more info on panning/scrolling, see Guidelines for panning.

DOM Pointer and gesture events

A pointer is a generic input type with a unified event mechanism that exposes basic info (such as screen position) on the active input source (mouse, touch, or pen). Gestures range from simple, static interactions like tapping to more complicated manipulations like zooming, panning, and rotating. For more details, see Gestures, manipulations, and interactions.

Note

Static gesture events are triggered after an interaction is complete. Manipulation gesture events indicate an ongoing interaction. Manipulation gesture events start firing when the user touches the element and continue until the user lifts the finger or the manipulation is canceled.

Access to the pointer and gesture events enables you to use the Windows 8 Touch interaction design language for games, custom controls and feedback visuals, extending the Windows 8 gestures, processing raw input data, and other custom interactions.

Take advantage of the built-in gesture recognition provided through these DOM gesture events:

Type	DOM gesture events
General events	onmsmanipulationstatechanged
Pointer events	onmsgotpointercapture onmslostpointercapture onmspointercancel onmspointerdown onmspointerhover onmspointermove onmspointerout onmspointerover onmspointerup
Static gesture events	onmsgesturehold onmsgesturetap
Manipulation gesture events	onmsgesturechange onmsgestureend onmsgesturestart onmsinertiastart

For more info on handling pointer and gesture events, see Quickstart: Pointer handling and Quickstart: Basic DOM gesture handling.

Customize the user experience

Fully customize and control your app's interaction experience through the Windows Store app APIs. In addition to enabling custom user interactions, you can handle additional configuration options and hardware capabilities such as mouse devices with a right button, wheel button, tilt wheel, or X buttons and pen devices with barrel buttons and eraser tips.

Most interaction APIs are provided by the Windows.UI.Core, Windows.UI.Input, and Windows.UI.Input.Inking types, with input device data exposed through Windows.Devices.Input.

You'll find the GestureRecognizer, PointerPoint, and PointerPointProperties classes to be most useful for dealing with gestures and manipulations.

Before providing customized interaction experiences through new or modified gestures and manipulations, consider the following:

Does an existing gesture provide the experience your app requires. Don't provide a custom gesture to zoom or pan when you can simply adapt your app to support or interpret an existing gesture.
Does the custom gesture warrant the potential inconsistency across apps.
Does the gesture require specific hardware support, such as number of contacts.
Is there a control (such as SemanticZoom) that provides the interaction experience you need. If a control can intrinsically handle user input, is a custom gesture or manipulation required at all.
Does your custom gesture or manipulation result in a smooth and natural interaction experience.
Does the interaction experience make sense. If the interaction depends on such things as the number of contacts, velocity, time (not recommended), and inertia, ensure that these constraints and dependencies are consistent and discoverable. For example, how users interpret fast and slow can directly affect the functionality of your app and the users satisfaction with the experience.
Is the gesture or manipulation affected by the physical abilities of your user. Is it accessible.
Will an app bar command or some other UI command suffice.

In short, create custom gestures and manipulations only if there is a clear, well-defined requirement and no basic gesture can support your scenario.

For more info on custom interactions, see Quickstart: Static gestures and Quickstart: Manipulation gestures.

Responding to user interaction (Windows Store apps using JavaScript and HTML)