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).
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.
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.
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.
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.
Compare common interactions and how they map to gestures across touch, touchpad, mouse, and keyboard.
While optimized for touch input, the platform fully supports the other input devices listed here.
Mouse interactions are best suited to applications that require precision pointing and clicking.
The keyboard is indispensable to people with certain disabilities or users who just consider it a more efficient way to interact with an app.
A pen or stylus can be used as both a pointing device and a drawing device. It is typically associated with digital ink functionality.
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.
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.
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.
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).
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.
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.
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.
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.
Add text input controls to your Windows Store app.
Invoking and dismissing the touch keyboard.
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.
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.
You’re done! Your implementation should be similar to the User interaction sample.
Sit back and bask in your success.
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.
Learn more about handling different devices, input methods, and screen orientations.
Browse the full list of user experience guidelines.
- HTML scrolling, panning and zooming sample
- HTML essential controls sample
- HTML5 form validation sample
- Responding to the appearance of the on-screen keyboard sample
- Input: Touch keyboard text input sample