User interaction, start to finish (HTML)

Artykuł
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

Use the built-in interaction behaviors of Windows Store apps platform controls to provide intuitive and engaging user experiences that are also 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.

The platform controls can handle and respond to 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 operating systems focus primarily on touch input, Windows enables you to build the kind of app you want, regardless of input device: consumption apps, productivity apps, innovative hybrid apps on PCs, laptops, tablets and pretty much any kind of form factor out there (and not quite there yet).

With the platform controls, you can support the broadest range of capabilities and preferences, make your app as usable, portable, and accessible as possible, and appeal to the largest potential audience in the Windows Store.

If you're looking for more information on custom interaction behaviors, see User interaction customization, 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, start to finish (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 User interaction sample. This sample shows how you can use or adapt the various interaction features and concepts in your Windows Store app. The sample includes principles, recommendations, and implementation details for panning and scrolling, form layouts, touch keyboard behaviors, 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 indirect input via the form, and 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:

Form traversal
Embedded panning/scrolling behaviors
Touch keyboard behaviors
Platform controls and built-in user interaction support

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 two pages (from top to bottom): a home page and a second page that contains a form with various platform controls and the color mixer.

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.

We recommend that you review each step if you're new to Windows Store app development, or you are unfamiliar with user interaction, usability, and accessibility. 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.

We recommend that you design the UI of your Windows 8.1 apps 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 minimal additional code.

	Choose the navigation pattern most suitable for your app and its content. For more information, see Navigation patterns. In the user interaction sample that supports this tutorial, we start with the Basic 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 and Windows 8.
	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. Mouse interactions are best suited to applications 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 is 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

Here, we review some of the details for the UI and functionality included in the user interaction sample.

Some of these details might not apply to your app. Pick and choose, as required.

	Guidelines for form layouts. Design forms that provide a great interaction experience and minimize scrolling. Consider how the user will fill out the form, where scrolling might be required, and how to handle the appearance of the touch keyboard and inline error notifications.
	Guidelines for text input Choose the right control: When to use a single-line or multi-line text input control (with all the dos and don'ts your mother never taught you).
	Guidelines for touch keyboard and handwriting panel. Support text entry for form factors that don’t have a hardware keyboard or other peripheral keyboard devices. The touch keyboard is invoked when a user taps on an editable input field, and is dismissed when the input field loses focus.
	Guidelines for panning Consider how panning and scrolling help users to 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 does not fit, either horizontally or vertically, within the viewport.
	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, you should 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.

Handle user interactions

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

	Quickstart: adding HTML controls and handling events Most apps need controls, such as buttons, check boxes, and drop-down lists. This sample includes a form that contains various controls that set properties on the static color mixer.
	Displaying and editing text Add text input controls to your Windows Store app.
	The touch keyboard Invoking and dismissing the touch keyboard.
	Implementing keyboard accessibility. Many users who are blind or have mobility issues rely on the keyboard as their only way to navigate the UI of your app and access its functionality. If your app does not provide good keyboard access, these users will have difficulty using your app, or may not be able to use it at all.

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.