Cursor & Tooltip Design & Development

Posted Fri, 05/08/2009 - 23:08

Overview

Cursors:

A cursor is an indicator used to show the position on a computer monitor or other display device that will respond to input from a keyboard or pointing device. A cursor indicates to the user whether they can click, drag, move, or resize an element on the screen, or if they must wait for the system to complete a process. When used in combination with a tooltip, the user can learn what an element's purpose is directly on the user interface, without needing to navigate to a help file or other user assistance.

Many users are familiar with certain indicators from the cursor to know whether something on the page is clickable or actionable. It is essential that the developer uses of proper signals and directors for consistency across solutions.

Tooltips:

A tooltip is a pop-up window that appears when a user hovers the cursor over an element, such as a toolbar button or a link.   There are three types of tooltips:

• Labels - Print, Save, New
• Informational - CTRL-+P, "Click here for more information"
• Dynamic - Statistics, Statuses, or other content that may vary. 

The tooltip appears for a specified amount of time, designated by the developer. If the user moves the mouse pointer away from the element, the pop-up window disappears because the tooltip is no longer in focus.

Tooltip content should be static. Users don't expect tooltips to change from one instance to the next, so they are unlikely to notice changes in dynamic content, such as status information. Notification area icon tooltips are a notable exception. Users are more likely to discover changes in tooltip content there because these icons primarily communicate status.  Other than these specific instances, the use of dynamic tooltips should be avoided.

Behavior

Cursor behavior is used to give the user an indication of what type of content is directly behind the cursor on the screen. The cursor changes its behavior and visual representation depending on the circumstances of the task, and therefore gives the user a visual cue. A hotspot (the cursor's active region) is normally on the cursor's top left corner, though it may reside at any location in the cursor icon. 

When the mouse cursor hovers over the element, the tooltip will appear after the amount of time specified. The tooltip appears at the bottom-right corner of the mouse and disappears after the amount of time specified, or when the mouse cursor moves outside the element.

NOTE: General cursor style and behavior is controlled at the operating system level.

Graphic Considerations

A tooltip is a boxed text message that displays when a mouse cursor hovers over an element that requires more information.  Tooltips cannot contain links, icons or buttons. The tooltip is typically a one or two word description of what the item does. The look and feel of the tooltip should default to the operating system API, although there may be use cases where the OS look and feel setting should be overridden.

Tooltips are placed near the object being hovered, at the pointer's tail or head if possible. They should not interfere with what the user is doing by obscuring or hiding the object of interest. Preventing this problem might require you to move the tooltip away from the pointer but adjacent to the object. Make sure the relationship between the element and its tooltip is clear. 

A Reveal is similar to a tooltip consisting of a container that holds supporting data and input components. It's purpose is to provide formattable contextual details or actions independent of the operating system's visual parameters. Triggered by clicking on a link or control, the reveal visually sits above all other content on the workspace and is achored ot the link or control that launched the reveal. The reveal's content may contain controls and information.  To close the reveal, the user can click either the "x" in the reveal title bar, or click anywhere on the workspace.

 

Usage Guidelines

NOTE: Cursor style is controlled by the user's operating system.  If a user overrides the default cursor style the application cursor should reflect the change.  (This is an accessibility requirement)

Cursors:

There are four main types of cursor, with additional cursors available:

1) Default cursor: arrow pointing up and to the left; displays when the mouse pointer is hovering over white space. This means that there is no content under the mouse pointer that can be selected or manipulated in any way.  The color of the pointer is OS specific. 

2) Text cursor: displays when the mouse pointer is hovering over text or an area that can be selected or an area that may be typed in.  The cursor changes to a vertical bar with smaller cross-bars (or curved serif-like extensions) at the top and bottom - sometimes referred to as an "I-Beam".

3) Pointer cursor: When the cursor hovers over an active region, hyperlink or "hotspot", it changes into a hand with an outstretched index finger or arrow (i.e. a link, button, etc.).  Often, informative text about the active region will display in a tooltip, which disappears when the user moves the cursor away.

4) Loading cursor: While a computer process is performing tasks and cannot accept user input, such as while an application is loading a web page or patient data, a wait cursor is displayed when the cursor is in the corresponding window.

Other cursor options:

Graphics-editing cursors such as brushes, pencils, or paint buckets may display when the user edits an image.

• When displaying a document, the cursor may appear as a hand with all fingers extended, allowing scrolling by "pushing" the displayed page around. When the document or image is being "pushed" (often controlled by the combination of pressing SPACEBAR while clicking) this cursor changes to a "squeezed (gripping) hand".

• Resizing: On an edge or corner of a window, the cursor usually changes into a double arrow (horizontal, vertical, or diagonal) indicating that the user can drag the edge/corner in an indicated direction in order to adjust the size and shape of the window.

Tooltips Guidelines:

• Use tooltips to provide labels for unlabeled controls. (for example, toolbar buttons) 
• The content of a tooltip can only contain text. General rule of thumb - "if you can do it in Notepad, you can do it with a tooltip".
• Content for tooltips describing icons should always contain the icon's keywords (found in the icon search page).
• Use sentence fragments when creating tooltips and end the fragment without ending punctuation (Print document). 
• Use sentence-style capitalization (capitalize only the first word). 
• A label with additional information signified with an ellipsis always has a tooltip.
• Tooltips should be concise. They must be brief but specific. The first few words should give the user a good idea of what the link is about. The small windows used for tooltips are perfect for short sentences and sentence fragments, as well as formatted text. Large, unformatted blocks of text are difficult to read and overwhelming.
• Tooltips should be helpful. Text must be informative. The tooltip shouldn't be obvious or just repeat what is already on the screen.
• Because the tooltip text isn't always visible, it should be supplemental information that users do not have to read. Important information should be communicated using self-explanatory control labels or in-place supplemental text.
• Hyperlink tooltips are an option, but should be used only if the link itself does not adequately describe the destination adequately.

Appropriate timeouts:
The appropriate automatic display and removal of tootips is crucial to the goal of users maintaining control of their UI environment. Tooltips have three timeout values:

• Initial. The time the pointer must remain stationary for the tip to appear. The default time is 0.5 seconds.
• Reshow. The time the tooltip must remain stationary as the pointer moves from one target to another. The default time is 0.1 seconds.
• Removal. The length of time the tooltip is displayed before its removal. The default time is 5 seconds.

Having too short initial and reshow values results in an annoying, disruptive experience because the tooltip would often be shown inadvertently, whereas a wait time that is too long results in tooltips seeming unresponsive or undiscoverable. The default removal time works well for short tip text, as used in tooltips. Items with longer text need longer display times.

Rationale

Use discoverable tooltips that display concise, helpful, static, supplemental information in the appropriate place at the appropriate time.

You can improve discoverability by using tooltips consistently. If you provide tooltips for some objects, you should provide them for all similar objects. 

Accessibility Considerations

Methods to make cursors usable:

• Automatic moving of on-screen pointer should be an option which enables the automatic moving of the on-screen pointer onto the active window, button, or menu.

• Operation of the on-screen pointer by means of the keyboard should be made available.  The keyboard should be able to substitute for pointing device operation such as moving of the on-screen pointer, clicking, double clicking, and dragging.  (Everything the mouse can do, the keyboard must be able to do!)
• Provide more than one way to access a control if that control requires a tooltip that doesn't have keyboard access.
• When used appropriately for concise, helpful, static, supplemental information, tooltips can improve overall accessibility. In fact, the ALT+TEXT tooltip pattern is the preferred way to make graphics accessible.

References

[1] Wikipedia - Cursors

[2] Wikipedia - Tooltips

[3] Web Usability course - How to write usable tooltips for links

[4] Description of Accessibility Guidelines for use of computers by those with disabilities and the elderly

[5] Microsoft Developer Network 

• Send to friend