Differences between revisions 9 and 15 (spanning 6 versions)
Revision 9 as of 2011-07-04 20:16:17
Size: 10055
Editor: shoobe01
Comment:
Revision 15 as of 2011-07-31 23:08:43
Size: 11554
Editor: shoobe01
Comment:
Deletions are marked like this. Additions are marked like this.
Line 2: Line 2:
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. You must always clearly communicate the position of current and future input behaviors 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.

'''Focus & Cursors''' are built in to every OS, but there are many opportunities to use them inappropriately. Be sure to use the correct methods, and to actually design easily-perceived indicator states in your application or website
Line 6: Line 8:
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. Generally, you must allow the user to only immediately interact with one element of the screen 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. 
Line 10: Line 12:
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. You can use a similar indicator is used to indicate certain types of connection. This can be seen with charge indicator LEDs which are 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.
Line 13: Line 15:
{{attachment:FocusAndCursors-Focus.png|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.|align="right"}} {{attachment:FocusAndCursors-Focus.png|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.|align="right"}}
Line 17: Line 19:
Cursors always indicate position, but may also indicate the current state of input.  Cursors always indicate position, but may also indicate the current state, as described in the '''[[Input Method Indicator]]''' pattern.
Line 23: Line 25:
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. While scrolling input devices of all sorts are "relative," and all input starts from the coordinates of the last input, most of the purely touch and pen devices are different. They are instead "absolute" pointing devices. When the finger or pen is not in contact, there is no focus point or 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.
Line 31: Line 33:
One exception to the relative pointing discussed above is that you will usually impose a cursor position on the interface when a page change is implemented. This is unlike a desktop system, where the mouse pointer generally does not move about the page without user input.
Line 32: Line 35:
{{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.}} The focus model, on the other hand, is very similar to the desktop application or website. New applications or pages automatically seize focus, and you may control this to the point of placing focus within a specific scrolling area, or text field, allowing entry without any use of a '''[[Directional Entry]]''' device.

For a related discussion of state changes based on position cursors, and interactivity with these changes, see the '''[[Press & Hold]]''' pattern.


{{attachment:FocusAndCursors-Pointers.png|Some examples of the variety of position cursors. Mostly, the simple pointer is most useful 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.}}
Line 37: Line 45:
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. You should almost always represent focus by changing either the background or the border of the element. For the background, use a color or saturation change, with the item in focus getting the highest contrast state. Sometimes, additional effects are useful, and only the item in focus has gradients to make it appear dimensional or shinier. Borders may change color, saturation or weight. Both borders and backgrounds may be changed together, of course.
Line 39: Line 47:
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. You can use additional effects, such as shadows, but be careful not to make the focus element float off the page, or it may look like a modal dialogue instead. Any number of other variations may also be used, but should always be in conjunction with borders or backgrounds.
Line 41: Line 49:
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. Don't forget to take advantage of other elements or widgets. 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. Understanding how the page will actually be presented may save you from having to too work hard to express focus.
Line 47: Line 55:
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. Make sure cursors are visible, regardless of the background. Use shadows and/or contrasting borders to assure this. Cursors are typically white, with a black hairline border. Some text cursors for controlled areas such as form fields can be solid hairlines, as long as you make sure the field background is a solid, contrasting color. 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.
Line 51: Line 59:
{{attachment:FocusAndCursors-Text.png|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.|align="right"}} {{attachment:FocusAndCursors-Text.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"}}
Line 55: Line 63:
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. Arbitrary modifications to the cursor may be sufficient to indicate a state change when an '''[[Input Mode Indicator]]''' is displayed elsewhere, but otherwise you should try to make it 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.
Line 57: Line 65:
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 should always be used for pen input devices. Due to the precision of the pointer, small parallax changes may induce errors, and presenting a cursor will help avoid this.
Line 63: Line 69:
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. 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.
Line 76: Line 82:
----
Next: '''[[Other Hardware Keys]]'''
Line 79: Line 86:
Please do not change content above this like, as it's a perfect match with the printed book. Everything else you want to add goes down here. Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.

Problem

You must always clearly communicate the position of current and future input behaviors 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.

Focus & Cursors are built in to every OS, but there are many opportunities to use them inappropriately. Be sure to use the correct methods, and to actually design easily-perceived indicator states in your application or website

Solution

Generally, you must allow the user to only immediately interact with one element of the screen 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.

You can use a similar indicator is used to indicate certain types of connection. This can be seen with charge indicator LEDs which are 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.

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.

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, as described in the Input Method Indicator pattern.

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.

While scrolling input devices of all sorts are "relative," and all input starts from the coordinates of the last input, most of the purely touch and pen devices are different. They are instead "absolute" pointing devices. When the finger or pen is not in contact, there is no focus point or 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.

One exception to the relative pointing discussed above is that you will usually impose a cursor position on the interface when a page change is implemented. This is unlike a desktop system, where the mouse pointer generally does not move about the page without user input.

The focus model, on the other hand, is very similar to the desktop application or website. New applications or pages automatically seize focus, and you may control this to the point of placing focus within a specific scrolling area, or text field, allowing entry without any use of a Directional Entry device.

For a related discussion of state changes based on position cursors, and interactivity with these changes, see the Press & Hold pattern.

Some examples of the variety of position cursors. Mostly, the simple pointer is most useful 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.

Presentation Details

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

You should almost always represent focus by changing either the background or the border of the element. For the background, use a color or saturation change, with the item in focus getting the highest contrast state. Sometimes, additional effects are useful, and only the item in focus has gradients to make it appear dimensional or shinier. Borders may change color, saturation or weight. Both borders and backgrounds may be changed together, of course.

You can use additional effects, such as shadows, but be careful not to make the focus element float off the page, or it may look like a modal dialogue instead. Any number of other variations may also be used, but should always be in conjunction with borders or backgrounds.

Don't forget to take advantage of other elements or widgets. 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. Understanding how the page will actually be presented may save you from having to too work hard to express focus.

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.

Make sure cursors are visible, regardless of the background. Use shadows and/or contrasting borders to assure this. Cursors are typically white, with a black hairline border. Some text cursors for controlled areas such as form fields can be solid hairlines, as long as you make sure the field background is a solid, contrasting color. 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.

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.

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 otherwise you should try to make it 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.

Position cursors should always be used for pen input devices. Due to the precision of the pointer, small parallax changes may induce errors, and presenting a cursor will help avoid this.

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.


Next: Other Hardware Keys


Discuss & Add

Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.

Examples

If you want to add examples (and we occasionally do also) add them here.

Make a new section

Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.

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