Windows Dev Center

Keyboard design guidelines

Keyboard hero image

A keyboard is the primary input device for text, and is often indispensable to people with certain disabilities or users who consider it a faster and more efficient way to interact with an app.

Users can interact with universal apps through a hardware keyboard and two software keyboards: the On-Screen Keyboard (OSK) and the touch keyboard.

On-Screen Keyboard

The On-Screen Keyboard is a visual, software keyboard that you can use instead of the physical keyboard to type and enter data using touch, mouse, pen/stylus or other pointing device (a touch screen is not required). The On-Screen Keyboard is provided for systems that don't have a physical keyboard, or for users whose mobility impairments prevent them from using traditional physical input devices. The On-Screen Keyboard emulates most, if not all, the functionality of a hardware keyboard.

The On-Screen Keyboard can be turned on from the Keyboard page in Settings > Ease of access.

Note  The On-Screen Keyboard has priority over the touch keyboard, which won't be shown if the On-Screen Keyboard is present.

The On-Screen Keyboard

On-Screen Keyboard

Touch keyboard

The touch keyboard is a visual, software keyboard used for text entry with touch input. It is not a replacement for the On-Screen Keyboard as it's used for text input only (it doesn't emulate the hardware keyboard).

Depending on the device, the touch keyboard appears when a text field or other editable text control gets focus, or when the user manually enables it through the Notification Center:

Touch keyboard icon in the Notification Center

Note  The user might have to go to the Tablet mode screen in Settings > System and turn on "Make Windows more touch-friendly when using your device as a tablet" to enable the automatic appearance of the touch keyboard.

If your app sets focus programmatically to a text input control, the touch keyboard is not invoked. This eliminates unexpected behaviors not instigated directly by the user. However, the keyboard does automatically hide when focus is moved programmatically to a non-text input control.

The touch keyboard typically remains visible while the user navigates between controls in a form. This behavior can vary based on the other control types within the form.

The following is a list of non-edit controls that can receive focus during a text entry session using the touch keyboard without dismissing the keyboard. Rather than needlessly churn the UI and potentially disorient the user, the touch keyboard remains in view because the user is likely to go back and forth between these controls and text entry with the touch keyboard.

  • Check box
  • Combo box
  • Radio button
  • Scroll bar
  • Tree
  • Tree item
  • Menu
  • Menu bar
  • Menu item
  • Toolbar
  • List
  • List item

Here are examples of different modes for the touch keyboard. The first image is the default layout, the second is the thumb layout (which might not be available in all languages).

The touch keyboard in default layout mode

The touch keyboard in default layout mode

The touch keyboard in expanded layout mode

The touch keyboard in expanded layout mode

The touch keyboard in thumb layout mode

The touch keyboard in default thumb layout mode

The touch keyboard in numeric thumb layout mode

The touch keyboard in numeric thumb layout mode

Principles

Succesful keyboard interactions enable users to accomplish basic app scenarios using only the keyboard; that is, users can reach all interactive elements and activate default functionality. A number of factors can affect the degree of success, including keyboard navigation, access keys for accessibility, and accelerator (or shortcut) keys for advanced users.

Note  The touch keyboard does not support toggle and most system commands (see Patterns).

Navigation

To use a control (including navigation elements) with the keyboard, the control must have focus. One way for a control to receive keyboard focus is to make it accessible via tab navigation. A well designed keyboard navigation model provides a logical and predictable tab order that enables a user to explore and use your app quickly and efficiently.

All interactive controls should have tab stops (unless they are in a group), whereas non-interactive controls, such as labels, should not.

A set of related controls can be made into a control group and assigned a single tab stop. Control groups are used for sets of controls that behave like a single control, such as radio buttons. They can also be used when there too many controls to navigate efficiently with the Tab key alone. The arrow keys, Home, End, Page Up, and Page Down move input focus among the controls within a group (it is not possible to navigate out of a control group using these keys).

You should set initial keyboard focus on the element that users will intuitively (or most likely) interact with first when your app starts. Often, this is the main content view of the app so that a user can immediately start using the arrow keys to scroll the app content.

Don’t set initial keyboard focus on an element with potentially negative, or even disastrous, results. This can prevent loss of data or system access.

Try to rank and present the most important commands, controls, and content first in both the tab order and the display order (or visual hierarchy). However, the actual display position can depend on the parent layout container and certain properties of the child elements that influence the layout. In particular, layouts that use a grid metaphor or a table metaphor can have a reading order quite different from the tab order. This is not always a problem, but you should test your app's functionality, both as a touchable UI and as a keyboard-accessible UI.

Tab order should follow reading order, whenever possible. This can reduce confusion and is dependent on locale and language.

Associate keyboard buttons with appropriate UI (back and forward buttons) in your app.

Try to make navigating back to the start screen of your app and between key content as easy and straightforward as possible.

Use the arrow keys as keyboard shortcuts for proper inner navigation among child elements of composite elements. If tree view nodes have separate child elements for handling expand–collapse and node activation, use the left and right arrow keys to provide keyboard expand–collapse functionality. This is consistent with the platform controls.

Because the touch keyboard occludes a large portion of the screen, the Universal Windows Platform (UWP) ensures that the input field with focus scrolls into view as a user navigates through the controls on the form, including controls that are not currently in view. Custom controls should emulate this behavior.

A form with and without the touch keyboard showing

In some cases, there are UI elements that should stay on the screen the entire time. Design the UI so that the form controls are contained in a panning region and the important UI elements are static. For example:

A form that contains areas that should always stay in view

Activation

A control can be activated in a number of different ways, whether it currently has focus or not.

Spacebar, Enter, and Esc

The spacebar should activate the control with input focus. The Enter key should activate a default control or the control with input focus. A default control is the control with initial focus or one that responds exclusively to the Enter key (typically it changes with input focus). In addition, the Esc key should close or exit transitory UI, such as menus and dialogs.

The Calculator app shown here uses the spacebar to activate the button with focus, locks the Enter key to the “=” button, and locks the Esc key to the “C” button.

The Calculator app

Access keys and accelerator keys

Implement keyboard shortcuts for key app functionality. (A shortcut is a key combination that enhances productivity by providing an efficient way for the user to access app functionality.)

Provide keyboard shortcuts through access keys and accelerator keys (described later in the keyboard Patterns section) to support interaction with controls directly instead of navigating with the Tab key.

Note  While some controls have intrinsic labels, such as command buttons, check boxes, and radio buttons, other controls have external labels, such as list views. For controls with external labels, the access key is assigned to the label, which, when invoked, sets focus to an element or value within the associated control.

The example here, shows the access keys for the Page Layout tab in Word.

The access keys for the Page Layout tab in Word

Here, the Indent Left text field value is highlighted after entering the access key identified in the associated label.

The Indent Left text field value is highlighted after entering the access key identified in the associated label

Usability and accessibility

A well-designed keyboard interaction experience is an important aspect of software accessibility. It enables users with vision impairments or who have certain motor disabilities to navigate an app and interact with its features. Such users might be unable to operate a mouse and must, instead, rely on various assistive technologies that include keyboard enhancement tools and on-screen keyboards (along with screen enlargers, screen readers, and voice input utilities). For these users, comprehensiveness is more important than consistency.

Experienced users often have a strong preference for using the keyboard, because keyboard-based commands can be entered more quickly and don't require removing their hands from the keyboard. For these users, efficiency and consistency are crucial; comprehensiveness is important only for the most frequently used commands.

There are subtle distinctions when designing for usability and accessibility, which is why two different keyboard access mechanisms are supported.

Access keys have the following characteristics:

  • An access key is a shortcut to a UI element in your app.
  • They use the Alt key plus an alphanumeric key.
  • They are primarily for accessibility.
  • They are assigned to all menus and most dialog box controls.
  • They aren't intended to be memorized, so they are documented directly in the UI by underlining the corresponding control label character.
  • They have effect only in the current window, and navigate to the corresponding menu item or control.
  • They aren't assigned consistently because they can't always be. However, access keys should be assigned consistently for commonly used commands, especially commit buttons.
  • They are localized.

Because access keys aren't intended to be memorized, they are assigned to a character that is early in the label to make them easy to find, even if there is a keyword that appears later in the label.

In contrast, accelerator keys have the following characteristics:

  • An accelerator key is a shortcut to an app command.
  • They primarily use Ctrl and Function key sequences (Windows system shortcut keys also use Alt+non-alphanumeric keys and the Windows logo key).
  • They are primarily for efficiency for advanced users.
  • They are assigned only to the most commonly used commands.
  • They are intended to be memorized, and are documented only in menus, tooltips, and Help.
  • They have effect throughout the entire program, but have no effect if they don't apply.
  • They must be assigned consistently because they are memorized and not directly documented.
  • They aren't localized.

Because accelerator keys are intended to be memorized, the most frequently used accelerator keys ideally use letters from the first or most memorable characters within the command's keywords, such as Ctrl+C for Copy and Ctrl+Q for Request.

Users should be able to accomplish all tasks supported by your app using only the hardware keyboard or the On-Screen Keyboard.

You should provide an easy way for users who rely on screen readers and other assistive technology to discover your app's accelerator keys. Communicate accelerator keys by using tooltips, accessible names, accessible descriptions, or some other form of on-screen communication. At a minimum, access and accelerator keys should be well documented in your app's Help content.

Don’t assign well-known or standard accelerator keys to other functionality. For example, Ctrl+F is typically used for find or search.

Don’t bother trying to assign access keys to all interactive controls in a dense UI. Just ensure the most important and the most used have access keys, or use control groups and assign an access key to the control group label.

Don't change commands using keyboard modifiers. Doing so is undiscoverable and can cause confusion.

Don't disable a control while it has input focus. This can interfere with keyboard input.

To ensure successful keyboard interaction experiences, it is critical to test your app thoroughly and exclusively with the keyboard.

Text input

Always query the device capabilities when relying on keyboard input. On some devices (such as phone), the touch keyboard can only be used for text input as it does not provide many of the accelerators or command keys found on a hardware keyboard (such as alt, the function keys, or the Windows Logo key).

Don't make users navigate the app using the touch keyboard. Depending on the control getting focus, the touch keyboard might get dismissed.

Try to display the keyboard throughout the entire interaction with your form. This eliminates UI churn that can disorient the user in the middle of a form or text entry flow.

Ensure that users can always see the input field that they're typing into. The touch keyboard occludes half of the screen, so the input field with focus should scroll into view as the user traverses the form.

Patterns

A standard hardware keyboard or OSK consists of seven types of keys, each supporting unique functionality:

  • Character key: sends a literal character to the window with input focus.
  • Modifier key: alters the function of a primary key when pressed simultaneously, such as Ctrl, Alt, Shift, and the Windows logo key.
  • Navigation key: moves input focus or text input location, such as the Tab, Home, End, Page Up, Page Down, and directional arrow keys.
  • Editing key: manipulates text, such as the Shift, Tab, Enter, Insert, Backspace, and Delete keys.
  • Function key: performs a special function, such as F1 through F12 keys.
  • Toggle key: puts the system into a mode, such as Caps Lock, ScrLk, and Num Lock keys.
  • Command key: performs a system task or command activation, such as Spacebar, Enter, Esc, Pause/Break, and Print Screen keys.

In addition to these categories, a secondary class of keys and key combinations exist that can be used as shortcuts to app functionality:

  • Access key: exposes controls or menu items by pressing the Alt key with a character key, indicated by underlining of the access key character assignment in a menu, or displaying of the access key character(s) in an overlay.
  • Accelerator key: exposes app commands by pressing a function key or the Ctrl key with a character key. Your app might or might not have UI that corresponds to the command.

The Notepad app is shown here with the expanded File menu that includes both access keys and accelerator keys.

The Notepad app with expanded File menu that includes both access keys and accelerator keys.

Keyboard commands

The following is a comprehensive list of the keyboard interactions provided across the various devices that support keyboard input. Some devices and platforms require native keystrokes and interactions, these are noted.

When designing custom controls and interactions, use this keyboard language consistently to make your app feel familiar, dependable, and easy to learn.

Don't redefine the default keyboard shortcuts.

The following tables list frequently used keyboard commands. For a complete list of keyboard commands, see Windows Keyboard Shortcut Keys.

Navigation commands

ActionKey command
BackAlt+Left or the back button on special keyboards
ForwardAlt+Right
UpAlt+Up
Cancel or Escape from current modeEsc
Move through items in a listArrow key (Left, Right, Up, Down)
Jump to next list of itemsCtrl+Left
Semantic zoomCtrl++ or Ctrl+-
Jump to a named item in a collectionStart typing item name
Next pagePage Up, Page Down or Spacebar
Next tabCtrl+Tab
Previous tabCtrl+Shift+Tab
Open app barWindows+Z
Activate or Navigate into an itemEnter
SelectSpacebar
Continuously selectShift+Arrow key
Select allCtrl+A

 

Common commands

ActionKey command
Pin an itemCtrl+Shift+1
SaveCtrl+S
FindCtrl+F
PrintCtrl+P
CopyCtrl+C
CutCtrl+X
New itemCtrl+N
PasteCtrl+V
OpenCtrl+O
Open address (for example, a URL in Internet Explorer)Ctrl+L or Alt+D

 

Media navigation commands

ActionKey command
Play/PauseCtrl+P
Next itemCtrl+F
Preview itemCtrl+B

 

Note: The media navigation key commands for Play/Pause and Next item are the same as the key commands for Print and Find, respectively. Common commands should take priority over media navigation commands. For example, if an app supports both plays media and prints, the key command Ctrl+P should print.

Visual feedback

Use focus rectangles only with keyboard interactions. If the user initiates a touch interaction, make the keyboard UI gradually fade away. This keeps the UI clean and uncluttered.

Don't display visual feedback if an element doesn't support interaction (such as static text). Again, this keeps the UI clean and uncluttered.

Try to display visual feedback concurrently for all elements that represent the same input target.

Try to provide on-screen buttons (such as + and -) as hints for emulating touch-based manipulations such as panning, rotating, zooming, and so on.

For more general guidance on visual feedback, see Guidelines for visual feedback.

Related topics

UX guidelines for custom user interactions
Developers
Keyboard interactions
Samples
Input: Touch keyboard text input sample
Responding to the on-screen keyboard sample
Input: Touch keyboard sample (C#/C++ only)

 

 

Show:
© 2015 Microsoft