Language: HTML | XAML

User interaction customization, start to finish (HTML)

Applies to Windows and Windows Phone

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.

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.

Wireframe of the sample app
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.

start icon

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.

step icon

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.

step icon

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.

step icon

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.

step icon

Responding to mouse interactions.

Use mouse interactions for apps that require precision pointing and clicking.

step icon

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.

step icon

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.

step icon

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.

step icon

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.

step icon

Quickstart: Pointers

Customize user interactions via pointer events.

step icon

Quickstart: DOM gestures and manipulations

Customize user interactions via Document Object Model (DOM) events.

step icon

Quickstart: Static gestures

Quickstart: Manipulation gestures

Customize user interactions via GestureRecognizer.

step icon

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.

step icon

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.

step icon

Making touch events accessible.

Make touch input accessible by hooking pointer events to mouse click events.

step icon

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

store requirements icon

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.

stop icon

You’re done! Your implementation should be similar to the user interaction sample.

Sit back and bask in your success.

 

Want to know more?

Planning Windows Store apps

What experience do you want to provide your users?

Design for accessibility

Address the wide range of abilities, disabilities, and preferences of your users.

Design for different form factors

Learn more about handling different devices, input methods, and screen orientations.

Index of UX Guidelines

Browse the full list of user experience guidelines.

Samples

DOM

Windows Store app APIs

 

 

Show:
© 2014 Microsoft