nFocusing attention and highlighting important points.There are many reasons to include pictures in your Help file. For one thing, they can contain a great deal of information in a small space. But pictures often pose the biggest problems for designers because they present so many possibilities from which to choose—shapes, sizes, colors, patterns, styles, and formats. And, of course, adding graphics requires artistic talent. Fortunately, you can hire talent. But you still have to answer the tough design questions.
Like text, a picture is only effective if it fulfills its intended purpose. Consequently, you should determine a picture’s purpose before using it. The challenge is to provide graphics that not only look good but that inform and communicate as well. Of course, pictures can have many different functions, more than just the few mentioned here. In fact, a single picture is likely to fulfill several different functions at the same time.
Graphics are good for:
nFocusing attention and highlighting important points.
In general, the visual sense is pre-eminent in information processing. Pictures catch and focus users’ attention. Consequently, users tend to assign particular importance to visual elements. Design your pictures so that they draw attention to essential information, especially if the information is unfamiliar to users, differs significantly from what users expect, or is likely to be missed.
nStimulating ideas and adding interest.
Pictures have an immediate visual impact. Unless they are extremely flat, they are more interesting than plain text. Most users would rather look at pictures, especially if the pictures are clearly displayed. Pictures also add interest to the information and relieve the visual monotony of text.
nInstructing and clarifying.
Pictures communicate certain kinds of information more effectively than text and so are essential in many instructional materials. However, because pictures can dominate the information, it is important that they perform a specific function in the overall design of the Help file and that they do not prevent users from grasping other elements in the topic. Avoid using pictures purely as decoration, because decorative graphics distract users from the content.
nShowing complex interrelationships, patterns, trends, and shapes.
Human vision is adept at recognizing and identifying visual patterns. For that reason, relationships that are confusing or obscure when expressed verbally frequently become straightforward and clear when expressed visually. Graphics, therefore, are useful where the information requires the user to understand complex relationships between items.
nExplaining and describing visual objects.
Pictures express visual and spatial concepts better than text, especially when those concepts involve physical actions. By resembling the things they depict, pictures take advantage of our ability to recognize objects. Text, on the other hand, must describe visual objects and “paint a picture in words.” In many cases, a picture is more effective. For example, it is easier to show the honeybee’s “dance” than it is to describe it.
nDirecting and improving actions.
Pictures increase the speed at which users carry out actions because they don’t have to understand complex processes. The Windows graphical user interface is a good example of how visual elements can make many tasks easier and faster to perform than the same actions in a nonvisual environment like MS-DOS.
nRemaining meaningful when reduced in scale.
Usually, you can get better results when you reduce a graphic than you can with text. For example, the overall shape of a bar chart is largely unaffected as you make it smaller, whereas text quickly becomes unreadable as you decrease the type size.
nProviding access to other information (hypergraphics).
When creating hot spots, pictures offer an interesting alternative to text. For example, you can create a graphical table of contents for the Help file, to show how the topics fit together and what links to what. Then, you can make the graphic hot and let users select items directly from the graphic.
nPersuading and influencing users.
Political cartoons provide a good example of how pictures can be used to influence an audience toward accepting some idea or opinion.
nConveying information across linguistic boundaries.
People can understand the ideas and information in pictures much more easily than they can understand a foreign language. In fact, some pictures and images are almost universally understood. Although pictures can transcend language barriers, they may be interpreted in different ways by different cultures. Therefore, if you plan to distribute your Help file to non-English speaking countries, carefully consider international issues when creating and selecting your pictures.
Graphics take considerable time and effort to create and require much more disk space to store than text. They also display differently on monitors with different screen resolutions. If they are very large, the graphics may take a long time to appear on the user’s screen.
Of course, pictures can be used in many different ways for many different effects, and each use presents its own design problems and issues. Nevertheless, the next few sections provide a few guidelines to consider, including:
nConsider the overall quality of your graphics.
When creating pictures, consider what users expect. Because the pictures appear on an electronic screen, users may expect the pictures and screen design to fall somewhere between the standards set by television and computer arcade games. It is important to try to meet users’ visual expectancy because poorly designed images can cause users to lose interest.
nDon’t use too much detail in art that is shown at a reduced scale.
Images with too much detail at a small scale may lose that detail when shown on lower-resolution monitors. Instead, try using a larger scale but only part of the picture to focus on the relevant information.
nKeep pictures relatively simple.
Online pictures are displayed at a lower resolution and in a smaller area than printed graphics. So reduce the number of details and parts in each picture and avoid fine lines and tiny text (unless you want illegible text). And be careful not to confuse simple with badly drawn pictures. Simple pictures focus the user’s attention on important aspects. For example, the silhouette of an object may be sufficient for users to recognize it.
nAvoid distorted views and unusual perspectives.
If possible, show a conventional three-dimensional view in your pictures. Realistic images are easier to recognize and understand than flat abstractions, unless the picture is a diagram or schematic.
Pictures include screen shots, icons, illustrations, line drawings, diagrams, graphs, cartoons, and photographs. Different picture types are used for different purposes. The type of picture you use depends on how you use it. Consider these two guidelines:
nTry to match the appropriate picture type to its function in the Help file.
For example, if the purpose is to motivate, attract attention, excite, or amuse, colorful illustrations are likely to be more appropriate than screen shots.
nBefore choosing a particular picture type, consider its strengths and weaknesses.
For example, diagrams exploit the two-dimensional space of the screen, so they are suitable for portraying information that is already spatial, depicting physical and conceptual processes, and explaining structures or relationships. Therefore, diagrams would be a very good choice for a map, the human nervous system, or a family tree. Because diagrams rely on simplification for their effectiveness, they should not look realistic. The concepts matter most. Highly realistic images are likely to make the user think that the diagram represents an object when in fact it demonstrates a process or concept.
In all communication, some elements have more emphasis than others. Designers use various devices to improve a picture’s impact. One of the most important is contrast. In design, contrast is used to compare two elements to show differences. There are many ways to use contrast in your pictures to add emphasis. For example, you can create contrast using:
nShape
Shapes define the function and dimension of space. They can also create depth. Most designs use three basic shapes: four-sided, triangle, and circle. By exaggerating differences in shape, you can add emphasis. For example, using one irregular shape among a group of regular shapes improves contrast and makes the irregular shape more important.
nSize
If there is low contrast in size (all the elements are roughly the same size), all the information will have the same emphasis. Making one of the elements larger or smaller than the rest improves the contrast and highlights the element that is different.
nTexture
In the physical world, objects and surfaces have texture (rough or smooth). Our eyes can sense texture visually if the picture uses texture. For example, you can use simple shading techniques to create shadows and give a sense of dimension and texture to an otherwise flat drawing.
nDirection
Lines and shapes create movement, show direction, and provide emphasis. Using vertical and horizontal movement in your layout can help guide the user’s eye to important information.
nColor and tone
Color uses principles of tone to create contrast. Tone refers to the range of light values—from white to black. Tones can be dull, like brown, or they can be bright, like yellow. To create emphasis, you can contrast bright colors and dull colors, or you can use complementary colors, such as red and green.
Users learn better when information is presented in both words and pictures. Here are some guidelines:
nPlace pictures as near as possible to the corresponding text.
If you present the text and graphics on separate screens, provide a simple and clear method for displaying the picture. Because jumping to a new topic is more complicated for the user, it is usually better to place the picture in a pop-up or secondary window.
nUse visual grouping to indicate the relationship between the text and graphics.
The ease with which users can associate a picture with text is dependent upon the visual grouping between them. Learning to see the visual structure requires you to suppress your natural tendency to identify, label, and read the information as a whole. To overcome this tendency, try to consider the display as merely a pattern of shapes. One method designers use for focusing on the overall design is to half shut their eyes, which filters out spatial detail.
nTry to position pictures consistently within a Help topic.
Unless you have considerable design experience, it is better not to position pictures irregularly in a topic. A good solution is to place them in a consistent position (flush with the left margin, for example) in topics with similar content.
Including explanatory text can help users understand the importance of the pictures and see how they relate to other information. For example:
nInclude captions and titles when the graphic is separated from the topic (when it appears in a pop-up window, for example).
nUse callouts to label parts of an illustration (callouts can be plain text or hot spots that further explain the part).
nAdd comments to explain difficult graphics.
The text that appears in your pictures should be chosen in relation to the text in your Help file and should take screen legibility into account. In general:
nUse the same size text in pictures as body text if you want the entire picture to be legible.
nUse a smaller type size if you reduce the scale of the picture.
nUse “greeked” text when you don’t want users to read it.
nLimit the number of different fonts in pictures.
nAvoid text at an angle.