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

Subject: Screenshots: Clearest way to indicate button/link/tab to click?
From: Geoff Hart <ghart -at- videotron -dot- ca>
To: "TECHWR-L" <techwr-l -at- lists -dot- techwr-l -dot- com>
Date: Thu, 03 Nov 2005 09:23:32 -0500

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)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


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:

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.

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 for more resources and info.

Microsoft Word Auto Numbering: From: Frank Finnegan
Screenshots: Clearest way to indicate button/link/tab to click?: From: Jennifer C. Bennett

Previous by Author: Single Sourcing using Word, RoboHelp, and PPT?
Next by Author: Bidding a first contract?
Previous by Thread: Re: Screenshots: Clearest way to indicate button/link/tab to click?
Next by Thread: Re: Screenshots: Clearest way to indicate button/link/tab to click?

What this post helpful? Share it with friends and colleagues:

Sponsored Ads

Sponsored Ads