User interaction customization, start to finish (HTML)

Article
04/19/2016

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

Input devices supported by Windows Store apps

You can create custom user interactions that are intuitive and engaging, and at the same time, efficient and consistent across all input devices. Follow the guidelines, best practices, and examples described here to define these user experiences for your Windows Store app.

Note We recommend that you use the platform control libraries (HTML and XAML) wherever possible. The controls in these libraries provide the full Windows 8.1 user interaction experience, including standard interactions, animated physics effects, visual feedback, and accessibility. If you don't need customized interaction support, use these built-in controls.

Windows Store apps can process input from a variety of sources, including touch, touchpad, mouse, pen/stylus, and keyboard. They can also process input from a variety of input device modes, such as touch keyboard, mouse wheel, and pen eraser. While other platforms focus primarily on touch input, you can build the kind of Windows Store app you want, without constraints: consumption apps, productivity apps, innovative hybrid apps on PCs, laptops, tablets and pretty much any kind of form factor out there (and those not quite there yet).

If you're looking for more info about platform controls and their interaction behaviors, see User interaction, start to finish (HTML).

Prerequisites

The guidelines, tasks, and sample code here are specific to developing Windows Store apps using JavaScript. For the Windows Store app using C++, C#, or Visual Basic version, see User interaction customization (XAML).

If you're new to developing Windows Store apps using JavaScript, have a look through these topics to get familiar with the technologies discussed here.

Developing Windows Store apps using JavaScript

Get familiar with everything from the Start screen to UI layout and controls, in Windows Store apps using JavaScript.
Create your first Windows Store app using JavaScript

Use JavaScript with HTML5 and Cascading Style Sheets (CSS) to build a basic Windows Store app.

User interaction sample

In addition to the samples and code snippets included in the topics we reference below, we'll work with the Custom user interaction sample. This sample shows how you can use or adapt various interaction features and concepts in your Windows Store app. The sample includes principles, recommendations, and implementation details for custom controls, UI accessibility, and customized interactions. See how we put our guidance into practice!

Here's a brief description of the sample

In the sample, we make a color mixer. It's in the form of a square object that takes direct input from a touch screen, touchpad, mouse, pen/stylus, or keyboard. It uses this data to specify an RGB color and an angle of rotation, which it translates to a corresponding red, green, or blue level.

The sample demonstrates the following features:

Custom control
Basic customization support (HTML and XAML) of user interaction behaviors
Customized gesture detection, recognition, and processing

Here's a wireframe diagram that gives you an idea of how this sample works and the user interaction functionality the sample implements.

The sample contains three pages (from left to right): a home page, a second page that contains a custom control with support for DOM-based rotation, and a third page with a custom control that implements additional functionality through the Windows.UI.Input GestureRecognizer APIs.

For now, here's a loose outline of tasks to help you build an app that follows the best practices for user interaction in Windows Store apps. Each task links to corresponding info in the Windows Store app Dev Center.

If you're new to Windows Store app development, or you are unfamiliar with user interaction, usability, and accessibility, it's best to review each step. You'll find related aspects of user interaction development grouped together.

Plan your app

Before you start designing and developing your app, plan your app. Take the time to think about who your audience is and what features and activities your app supports.

Design the UI of your Windows Store app primarily for touch interactions. Touch input is inherently imprecise (requiring an input area) compared to other input types that are typically pixel precise. Touch-optimized controls, along with a set of platform interaction APIs for pointer-based event processing, provide equivalent functionality across devices with not much additional code.

	Choose the navigation pattern most suitable for your app and its content. For more info, see Navigation patterns. In the user interaction sample that supports this tutorial, we start with the Flat navigation template. Download the template and try things out as you follow the steps here, or jump right in and use the template to start the design and development of your own app.
	Windows Store app UI, start to finish (HTML). Design and lay out UI elements and content, such as the app window, flyouts, dialogs, and app bars. We use guidelines, best practices, and examples to help you take full advantage of the UI capabilities of Windows 8.1 and create a UI that is intuitive and consistent with other Windows Store apps.
	Responding to user interaction. Learn about the user interaction platform, the input sources (including touch, touchpad, mouse, pen/stylus, and keyboard), modes (touch keyboard, mouse wheel, pen eraser, and so on), and interactions supported by Windows Store apps.
	How users interact with input devices. Compare common interactions and how they map to gestures across touch, touchpad, mouse, and keyboard.

Input devices

While optimized for touch input, the platform fully supports the other input devices listed here.

	Responding to mouse interactions. Use mouse interactions for apps that require precision pointing and clicking.
	Responding to keyboard interactions. The keyboard is indispensable to people with certain disabilities or users who just consider it a more efficient way to interact with an app.
	Responding to pen and stylus interactions. A pen or stylus can be used as both a pointing device and a drawing device. It's typically associated with digital ink functionality.
	Responding to touchpad interactions. A touchpad combines multi-touch input with the precision input of a pointing device, such as a mouse. This combination makes the touchpad suited to both the Windows 8.1 touch-optimized UI and the smaller targets of productivity apps and the desktop environment.

Designing your interactions

Be creative when you follow the Windows UX guides for user interactions. Choose which input devices your app supports, and how it responds. Enhance the user experience across devices, support the broadest range of capabilities and preferences, and appeal to the largest potential audience in the Windows Store. This will make your app as usable, portable, and accessible as possible.

These user interaction guidelines can help you provide a compelling and immersive interaction experience consistent across input modes:

Guidelines for common user interactions

Create user interaction experiences with consistent functionality for all devices.
Guidelines for cross-slide

Support selection with the swipe gesture and drag (move) interactions with the slide gesture.
Guidelines for optical zoom and resizing

Optical zoom enables users to magnify their view of the content within a content area (you use it on the content area itself), whereas resizing enables users to change the relative size of one or more objects without changing the view into the content area (you use it on the objects within the content area).
Guidelines for panning

Consider how panning and scrolling help users navigate within a single view, such as the folder structure of a computer, a library of documents, or a photo album. Also, see how users can explore content that doesn't fit, either horizontally or vertically, within the viewport.
Guidelines for rotation

Rotate objects by turning in a circular direction (clockwise or counter-clockwise) using touch or through other UI controls for mouse, pen/stylus, or keyboard.
Guidelines for semantic zoom

Present and navigate large sets of related data or content within a single view (such as a photo album, app list, or address book).
Guidelines for selecting text and images

Provide content selection UI and functionality.
Guidelines for targeting

Increase user satisfaction with your app by improving touch accuracy and confidence.
Guidelines for visual feedback

Help users to understand, learn, and adapt to your app, the system, and the input device. You can do this by indicating the success of an interaction, improving the users sense of control, encouraging interaction, relaying system status, and reducing errors. Visual feedback (also referred to as contact visualizations or feedback UI) shows whether an interaction is detected, interpreted, and handled as intended.

Handle user interactions

Here, we explore your options for processing and responding to user interactions with your app. We'll also cover some details of the UI and functionality included in the user interaction sample.

	Quickstart: Pointers Customize user interactions via pointer events.
	Quickstart: DOM gestures and manipulations Customize user interactions via Document Object Model (DOM) events.
	Quickstart: Static gestures Quickstart: Manipulation gestures Customize user interactions via GestureRecognizer.
	Animating your UI Integrate the Windows 8 look and feel into your Windows Store app app by using the platform Animation Library suite of animations (for pointer events or swipe gestures) or customize animations using Cascading Style Sheets, Level 3 (CSS3) Transitions, Animations, and Transforms.
	Implementing keyboard accessibility. Many users who have sight impairments or mobility issues rely on the keyboard as their only way to navigate the UI of your app and access its functionality. If your app doesn't provide good keyboard access, these users will have difficulty using your app, or may not be able to use it at all.
	Making touch events accessible. Make touch input accessible by hooking pointer events to mouse click events.
	Testing your app for accessibility. Use the accessibility testing tools included with the Windows Software Development Kit (SDK) for Windows 8, Inspect and UI Accessibility Checker (AccChecker), to help you verify the accessibility of your app. If you intend to declare your app as accessible in the Windows Store, address all priority 1 errors reported by AccChecker with Accessible Rich Internet Applications (ARIA) web verifications enabled. Remember: Narrator supports a set of custom touch gestures (described in this topic) for navigating and reading the content of your app.

Wrap up

Certify your app with the Windows App Certification Kit.

Run the Windows App Certification Kit to help ensure your app fulfills Windows Store requirements. Do this whenever you add major functionality to your app.