type="topic"

      id="pointer-and-touch-input">

  <info>

    <credit type="author">

      <name>Allan Day</name>

      <email>aday@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Jakub Steiner</name>

    </credit>

    <include href="legal.xml" xmlns="http://www.w3.org/2001/XInclude"/>

    <desc>Mouse, touchpad and touchscreen interaction.</desc>  

  </info>

<title>Pointer and touch input</title>

Pointer and touch input are two of the primary means through which users will interact with your application.

<section id="pointer-input">

<title>Pointer input</title>

A pointing device is any input device that allows the manipulation of a pointer - typically represented as an arrow, and often called a cursor - on screen. While mice and touchpads are the most common, there are a wide variety of such devices, including graphics tablets, track balls, track points and joysticks.

<section id="primary-and-secondary-buttons">

<title>Primary and secondary buttons</title>

Mice and touchpads often have two main buttons. One of these acts as the primary button, and the other acts as the secondary button. Typically, the left button is used as the primary button and the right button is used as the secondary button. However, this order is user-configurable and does not translate to touchscreen input. These guidelines therefore refer to primary and secondary action, rather than left and right.

Use the primary action for selecting items and activating controls. The secondary action can be used for accessing additional options, typically through a context menu.

Do not depend on input from secondary or other additional buttons. As well as being physically more difficult to click, some pointing devices and many assistive technology devices only support or emulate the primary button.

Press and hold should be used to simulate the secondary button on single button pointing devices. Therefore, do not use press and hold for other purposes.

</section>

<section id="general-guidelines">

<title>General guidelines</title>

<list>

<item>
Double click should not be used, since it is undiscoverable, and translates poorly to touch input.
</item>

<item>
If present on the mouse, the scrollwheel should scroll the window or control under the pointer, if it supports scrolling. Initiating scrolling in this way should not move keyboard focus to the window or control being scrolled.
</item>

<item>
Do not require the use of chording (pressing multiple mouse buttons simultaneously) for any operations.
</item>

<item>
Do not require the use of multiple (triple- or quadruple-) clicking actions for any operations, unless you also provide an accessible alternative method of performing the same action.
</item>

<item>
Allow all mouse operations to be cancelled before their completion. Pressing <key>Esc</key> should cancel any mouse operation in progress, such as dragging and dropping a file in a file manager, or drawing a shape in a drawing application.
</item>

<item>
Do not refer to particular mouse buttons in your interface unless absolutely necessary. Not everybody will be using a conventional mouse with left, middle and right buttons, so any text or diagrams that refer to those may be confusing.
</item>

</list>

</section>

<section id="mouse-and-keyboard-equivalents">

<title>Mouse and keyboard equivalents</title>

Ensure that every operation in your application that can be done with the mouse can also be done with the keyboard. The only exceptions to this are actions where fine motor control is an essential part of the task. For example, controlling movement in some types of action games, or freehand painting in an image-editing application.

If your application allows items to be selected, the following equivalent actions should be in place.

Action

Mouse

Keyboard

Open an item

Primary button

<key>Space</key>

Add/remove item from selection

<key>Ctrl</key> and primary button

<keyseq><key>Ctrl</key><key>Space</key></keyseq>

Extend selection

<key>Shift</key> and primary button

<key>Shift</key> in combination with any of the following: <key>Space</key> <key>Home</key> <key>End</key> <key>PageUp</key> <key>PageDown</key>

Change selection

Primary button

Any of the following: <key>←</key> <key>↑</key> <key>→</key> <key>↓</key> <key>Home</key> <key>End</key> <key>PageUp</key> <key>PageDown</key>

Select all

Primary button on first item, then primary button and <key>Shift</key> on the last item

<keyseq><key>Ctrl</key><key>A</key></keyseq>

Deselect all

Primary click on the container background

<keyseq><key>Shift</key><key>Ctrl</key><key>A</key></keyseq>

</section>

</section>

<section id="touch-input">

<title>Touch input</title>

Touch screens are also an increasingly common part of modern computer hardware, and applications created with GTK+ are likely to be used with hardware that incorporates a touch screen. To make the most of this hardware, and to conform to users’ expectations, it is therefore important to consider touch input as a part of application design.

<section id="application-touch-conventions">

<title>Application touch conventions</title>

Using touch input consistently with other applications will allow users to easily learn how to use your application with a touch screen. The following conventions are recommended, where relevant.

Action

Description

Result

Tap

<media type="image" mime="image/png" src="figures/touch/tap.svg"/>

Tap on an item.

Primary action. Item opens - photo is shown full size, application launches, song starts playing.

Press and hold

<media type="image" mime="image/png" src="figures/touch/tap-and-hold.svg"/>

Press and hold for a second or two.

Secondary action. Select the item and list actions that can be performed.

Drag

<media type="image" mime="image/png" src="figures/touch/drag.svg"/>

Slide finger touching the surface.

Scrolls area on screen.

Pinch or stretch

<media type="image" mime="image/png" src="figures/touch/pinch-or-stretch.svg"/>

Touch surface with two fingers while bringing them closer or further apart.

Changes the zoom level of the view (eg. Maps, Photos).

Double tap

<media type="image" mime="image/png" src="figures/touch/double-tap.svg"/>

Tap twice in quick succession.

Stepped zoom in.

Flick

<media type="image" mime="image/png" src="figures/touch/flick.svg"/>

Very quick drag, losing contact with the surface without slowing movement.

Removes an item.

</section>

<section id="system-touch-conventions">

<title>System touch conventions</title>

In GNOME 3, a number of touch gestures are reserved for use by the system. These should be avoided by applications.

Edge drag

<media type="image" mime="image/svg" src="figures/touch/edge-drag.svg"/>

Slide finger starting from a screen edge.

Top-left edge opens the application menu.

Top-right edge opens the system status menu.

Left edge opens the Activities Overview with the application view visible.

Three finger pinch

<media type="image" mime="image/svg" src="figures/touch/3-finger-pinch.svg"/>

Bring three or more fingers closer together while touching the surface.

Opens the Activities Overview.

Four finger drag

<media type="image" mime="image/svg" src="figures/touch/4-finger-drag.svg"/>

Drag up or down with four fingers touching the surface.

Switches workspace.

Three finger hold and tap

<media type="image" mime="image/svg" src="figures/touch/3-finger-hold-and-tap.svg"/>

Hold three fingers on the surface while tapping with the fourth.

Switches application.

</section>

</section>

</page>