Screenshots: Clearest way to indicate button/link/tab to click?

[Geoff Hart <ghart -at- videotron -dot- ca>]

Jennifer Bennett wondered: <<In a screenshot, which is the clearest way 
to indicate a link/button/tab to click:>>

Here's something I've used with considerable success in the past:
- Open the image in Photoshop or another image editor.
- Use the selection tool to select the object you want to highlight.
- Invert the selection so everything _except_ that object (i.e., the 
background for that object) is highlighted.
- Open the image controls dialog and decrease the brightness of the 
background to about 50% of its original value. (You'll have to 
experiment to find a percentage that works well.)
- Add a callout arrow plus descriptive text that points at the object 
and says what to do about it.

This works well because it preserves the visual context (i.e., where to 
find the button or whatever), highlights the item unobtrusively (think 
italics rather than bold), and integrates text with the image to take 
advantage of the strengths of each medium. (The Dutch researchers have 
found this integration to be very effective in instructional material.)

<<A circle around the item to click (what color?  I've seen this done 
where the circle is shaded and there is a shadow beneath it - how is 
this accomplished?) A rectangle around the item to click (what 
color?)>>

This also works well, though for dialog boxes and the like, a circle or 
ellipse works better because it visually differs more from the 
background; few dialog boxes have round elements, but all dialogs have 
square or rectangular elements. Conversely, in photographs of natural 
objects or settings, there are likely to be more rounded objects, so a 
rectangular highlight may work better.

In terms of color, there's no one color that will work well everywhere 
because the goal is to contrast with the background, and that 
background may vary widely. In greyscale screenshots, black usually 
works best because few parts of the screenshot will be fully black. In 
full color, the trick is to use a color that stands out from its 
background. Red and yellow can be too obtrusive (my entirely subjective 
opinion), but they do draw attention effectively if they constrast 
sufficiently with the background.

Do avoid combinations of red and green for different highlighting 
purposes (e.g., green = good, red = bad), since a significant portion 
of your audience (as much as 5%) will have difficulty distinguishing 
between the two colors. If you must use these colors, make sure you 
choose shades that differ significantly in their "value" (black 
content) so that those who cannot distinguish the colors can 
distinguish their values.

If the software you're documenting has a consistent color palette, you 
may be able to pick one highlight color and use it everywhere. If not, 
you'll simply have to accept visual inconsistency and emphasize 
clarity. Or perhaps use a variant of the highlighting technique I 
described above: select the object and convert it to greyscale, then 
add a thick (a couple pixels) black border. The color contrast serves 
as an effective highlight.

If you have to distinguish the highlight from the background, there's 
an easy trick: duplicate the highlight object (e.g., an ellipse), 
enlarge the duplicate until its just slightly larger than the original 
(i.e., so it completely frames the original), then change its color to 
the opposite of the original: white if the original is black. Then 
group the two objects. In some cases, use an exact duplicate and offset 
it by a few pixels so that it appears as a shadow. (Which one works 
best depends on the background.) This works because the white and black 
are at opposite extremes of the color spectrum; thus, anywhere that one 
color blends with the background, the other color will stand out.

<<Highlighting the item to click in a yellow square (or circle?)>>

See above re. color choices and shapes.

<<Placing a "hand" icon near the item to click>>

In general, avoid hands. I've read that in several cultures, hands are 
considered rude or even offensive (depending on their "posture" = which 
fingers are sticking out and where), and if you'll be localizing your 
documentation, this can pose a problem. Geometric shapes such as arrows 
seem to work universally, as they have less cultural baggage, and they 
tend to stand out well from the background. Particularly if you use the 
shadowing trick I described earlier (e.g., white arrow added to black 
arrow for background).

<<Or any other ideas I've missed?>>

If you only want to show the button, you can also cut this out of the 
screenshot and show only the button. For example: "Click the [*] 
button/icon/whatever to close the program." Simple and elegant. You 
lose the advantage of showing context, but gain clarity and 
conciseness.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --
Geoff Hart   ghart -at- videotron -dot- ca
(try geoffhart -at- mac -dot- com if you don't get a reply)
www.geoff-hart.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Try WebWorks ePublisher Pro for Word today! Smooth migration of legacy
RoboHelp content into your new Help systems. EContent Magazine Decision-
maker review (October 2005) is here: http://www.webworks.com/techwr-l

Doc-To-Help 2005 converts RoboHelp files with one click. Author with Word or any HTML editor. Visit our site to see a conversion demo movie and learn more. http://www.componentone.com/TECHWRL/DocToHelp2005

---
You are currently subscribed to techwr-l as:
archiver -at- techwr-l -dot- com
To unsubscribe send a blank email to leave-techwr-l-obscured -at- lists -dot- techwr-l -dot- com
Send administrative questions to lisa -at- techwr-l -dot- com -dot-  Visit
http://www.techwr-l.com/techwhirl/ for more resources and info.