atw: Re: Marking up screen shots

Seek "geometric elegance throughout" is perhaps a useful hint to base
your work upon. I don't know what MS recommend (do I care?). 
 
The answers depend on what makes sense to the user. Go to someone who is
not familiar with the system and ask them if the arrows, text and screen
shot makes sense to them. If the combination doesn't make sense, find
out 'why not' by asking the person. 
 
The use of arrows, rectangles and so on really doesn't "grab me" -  but
as a tool to teach and as a teaching aid in IT education, it certainly
does seem to work. IT people love them, and so to do the users. The
rectangular box/arrowhead combination may need to be flexible. 
 
I think the most important considerations in this kind of layout is
neatness and consistency. You are trying to make an ordered delivery of
logic using a combination of instructional media (image, text,
direction), and layout here is critical. I tend to discipline this style
of information design to guide the reader/user.
 
Labels and text areas all should have the same width, being aligned in
the same vertical and horizontal planes. Justification is best made
"left" rather than "full". Although sometimes I align the text ending to
the arrow beginning. I also sometimes underline the label and run the
underline into the arrow itself (works well for individual descriptions
- not so well for boxes).
 
Screenshots should be offset consistently (eg: to the right or to the
left) with respect to the labels and arrow directions. Don't forget that
you may have to be flexible, you don't want arrows streaming 10 cm
across a screenshot, so you may need to go from below, or above or
combinations of two (side to side, top to bottom, bottom and side and so
on). In that case, keep measurements the same.
 
So arrowheads go from text to the object highlighted. Adding a tail
consistent with the arrowhead shape to accentuate the direction
sometimes works well.
 
Arrows should start at the same or a consistent pattern of locations,
bottom corners or top corners of labels, not randomly out.
 
Arrows should all be a consistent angle combination (for example,
horizontal then say, 30 degrees off vertical or horizontal down or up)
rather than wildly directed with no pattern. 
 
Arrow colours should be consistent, though sometimes using different
colours for different processes performed in the same window's may work
too.
 
Arrow and box lines should not be overly thick (especially if they are
red), and should have nice contrast against the screen shot (sometimes
using a fine 1 pixel white border with a 2 pixel colour fill works
extremely nicely when there is wide variation in colours). 
 
Arrows should never cross - this can be very ugly and confusing, and
conveys a lack of care, precision and professionalism. 
 
Always provide a descriptive caption with your graphics combinations,
which can be easily linked to a Table of Figures in the front matter.
 
Some thoughts that hopefully help.
Regards,

Warren 


 

________________________________

From: austechwriter-bounce@xxxxxxxxxxxxx
[mailto:austechwriter-bounce@xxxxxxxxxxxxx] On Behalf Of Amitee K
Goulton
Sent: Thursday, 26 February 2009 11:36
To: austechwriter@xxxxxxxxxxxxx
Subject: atw: Marking up screen shots


Hello!
 
I've been reviewing some internal training documents this week and
wondered if there were any guidelines on marking up screen shots.
 
The screen shots I've been looking at have a rectangle drawn around an
important area of the screen, a short sentence describing the
contents/rationale of the area, and an arrow pointing from the rectangle
to the description. 
 
I'm curious to know if there is an accepted standard for which way the
arrowhead should point, if an arrowhead is necessary at all, or if I
should just concentrate on consistency! :)
 
Thanks,
Amitee

Other related posts: