Differences between revisions 6 and 7
Revision 6 as of 2011-03-22 13:12:05
Size: 9504
Editor: shoobe01
Comment:
Revision 7 as of 2011-03-22 13:12:34
Size: 9492
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 33: Line 33:
{{attachment:FocusAndCursors-Pointers.png|Text cursors should be made of the thinnest visible lines, with caps -- making it an “I-Beam” style -- to make it more visible. Entry mode indicators may be either vague, such as the diamond in the center, or specific, such as the lower-case a to the right.|align="right"}} {{attachment:FocusAndCursors-Pointers.png|Text cursors should be made of the thinnest visible lines, with caps -- making it an “I-Beam” style -- to make it more visible. Entry mode indicators may be either vague, such as the diamond in the center, or specific, such as the lower-case a to the right.}}

Problem

The position of input behaviors must be clearly communicated to the user. Within the screen, inputs may often occur at any number of locations, and especially for text entry the current insertion point must be clearly communicated at all times.

Solution

Generally, only one element of the screen can be immediately interacted with at a time. Areas and items for which immediate interaction is possible are considered "in focus." When an exact point is in use within this area, this is indicated by a cursor.

Expressions of focus and cursors serve to indicate the area and exact position so the user is aware their Directional Entry took effect correctly, and so they may take appropriate actions based on the item to be effected.

A similar indicator is used to indicate certain types of connection. This can be seen for charge indicator LEDs being adjacent to the port, and should be more common with near-field communications such as mobile payment schemes. A light, icon change or other effect either on screen or not, occurs at or adjacent to the point of communication to indicate successful linking. This overlaps heavily with the LED pattern; more clarity should emerge as these are implemented more.

Some examples of the variety of position cursors. Mostly, the simple pointer is most usefulm with the indicated space at the tip of the arrow. Very few state changes are helpful, but maginifiers are one that can work well. Pens should have high precision pointers. Certain other interaction can use subtle touch indications, such as the splash shown here, to indicate the contact has been made.

Variations

The most basic type of focus indicator or cursor simply indicates position. The specificity with which this is communicated can vary widely. Focus is general, and area or item-level, while a cursor indicates down to the pixel level.

Cursors always indicate position, but may also indicate the current state of input.

Though these two indicators are similar, they are perceived as different by users, so may be inconsistently employed, with position-only focus indication and state-indicating cursors.

Pointing cursors indicate position in two dimensions. Text entry cursors are almost a mix of focus and pointing; precision on the vertical axis is only to the line level, whereas in the horizontal it is to the pixel.

Most purely touch and pen devices have an unusual variation in that when the finger or pen is not in contact, there is no focus area; any point may be selected and then immediately becomes the cursor point, and the area it is in is within focus. There are certain exceptions, such as modal dialogues, which may restrict this "arbitrary" selection to specific areas.

Interaction Details

Focus indicators and cursors are purely display elements. They react to changes made as a result of general interaction, but are not themselves interactive element.

Devices that have both touch screens and other Directional Entry methods such as a 5-way pad, will need to support focus and cursor pointing at all times. Even if not displayed, the system must have an internally-declared location for the focus and cursor at all times,

Text cursors should be made of the thinnest visible lines, with caps -- making it an “I-Beam” style -- to make it more visible. Entry mode indicators may be either vague, such as the diamond in the center, or specific, such as the lower-case a to the right.

Presentation Details

Focus indicators and cursors must always be contextual, and reside not just within the interface but work with the existing design.

Focus is almost always represented by changing either the background or the border. For the background, this is usually a color or saturation change, with the item in focus getting the highest contrast state. Borders may change color, saturation or weight. Both borders and backgrounds may be changed together, of course.

Additional effects may be used, such as shadows, but be careful not to make the focus element look like a modal dialogue. Any number of other variations may also be used, but should always be in conjunction with borders or backgrounds.

State indicators may also be used to emphasize the element is in-focus. If the Input Mode Indicator is attached only to the side of the field in focus (and no other fields), this can help clarify the focus, and attract attention to the field or area.

State indicators, aside from indicating focus, are often attached to focus areas or cursors to provide additional, highly contextual information about the current state.

Cursors must be able to indicate to pixel-level precision. The position pointed at is usually the pixel immediately under or adjacent to the tip of the pointer; avoid obscuring user inputs with the cursor. Text entry cursors are derived directly from typewriters (and Linotype machines, and so forth); the next character entered will begin to be entered at the current cursor location, and extend to the right. The cursor will then move to the right side of the character just entered.

Cursors must be visible regardless of the background. Use shadows and/or contrasting borders to assure this. Cursors are typically white, with a black hairline border. Text cursors can generally be black or white hairlines, as the field should be solid white or black. Use the "I-beam" shape to make the cursor easier to pick out from the surroundings, with the crossbars above any ascenders and below any descenders. Text cursors must never fall outside the bounds of the text entry fields.

Scroll and select devices, with only a 5-way pad and no other pointing device, often have no cursor pointer. These rely on line-by-line or other item level focus. Naturally, the cursor exists during text entry as a subset of the field in focus.

Focus denotes areas of the page visible within the viewport that are currently able to accept input. These are designated with borders, as in the left example, or highlights as the button and line item in the middle and right examples. Tiers of focus may also be presented, as in the left two where the modal dialogue and individual fields are both in focus. On the right, a special case where two areas are in simultaneous focus, one for text entry and the other for selection.

Text cursors are at the insertion point for character entry, and highlight the affected area much like a focus area, when in predictive text modes. State changes should be depicted to indicate when a Mode Switch such as caps lock has been activated. These indicators may be vague, and require learning such as adding to or modifying the shape of the cursor, or may be specific and indicate the Mode Switch symbolically.

Arbitrary modifications to the cursor may be sufficient to indicate a state change when an Input Mode Indicator is displayed elsewhere, but should ideally be understandable by itself, or at least have a related visual language. This minor change, especially if some user-deciphering is required, may seem to not be worth the effort, especially when another indicator may already exist. However, users are often very focused on the cursor and areas immediately around it, so are very likely to see changes in this, which they may otherwise become aware of immediately.

For more state changes of position cursors see the Press & Hold pattern.

Position cursors should always be used for pen position, due to precision small parallax changes may induce errors. These should be used as they are with desktop computers, and remain in the last position, though they may disappear for video/game playback, when button scrolling is used, and in other cases where they may obscure content.

Position cursors are rarely used persistently for touch, but may sometimes appear to indicate single contacts have occurred. This can be especially helpful to assure the device has accepted the input, such as in sleep states, or where the device may otherwise not respond immediately, but a Wait Indicator would be unsuitable or intrusive.

Devices that have both touch screens and other Directional Entry methods such as a 5-way pad, may choose to not show the cursor when in touch or pen mode. However, as soon as a directional key is used, the focus area and cursor (if applicable) must appear. This should generally not require a keypress to activate the mode; the first keypress will move the focus or cursor in the direction selected.

Antipatterns

Avoid expressing focus only by pointing to the area or field, such as with an arrow in the left column. While such indicators may help guide step-by-step processes, they are insufficiently contextual to be the only method of indicating focus.

Avoid under-indicating. Focus and cursors work hand in hand. Make the focus area clear, to draw the user's eye to the cursor or text insertion point, even for touch or pen devices which may seem to not need traditional focus indication.

Do not follow desktop cursor examples strictly. For example, avoid the use of the "hourglass" pointer mode, and use the more mobile-appropriate Wait Indicator instead.

Examples

Focus & Cursors (last edited 2011-07-31 23:08:43 by shoobe01)