User interaction: Touch input... and beyond
[This documentation is preliminary and is subject to change.]
You can create user interactions that are intuitive and engaging, and at the same time are 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.
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 operating systems focus primarily on touch input, Windows enables you to build the kind of 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 not quite there yet).
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.
Prerequisites
If you're new to developing Windows Store apps using JavaScript, have a look through these dev center topics to get familiar with the technologies discussed here.
-
Create your first Windows Store app using JavaScript
Use JavaScript with HTML5 and Cascading Style Sheets (CSS) to build a basic Windows Store app.
-
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.
User interaction sample
Coming soon!
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 both indirect input, as form data, and 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 RGB value.
The sample shows the following features, listed starting with the simplest:
- Form traversal
- Embedded panning/scrolling behaviors
- Touch keyboard behaviors
- Platform controls and built-in user interaction support
- Basic customization support (HTML and XAML) of user interaction behaviors
- Customized gesture detection, recognition, and processing
Here's a wireframe diagram that shows how this sample works.
For now, you can read the guidance and view some code snippets. Check back soon for the sample app!
User interaction guidance and examples
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. It demonstrates both platform controls and the customization supported by the platform. 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.
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: Touch input... and beyond.
Prep and learn
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.
These steps are an introduction to the concepts of input and user interactions.
 |
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. |
 |
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. |
|
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 Preview touch-optimized UI and the smaller targets of productivity apps and the desktop environment. |
|
Guidelines for common user interactions. Create user interaction experiences with consistent functionality for all devices. |
Setup
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.
|
Windows Store app UI, start to finish. Design and lay out UI elements and content, such as the app window, flyouts, dialogs, and app bars. When you do this strategically, you can help users to interact with the app more easily. |
|
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. |
|
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. |
|
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. |
|
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. |
|
Add text input controls to your Windows Store app. Guidelines and checklist 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. |
|
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. |
|
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. |
|
Making touch events accessible. Make touch input accessible by hooking pointer events to mouse click events. |
|
Testing your app for accessibility. Discover the accessibility testing tools, included with the Windows Software Development Kit (SDK) for Windows 8, that help you verify the accessibility of your app. |
Handle user interactions
Here, we explore the options you have for processing and responding to user interactions with your app.
|
Get form input via a touch keyboard, physical keyboard, touchpad, mouse, and pen. Instructions coming soon! |
|
Manage input via The touch keyboard. Instructions coming soon! |
|
Customize user interactions via pointer events. |
|
Quickstart: DOM gestures and manipulations Customize user interactions via DOM events. |
|
Quickstart: Manipulation gestures Customize user interactions via GestureRecognizer. |
Wrap up
 |
Certify your app with the Windows App Certification Kit. Run the Windows App Certification Kit to help ensure your app fulfills Microsoft Store requirements. Do this whenever you add major functionality to your app. |
 |
You’re done! Your implementation should be similar to the user interaction sample (coming soon). Sit back and bask in your success. |
Want to know more?
Learn more about what experience you want to provide your users.
Learn more about 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.
Browse the full list of user experience guidelines.
Samples
- Input: Touch keyboard sample
- Input: XAML user input events sample
- Responding to the appearance of the on-screen keyboard sample
Build date: 6/20/2013
