Table of Contents
Figure 10.1. A plethora of pointing devices: mouse, trackball, foot-operated mouse, joystick, trackpad, and a finger-mounted pointing device.
For most users, the mouse provides the main way of interacting with graphical user interfaces. The term "mouse" is used here to include other pointing devices that can be used to move the pointer around the screen, such as trackballs, trackpads, spaceballs, graphics tablets, or assistive technology devices that emulate a mouse.
For right-handed users, the left button on a conventional mouse is used for the majority of mouse actions. We therefore call it the left button here, even though it may not always physically be so. For this reason, you may sometimes see this referred to in code or documentation as "Button 1" or the "Selection Button".
Also for right-handed users, the right button on a conventional mouse is the one used for operations involving pop-up menus. We therefore call it the right button here, even though it may not always physically be so. You may sometimes see this referred to in code or documentation as "Button 3" or the "Menu Button".
A conventional mouse with three buttons normally has its third button (or a scrollwheel that acts as a button when pushed) between the left and right buttons. We therefore call it the middle button, but you may sometimes see this referred to in code or documentation as "Button 2" or the "Transfer Button".
Guidelines
Your application uses left button gestures for selecting, activating components, dragging, and the display of drop-down menus.
Your application uses right button gestures to display and select actions from a popup menu.
Your application uses the middle button to paste the current PRIMARY (usually the last-highlighted) selection at the pointer position, as follows:
Table 10.1. Effect of modifier keys on a middle button transfer operation
Modifier | Function |
---|---|
Unmodified | Copy selection |
Ctrl | Copy selection |
Shift | Move selection |
Shift-Ctrl | Create link, shortcut or alias to selection |
Do not over-ride this functionality in any part of your user interface where the transfer action is likely to be useful. If you do intend to use the middle button for a different purpose somewhere, only do so as a shortcut for experienced users, and only for operations that can also be performed without using the right button or middle button.
If present, the scrollwheel should scroll the currently focused window or control, if it supports scrolling.
Do not depend on input from the middle or right mouse buttons. As well as being physically more difficult to click, some pointing devices and many assistive technology devices only support or emulate the left mouse button. Some assistive technologies may noteven emulate the mouse at all, but generate keyboard events instead.
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.
Do not warp the mouse pointer, or restrict mouse movement to part of the screen. This can interfere with assistive technologies, and is usually confusing even for users who do not rely on assistive technologies.
Do not require the use of chording (pressing multiple mouse buttons simultaneously) for any operations.
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.
Allow all mouse operations to be cancelled before their completion. Pressing the 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.
Do not assign any actions exclusively to the middle button of a three-button mouse, as not all mice have one.
Do not hard-code mouse target sizes, or make them too small. Define any mouse targets to be at least as large as the arrow button in a GtkSpinBox in the current gtk theme. Bear in mind that a user with impaired dexterity or vision may be using a theme that results in considerably larger widgets than the default theme.
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.
For controls or windows that contain a number of objects that the user can select, either singly or multiply, ensure the following mechanisms are in place to allow selections to be made using either the mouse or the keyboard.
Table 10.2. Standard mouse and keyboard selection mechanisms
Mouse | Keyboard | |
---|---|---|
Select item, deselect all others | Click | Space |
Add/remove item from selection | Ctrl click (toggles item's selected state) | Ctrl-Space (toggles focused item's selected state) |
Extend selection | Shift click | Shift-Space, Ctrl-Home, Shift-End, Shift-PageUp, or Shift-PageDown |
Move focus | Click appropriate item to select it | Cursor keys, Home, End, PageUp, and PageDown move focus and selection simultaneously.
Ctrl-cursor keys, Ctrl-Home,Ctrl-End, Ctrl-PageUp, and Ctrl-PageDown move focus without affecting current selection. |
Select All | Click first item, then Shift click last item | Ctrl-A |
Deselect All | Click container background | Shift-Ctrl-A |
Activate selection | Double-click to activate a single selection. Shift or Ctrl double-clicking extends or adds item to selection first before activating the entire selection. | Return activates entire selection. If nothing is currently selected, selects currently-focused item first. |
Invert Selection | No mouse equivalent | Ctrl-I |
For a container whose objects may be arranged in two dimensions (e.g. Nautilus "View as Icons"), allow multiple selection by dragging a bounding box around one or more objects. Shift left button drag should add all the objects within the bounding box to the existing selection. Ctrl left button drag should toggle the selected state of all the objects within the bounding box.
Guidelines
By default, select only objects that are completely enclosed by the bounding box when the mouse button is released.
Use dynamic highlighting to show which objects are currently selected while the box is being dragged out. Do not wait until the mouse button is released. This avoids any uncertainty about which objects will be selected by the bounding box.
When a bounding box is being dragged out within a scrollable window, support automatic scrolling of that window when the box is dragged near the window's edges.
Figure 10.2. Examples illustrating dynamic selection highlighting during bounding box selection. In the first example, the folder color and label highlighting changes to indicate selection. In the second, selection is indicated by the addition of resizing handles to selected objects.
Drag and drop is a direct manipulation technique, by which you perform actions on selected objects by moving them around the screen with the mouse. An object is dragged by clicking it with the left mouse button, then moving the pointer to the object's target location while the button is still pressed. The object is dropped there by releasing the mouse button.
Guidelines
Provide visual feedback throughout a drag and drop operation. Highlight valid targets and change the mouse pointer as it passes over them. Use the "no drop" mouse pointer when passing over invalid drop targets.
Augment the mouse pointer with a representation of the objects being dragged. Keep this representation small or make it translucent, so as not to obscure possible drop targets underneath it.
Figure 10.3. Example of copy pointer augmented by an icon representing the file being copied
Allow the user to undo the effects a drag and drop operation by selecting Edit->Undo.
Only allow objects to be copied between applications, not moved. This avoids any confusion about which application's Undo function reverses the operation.
A drag and drop operation can be cancelled by: pressing Esc before releasing the mouse button, by dropping the object back on its original source, or by dropping the object on an invalid drop target.
Allow multiple objects to be dragged by Shift or Ctrl selecting them, then dragging any one of the selected objects.
Ensure that keyboard users can replicate all drag and drop actions using shortcut keys, such as Copy (Ctrl-C) and Paste (Ctrl-V).
Use standard pointer shapes across all GNOME applications for move, copy, multiple move, multiple copy, and invalid drop target.
When an item is being dragged within or into a scrollable window, support automatic scrolling of that window when the mouse is moved near its edges.
Pop up a menu when the user attemps to drop multiple objects on a target that only accepts single objects. On the menu, list all the objects being dragged, and a Cancel item.
Move selected objects when the user drags them within a container. Copy or link to selected objects when the user drags them between containers. A "container" may be a boundary imposed by the user interface (e.g. a top-level application window), or a user interface representation of a physical container (e.g. a mail server or disk partition).
Allow the user to modify the default behavior of a drag and drop operation by holding the Ctrl and/or Shift key throughout. If the user changes the modifier keys during the drag, e.g. to change a move operation to a copy, change the mouse pointer immediately and perform the new action when the mouse button is released.
Table 10.3. Effect of modifier keys during a drag and drop operation
Modifier | Function |
---|---|
Ctrl | Copy |
Shift | Move |
Shift-Ctrl | Create link, shortcut or alias |
Use the default GTK drag and drop pointers for the standard transfer operations listed below. This consistency helps ensure the user will know exactly what to expect when they release the mouse button. If you do have to design a new pointer for a non-standard transfer action not listed here, follow the style of the standard pointers.
Table 10.4. Mouse Pointers for Drag and Drop
Pointer Shape | Meaning |
---|---|
![]() | Move selection. The dragged selection will be moved to the drop location, removing it from its previous location. |
![]() | Copy selection. The dragged selection will be copied to the drop location, leaving the original intact. |
![]() | Link selection. A link to the selection will be inserted at the drop location. How the link appears will be application-dependent, it may be a hyperlink, an icon, or a duplicate of the orignal selection, for example. |
![]() | Can't drop here. Show this pointer while the mouse is over an area where the selection cannot be dropped. |
All objects on the desktop must behave consistently. Despite their specialized nature, applets are no exception.
Guidelines
The unmodified left mouse button must be sufficient to operate all your applet's controls. Applets are meant to be simple enough that modified clicking, or clicking with other mouse buttons (except to pop up the applet's menu) is never required.
Clicking the right button anywhere within the applet's enclosing window must display either the popup menu for the whole applet, or the popup menu for the control under the mouse pointer. Do not have "dead areas" in your applet that do not respond to a right click.
Do not use the middle button for anything except dragging the applet to a new location. Middle-clicking and dragging anywhere within the applet window must move the applet, do not require a drag bar or similar device.
Ctrlleft button drag should copy the applet, if moving to another panel; unmodified drag or Shiftleft button drag should move the applet, if moving to another panel. If moving within same panel, Ctrl=switched movement, Shift=push movement, Alt=free movement.
A well-designed keyboard user interface plays a key role when you are designing applications. Many power-users prefer to perform most operations with the keyboard rather than the mouse. Visually-impaired users can navigate software more effectively using the keyboard, because using the mouse depends on visual feedback of the mouse pointer location. And mobility impairments can prevent a user from successfully navigating using the mouse, because of the fine motor control skills required.
Make all mouse actions available from the keyboard, and include keyboard access to all toolbars, menus, links and buttons. Every function your application provides must be available using the keyboard alone. Hiding your mouse while you test your application is a great way to test this!
Figure 10.4. Dialog box and menu, with some of their access and shortcut keys indicated
Most functionality is easy to make available from the keyboard, by using access keys and shortcut keys, and the toolkit's built-in keyboard navigation features. All controls with labels should have access keys, and frequently-used menu items should be assigned shortcut keys. However, operations that rely on drag-and-drop, for example, may require more thought to make them keyboard accessible.
Guidelines
Provide efficient keyboard access to all application features. In particular, ensure every control on menus and in dialog boxes are directly focusable using access keys or shortcut keys.
Use a logical keyboard navigation order. When navigating around a window with the Tab key, keyboard focus should move between controls in a predictable order. In Western locales, this is normally left to right and top to bottom.
Ensure correct tab order for controls whose enabled state is dependent on checkbox, radio button or toggle button state. When such a button is selected, all its dependent controls should be enabled, and all the dependent controls of any other button in the group should be disabled. When the user selects a checkbox, radio button or toggle button that has dependent controls, do not automatically give focus to the first dependent control, but instead leave the focus on the button.
Do not over-ride existing system-level accessibility features. For example, the MouseKeys feature in the GNOME Keyboard Accessibility preferences dialog allows mouse movement and button clicks to be simulated using the keypad. Therefore you cannot add features to your application that can only be accessed by pressing keys on the keypad, as users relying on the MouseKeys feature will not be able to use them.
Ensure that any text that can be selected with the mouse can also be selected with the keyboard. This is a convenience for all users, but especially for those for whom fine control of the mouse is difficult.
Ensure that objects that can be resized or moved by drag and drop can also be resized or moved with the keyboard. For example, icons and windows on the desktop. Where precision sizing and placement is potentially important, e.g. shapes in a diagram, also consider providing a dialog into which you can type co-ordinates, or a means of snapping objects to a user-definable grid.
Do not use general navigation functions to trigger operations. For example, do not use basic Tab keyboard navigation in a dialog to activate any actions associated with a control.
Show keyboard-invoked menus, windows and tooltips near the object they relate to, but without hiding or obscuring the object to which the menu or tooltip refers,. In GNOME, popup menus are activated with Shift-F10, and tooltips with Ctrl-F1.
Provide more than one method to perform keyboard tasks where possible. Users may find some keys and key combinations easier to use than others.
Do not assign awkward reaches to frequently performed keyboard operations. Some people may only be able to use one hand on the keyboard, so shortcuts that can be easily used with one hand are preferable for common operations. In any case, having to frequently perform long or difficult reaches on the keyboard can increase muscle strain for all users, increasing the risk of pain or injury.
Do not require repetitive use of simultaneous keypresses. Some users are only able to press and hold one key at a time. Assistive technologies such as the GNOME Keyboard Accessibility preferences dialog do allow users to press the keys sequentially rather than simultaneously, but this of course means the operation will take longer for them.
Give all labelled components an access key (underlined letter), with the exception of toolbar control which would use up too many access key combinations.
Choose access keys to be as easy to remember as possible. Normally, this means using the first letter of the label. However, in complex windows, the choice can become more difficult. Here are some simple rules:
Assign access keys to the most frequently-used controls first. If it's not clear which controls will be the most frequently used, assign access keys from left to right, top to bottom (for Western locales).
Use the first letter of the label, or of one of its other words if it has more than one. If another letter provides a better association (e.g. "x" in Extra Large) however, consider using that letter instead.
If the first letter is not available, choose an easy to remember consonant from the label, for example, "p" in Replace.
If no such consonants are available, choose any available vowel from the label.
Do not assign access keys to "thin" letters (such as lowercase i or l), or letters with descenders (such as lowercase g or y) unless you have to. The underlines often do not show up very well on those characters.
Applications using a non-Roman writing system in conjunction with a standard keyboard can have control labels prefixed with Roman characters as access keys.
The tables in the section called “Standard Application Shortcut Keys” summarize the standard shortcut keys to use when your application supports those functions. Your application will not necessarily support all of these functions, see the section called “Standard Menus” for more information. However, use the recommended shortcut keys for those functions you do support.
You will probably want to add your own shortcut keys for functions specific to your application. If so, as well as following the guidelines below, look at any other existing similar applications to see which shortcut keys they have defined. Your users may already be using those or similar applications, so being consistent where it is possible and sensible to do so will provide a better user experience for them when they begin to use yours.
Guidelines
Use Ctrl-letter in preference to other combinations when choosing new shortcut keys.
Insert, Delete, Home, End, Page Up and Page Down are acceptable shortcut keys for functions that are closely related to those keys' normal system-defined uses. Do not assign them to unrelated functions just because you've run out of other shortcut key combinations, however.
Only assign shortcut keys to the most commonly-used actions in your application. Do not try to assign a shortcut key to everything.
Choose new shortcut keys to be as mnemonic as possible, as these will be easier to learn and remember. For example, Ctrl-E would be a good shortcut for a menu item called Edit Page.
Use Shift-Ctrl-letter for functions that reverse or extend another function. For example, Ctrl-Z and Shift-Ctrl-Z for Undo and Redo. Note that you cannot use Shift-Ctrl-A-thru-F, however, as these combinations are used to enter unicode characters in text fields.
Do not use Ctrl-number or numbered function keys as shortcut keys, unless the number has some obvious relevance to the action. For example, Ctrl-2 and Ctrl-3 may be acceptable shortcut keys for View->2D View and View->3D View in a 3D modelling application.
Do not use Alt-key combinations for shortcut keys, as these may conflict with window manager or menu access keys.
Do not use symbols that require Shift or other modifiers as part of a shortcut, for example Ctrl-%. Remember that symbols that can be accessed without a modifier key on your keyboard may be more difficult to access on different international keyboards.
Do not assign shortcut keys to menu items that change over time, for example a list of open windows on the Window menu, or a recently-used file list on the File menu. Do assign access keys to these items, however.
Do not use any of the standard shortcut keys listed in the section called “Standard Application Shortcut Keys” for your own purposes, even if your application doesn't support those functions. This helps reinforce consistency between all GNOME applications.
If your application uses any of the standard functions listed in the following tables, use the recommended standard keyboard shortcut for that function.
Table 10.5. Standard GNOME application shortcut keys and access keys - File menu
Function | Shortcut | Description |
---|---|---|
New | Ctrl-N | Create a new document |
Open | Ctrl-O | Open a document |
Save | Ctrl-S | Save the current document |
Ctrl-P | Print the current document | |
Send To... | Ctrl-E | Send the current document to an email recipient or remote location |
Close | Ctrl-W | Close the current document |
Quit | Ctrl-Q | Quit the application |
Table 10.6. Standard GNOME application shortcut keys and access keys - Edit menu
Function | Shortcut | Description |
---|---|---|
Undo | Ctrl-Z | Undo the last operation |
Redo | Shift-Ctrl-Z | Redo the last operation |
Cut | Ctrl-X | Cut the selected area and store it in the clipboard |
Copy | Ctrl-C | Copy the selected area into the clipboard |
Paste | Ctrl-V | Paste contents of clipboard at mouse/cursor position |
Duplicate | Ctrl-U | Duplicate the currently-selected items and add them to the same window, without affecting the clipboard |
Select All | Ctrl-A | Select everything in focused control or window |
Invert Selection | Ctrl-I | Select everything in focused control or window that was previously unselected, and deselect everything that was previously selected |
Delete | Del | Delete selection |
Find | Ctrl-F | Find matches in the current document, highlighting them in-place |
Search | Ctrl-F (see note below) | Search for matches in multiple documents, files or other external sources |
Find Next | Ctrl-G | Find the next match |
Replace | Ctrl-H | Find and replace matches |
Rename | F2 | Switch the selected item's label into edit mode, allowing user to type in a new name. |
If your application requires both Edit->Find and Edit->Search menu items, use Shift-Ctrl-F as the shortcut for Search.
Table 10.7. Standard GNOME application shortcut keys and access keys - View menu
Function | Shortcut | Description |
---|---|---|
Zoom In | Ctrl-Plus | Zoom in on the document |
Zoom Out | Ctrl-Minus | Zoom out of the document |
Refresh | Ctrl-R | Redraw current view of document, without checking if content has changed |
Reload | Ctrl-R (see note below) | Reload the current document, updating content from source if necessary |
If your application requires both View->Reload and View->Refresh menu items, use Shift-Ctrl-R as the shortcut for Reload.
Table 10.8. Standard GNOME application shortcut keys and access keys - Bookmarks menu
Function | Shortcut | Description |
---|---|---|
Add Bookmark | Ctrl-D | Add a bookmark for the current location |
Edit Bookmarks... | Ctrl-B (see note below) | Open a window in which the user can edit and organise saved bookmarks |
If your application requires both Format->Bold and Bookmarks->Edit Bookmarks... menu items, use Shift-Ctrl-B as the shortcut for Edit Bookmarks.
Table 10.9. Standard GNOME application shortcut keys and access keys - Go menu
Function | Shortcut | Description |
---|---|---|
Back | Alt-Left | Go to the previous location in the navigation chain |
Next | Alt-Right | Go to the next location in the navigation chain |
Up | Alt-Up | Go up one level in the navigation hierarchy |
Home | Alt-Home | Go to the starting page defined by the user or application |
Table 10.10. Standard GNOME application shortcut keys and access keys - Format menu
Function | Shortcut | Description |
---|---|---|
Bold | Ctrl-B | Make selected text bold/regular |
Underline | Ctrl-U | Underline/remove underline from selected text |
Italic | Ctrl-I | Make selected text italic/regular |
Table 10.11. Standard GNOME application shortcut keys and access keys - Help menu
Function | Shortcut | Description |
---|---|---|
Contents | F1 | Show help contents page for the current application |
The following shortcut keys are used by many window managers, and should not normally be over-ridden by your application.
Table 10.12. Standard window manager shortcut keys and access keys
Function | Shortcut | Description |
---|---|---|
Switch windows | Alt-Tab, Shift-Alt-Tab | Switch focus to the next or previous window on the desktop |
Switch panels | Ctrl-Alt-Tab, Shift-Ctrl-Alt-Tab | Switch focus to the next or previous panel on the desktop |
Window menu | Alt-Space | Pop up window menu |
Close | Alt-F4 | Close the focused window |
Restore | Alt-F5 | Restore the focused to its previous size |
Move | Alt-F7 | Move the focused window |
Resize | Alt-F8 | Resize the focused window |
Minimize | Alt-F9 | Minimze the focused window |
Maximize | Alt-F10 | Maximize the focused window |
Full Screen | Ctrl-F11 | Show the window in full screen mode, with no border, menubar, toolbar or statusbar |
The following shortcut keys are reserved for keyboard navigation use by the various widgets used in GNOME, and should not normally be over-ridden by your application.
Table 10.13. Standard GNOME keyboard navigation keys for widgets
Key | Function |
---|---|
Tab, Shift-Tab | Moves keyboard focus to next/previous control |
Ctrl-Tab, Shift-Ctrl-Tab | Moves keyboard focus out of enclosing widget to next/previous control, in those situations where Tab alone has another function (e.g. GtkTextView) |
Ctrl-F1 | Pop up tooltip for currently-focused control |
Shift-F1 | Show context-sensitive help for currently-focused window or control |
F6, Shift-F6 | Give focus to next/previous pane in a GtkPaned window |
F8 | Give focus to splitter bar in paned window |
F10 | Give focus to window's menu bar |
Shift-F10 | Pop up contextual menu for currently-selected objects |
Space | Toggle selected state of focused checkbox, radio button, or toggle button |
Return | Activate focused button, menu item etc. |
Home, End | Select/move to first item in selected widget |
PageUp, Ctrl-PageUp, PageDown, Ctrl-PageDown | Scroll selected view by one page up/right/down/left |
The following emacs-style navigation shortcut keys are still available in GNOME 2.0 text entry fields (by selecting the "emacs" scheme in the GNOME Keyboard Shortcuts preferences dialog), but are disabled by default. Since some users will still want to use them, do not over-ride them for your own purposes in any situations where a text entry control has focus.
Table 10.14. Emacs-style navigation keys for widgets
Key | Function |
---|---|
Ctrl-A | Move cursor to beginning of line |
Ctrl-D | Delete character following/under cursor |
Ctrl-E | Move cursor to end of line |
Ctrl-K | Delete from cursor to end of line |
Ctrl-U | Delete current line |
Ctrl-W | Cut to clipboard |
Ctrl-Y | Paste from clipboard |
Ctrl-Space | Set mark |
Ctrl-Del, Alt-D | Delete from cursor to end of word |
Ctrl-Backspace | Delete from cursor to start of word |
Alt-Space | Delete all whitespace around cursor, reinsert single space |
Alt-\ | Delete all whitespace around cursor |
Panels have been fully keyboard navigable since GNOME 2.0. Since your panel application can gain keyboard focus, you must ensure that it is also keyboard navigable.
The rules for panel application keyboard navigation are mostly the same as those for any other window. However, there is one imporant difference:
Do not use the the Tab key as the means of moving focus between controls in a panel application. Use the arrow keys for this purpose instead.
When an object on a panel has focus, the Tab key normally moves focus to the next object on the panel. If your panel application also used Tab for its own internal navigation, the user would have to press Ctrl-Tab to move focus out of your panel application instead. This inconsistency would be detremental to the user experience.