Design and Layout:Visual Design:Cursors
From KDE-HIG_Wiki
The pointer may adopt a variety of shapes, depending on its context of use. For example, when moved over the edges of a window, the pointer indicates that the window may be resized by showing a double-headed arrow. When located over a link, the pointer turns into a hand. When the zoom mode is active, a small magnifying glass is displayed next to the pointer.
Besides that, the pointer changes its shape to provide feedback on drag and drop operations. When dragging an object from one location to another, the pointer has to indicate that an object is dragged, in which manner it is dragged, and where it may be dropped. These issues are handled in section Pointer and Destination Feedback in chapter Drag and Drop Operations
Sometimes it is required to provide additional pointer feedback. For example, in applications that use different interaction modes, the mouse pointer should indicate the currently selected mode or tool.
Mostly, such tools change the mode of interaction permanently (e.g. the paint paint brush tool in graphics applications, or the zoom tool in image and document viewers). Sometimes, the tool is activated for one single action only. Afterwards, the interaction mode is set back to the default or previously activated mode (e.g. the pipet tool to choose colors is sometimes implemented that way).
Pointer Feedback
Guidelines
Cursor defaults
- Make use of the standard pointers as described in the implementation suggestions.
- Use icons for application-specific pointer feedback in consistency with other KDE applications.
Special cursors
- Before designing a new cursor, cooperate with the developers of other KDE applications which provide similar tools and functions.
- If you need to include your own cursors which are not in the default icon set, follow these steps:
- Assign descriptive names so the cursors can be reused by other applications.
- Open a cursor request by adding it to the Spreadsheet in SVN (playground/artwork/Oxygen/docs/cursors.ods). The artists are going to create the cursor and check it in to svn, considering your cursor name. If you already have a cursor or can't wait for the artists to create one, simply check the icon in to svn.
- If you design your own cursor, make sure it is clearly indicated where the cursor's insertion point is. Also, provide the cursor in all sizes that can be set in the system settings.
Implementation Suggestions
| Cursor | Shape | Description |
| left_ptr |  |
Default cursor. Indicates the interface is idle and prepared to accept commands from the user. Used to manipulate basic user interface elements like buttons and scrollbars. |
| ibeam |  |
Text input cursor. Indicates that the cursor is in a region in which horizontal text can be selected and possibly edited. |
| pointing_hand |  |
Indicates that the object below the cursor is clickable. This cursor is typically used for links in web browsers. It shouldn't be abused for pushbuttons and other UI elements where it's otherwise apparent by the design of the widget that it's a clickable object. |
| whats_this |  |
Help cursor. Indicates that the system is in a context help mode, and if the user clicks an object a small window will open up to provide usage information for that object. The context help mode is typically activated by clicking a help button on the titlebar of a window that provides context help. |
| left_ptr_watch |  |
Default cursor + busy cursor. Indicates a pending activity which may asynchronously affect the interface but which is not blocking commands from the user. |
| wait |  |
Busy cursor. Indicates that the interface is not prepared to accept commands from the user and is blocked on some external resource. |
| !DnD copy cursor. Indicates that a copy of the dragged object will be created in the area below the cursor if dropped. | ||
| !DnD link cursor. Indicates that a link to the original location of the dragged object will be created in the area below the cursor if dropped. | ||
| !DnD no-drop cursor. Indicates that the dragged object can't be dropped in the region below the cursor. | ||
| forbidden |  |
Forbidden cursor. Indicates that a particular region is invalid for the current operation. Often rendered as circle with a diagonal line through it. |
| Scroll/move cursor. Used to indicate that moving the mouse will also move the UI element below the cursor. | ||
| split_h |  |
Horizontal splitter bar cursor. Indicates that the bar below the cursor can be moved up and down to resize the objects it separates. Used when it's not apparent if the object below the cursor is just a visual separator between two other UI elements, or an object that can be manipulated. U |
| split_v |  |
Vertical splitter bar cursor. Indicates that the bar below the cursor can be moved left and right to resize the objects it separates. Used when it's not apparent if the object below the cursor is just a visual separator between two other UI elements, or an object that can be manipulated. |
| size_all |  |
Indicates that the cursor is over the right edge of a window, and that the edge can be clicked and dragged in order to resize the window horizontally. |
| size_bdiag |  |
Indicates that the cursor is over the top-right edge of a window, and that the edge can be clicked and dragged in order to resize the window diagonally. |
| size_fdiag |  |
Indicates that the cursor is over the top-left edge of a window, and that the edge can be clicked and dragged in order to resize the window diagonally. |
| size_ver |  |
Indicates that the cursor is over the top edge of a window, and that the edge can be clicked and dragged in order to resize the window vertically. |
| Indicates that the cursor is over the bottom-right edge of a window, and that the edge can be clicked and dragged in order to resize the window diagonally. | ||
| Indicates that the cursor is over the bottom-left edge of a window, and that the edge can be clicked and dragged in order to resize the window diagonally. | ||
| Indicates that the cursor is over the bottom edge of a window, and that the edge can be clicked and dragged in order to resize the window vertically. | ||
| size_hor |  |
Indicates that the cursor is over the left edge of a window, and that the edge can be clicked and dragged in order to resize the window horizontally. |
| up_arrow |  |
Up pointing arrow cursor. This cursor is typically used to identify an insertion point. |
| cross |  |
Crosshair cursor. Typically used for precision drawing or manipulation of an area. |
| Shape | Qt::CursorShapeValue | Cursor Name | Shape | Qt::CursorShape Value | Cursor Name |
|---|---|---|---|---|---|
| Qt::ArrowCursor | left_ptr | | Qt::SizeVerCursor | size_ver |
| Qt::UpArrowCursor | up_arrow | | Qt::SizeHorCursor | size_hor |
| Qt::CrossCursor | cross | | Qt::SizeBDiagCursor | size_bdiag |
| Qt::IBeamCursor | ibeam | | Qt::SizeFDiagCursor | size_fdiag |
| Qt::WaitCursor | wait | | Qt::SizeAllCursor | size_all |
| Qt::BusyCursor | left_ptr_watch | | Qt::SplitVCursor | split_v |
| Qt::ForbiddenCursor | forbidden | | Qt::SplitHCursor | split_h |
| Qt::PointingHandCursor | pointing_hand |  | Qt::OpenHandCursor | openhand |
| Qt::WhatsThisCursor | whats_this |  | Qt::ClosedHandCursor | closedhand |
Source: Qt4.2 API Reference (http://doc.trolltech.com/4.2/qcursor.html)
Accessibility Notes
