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

Subject: RE: Screenshots: Clearest way to indicate button/link/tab to click?
From: "Nuckols, Kenneth M" <Kenneth -dot- Nuckols -at- mybrighthouse -dot- com>
To: "TECHWR-L" <techwr-l -at- lists -dot- techwr-l -dot- com>
Date: Thu, 3 Nov 2005 08:09:28 -0500

Jennifer Bennett asked...

> Hello all,
> In a screenshot, which is the clearest way to indicate a
> to
> click:
> * 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?)
> * Highlighting the item to click in a yellow square (or circle?)
> * Placing a "hand" icon near the item to click (what color should it
> Standard white or another color to draw the eye? Should it be
> oversized in a screenshot that has been resized to a smaller size in
> to fit on the page?)
> Perhaps a combination of these (used consistently)?
> Or any other ideas I've missed?

I mostly do internal documentation, so screenshots in my documents are
aimed at busy call center employees or engineering interns. As such, I
like to make items stand out as clearly as possible. Therefore, when a
screenshot is related to only one step of a procedure, I put a large fat
red arrow (sometimes outlined with a thick white border depending on the
color of the screen elements) pointing to the button, field, or link to
be used or activated. In cases where multiple steps of a procedure
relate to the same screenshot, I try to use large solid-filled red
circles with white filled bold numerals to indicate which item is
associated with which step of the procedure.

Of course, I use this standard because I know my audience is probably
talking to a customer or field technician on the phone, navigating one
of several software applications open on the screen, and is trying to
locate a specific item on a cluttered screen quickly. I don't know if I
would use the same brash, bold pointers for customer-facing
documentation. When a fellow employee is under pressure to provide
immediate customer service, I want to make the item pop out as easily as
possible--if customers are not under that same kind of pressure, I don't
want them to believe I think they're too stupid to find the link on
their own. I might do some highlighting or circles for customer-facing
documents, but I would probably make them more subtle.

As for consistency, I agree with being consistent in the same document
or in any documentation relating to the same application--however, keep
in mind that every application may have a different color scheme, and
while yellow highlights or red circles may show up well on screenshots
for one document, they may get swallowed up in another application's
screenshots because of the difference in screen colors.

CONFIDENTIALITY NOTICE: This e-mail may contain information that is privileged, confidential or otherwise protected from disclosure. If you are not the intended recipient of this e-mail, please notify the sender immediately by return e-mail, purge it and do not disseminate or copy it.


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.

Previous by Author: RE: Training Materials vrs User's Guides/Online Help
Next by Author: RE: David Pogue's column - New York Time
Previous by Thread: Re: Problem with Macromedia Fireworks
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