Mouse interactions (Windows Store apps)

Applies to Windows only

Optimize your Windows Store app design for touch input and get basic mouse support by default.

 

mouse

 

Design and build Windows Store apps that users can interact with through a mouse.

Mouse input is best suited for user interactions that require precision when pointing and clicking. This inherent precision is naturally supported by the UI of Windows, which is optimized for the imprecise nature of touch.

Where mouse and touch input diverge is the ability for touch to emulate direct manipulation of UI elements on the screen through physical gestures performed on those objects (such as swiping, sliding, dragging, rotating, and so on).

This topic describes design considerations for mouse interactions. For information about the implementation of mouse interactions, see Responding to mouse interactions.

Mouse language

Windows provides a concise set of mouse interactions that are used consistently throughout the system.

TermDescription

Hover to learn

Hover over an element to display more detailed info or teaching visuals (such as a tooltip) without a commitment to an action. For more info on tooltips, see Guidelines for tooltips.

Left-click for primary action

Left-click an element to invoke its primary action (such as launching an app or executing a command).

Scroll to change view

Display scroll bars to move up, down, left, and right within a content area. Users can scroll by clicking scroll bars or rotating the mouse wheel. Scroll bars can indicate the location of the current view within the content area (panning with touch displays a similar UI).

Right-click to select and command

Right-click to display the navigation bar (if available) and the app bar with global commands. Right-click an element to select it and display the app bar with contextual commands for the selected element.

Note  Right-click to display a context menu if selection or app bar commands are not appropriate UI behaviors. But we strongly recommend that you use the app bar for all command behaviors.

UI commands to zoom

Display UI commands in the app bar (such as + and -), or press Ctrl and rotate mouse wheel, to emulate pinch and stretch gestures for zooming.

UI commands to rotate

Display UI commands in the app bar, or press Ctrl+Shift and rotate mouse wheel, to emulate the turn gesture for rotating. Rotate the device itself to rotate the entire screen.

Left-click and drag to rearrange

Left-click and drag an element to move it.

Left-click and drag to select text

Left-click within selectable text and drag to select it. Double-click to select a word.

Mouse corners and edges for system commands

Move mouse to top-right or bottom-right corner on left-to-right (or left edge on right-to-left layouts) of the screen reveals the charms that expose system commands.

Move mouse to top-left corner on left-to-right (or top right cornier on right-to-left layouts) to display thumbnail of the most recently used app. Left-click or click-and-drag to cycle through and switch to running apps or drag to the app (if supported by screen resolution).

Move mouse to the bottom-left corner on left-to-right (or bottom right cornier on right-to-left layouts) to display thumbnail of the Start screen.

Left-click and drag from the top edge toward the bottom edge of the screen to close the current app.

Left-click and drag from the top edge down and to the left or right edge to resize the current app to that side of the screen.

 

Guidelines for visual feedback

  • When a mouse is detected (through move or hover events), show mouse-specific UI to indicate functionality exposed by the element. If the mouse doesn't move for a certain amount of time, or if the user initiates a touch interaction, make the mouse UI gradually fade away. This keeps the UI clean and uncluttered.
  • Don't use the cursor for hover feedback, the feedback provided by the element is sufficient (see Cursors below).
  • Don't display visual feedback if an element doesn't support interaction (such as static text).
  • Don't use focus rectangles with mouse interactions. Reserve these for keyboard interactions.
  • Display visual feedback concurrently for all elements that represent the same input target.
  • Provide buttons (such as + and -) 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.

 

 

Show:
© 2015 Microsoft