Chapter 5 Visual And Graphical Elements Following The Signs

Student Writers

Marc A., Matt G. and Robert W.

VISUAL ELEMENTS

Visual elements guide us in our daily live in almost everything we do. Traffic signs tell us how fast to go when to stop, what street we are on. There are signs that advertise businesses with addresses and directions how to get there. All these signs contain visual elements that consist of different colors, shapes, font families and font styles that the human mind has come to associate with certain actions or make us think a particular way. These elements can be used to invoke emotions or give a message a certain tone that can influence the reader. A good writer should be familiar with these elements and know how to use them so that they can influence their audience. In this chapter it is our intention to inform our audience of these elements and show them how to use visual element to write more effective documents.

PAGE LAYOUT

Alignment

There are four main types of typographic alignment, which include left aligned or flush left, right aligned or flush right, justified, and centered.

Left Aligned

In most documents written in the English language text is read from left to right. Because of this it is most common to align text to the left side of the page leaving the right side of the paragraph “ragged”. This is also known as flush left alignment. Figures A and B show left aligned text with different amounts of right jagged edges. The following is an example of a left aligned paragraph with ragged right edges.

Figure 5.1
1.jpg
The intended recipient for product technical documentation is both the (proficient) end user as well as the administrator / service or maintenance technician. In contrast to a mere "cookbook" manual, technical documentation aims at providing enough information for a user to understand inner and outer dependencies of the product at hand. The technical writer's task is to translate the usually highly formalized technical documentation produced during the development phase into more readable prose.

Right Aligned

There are some languages that require reading the text from right to left such as Arabic. Right alignment is used for these situations. Right alignment or flush right alignment can also be used to make some special text stand out. An example of this would be if you have a quote you can right align the name of the author to make it stand out more. The following is an example of a right aligned paragraph.

Figure 5.2
2.jpg
The intended recipient for product technical documentation is both the (proficient) end user as well as the administrator / service or maintenance technician. In contrast to a mere "cookbook" manual, technical documentation aims at providing enough information for a user to understand inner and outer dependencies of the product at hand. The technical writer's task is to translate the usually highly formalized technical documentation produced during the development phase into more readable prose.

Justified

A common type of alignment used in print media such as newspapers is justified alignment. In justified alignment the line lengths are made to be even. This is achieved by making “loose” and “tight” lines. Loose lines are stretched to go from edge to edge of the specific document area by adding space between letters and words. Tight lines remove spacing between letters and words to make the line smaller. There are four types of text justification which include left justify where the last line is aligned left, right justify aligns the last line to the right, center justify aligns the last line in the center, and full justify stretches the last line edge to edge as well. The following is an example of a paragraph that is left justified.

Figure 5.3
3.jpg
The intended recipient for product technical documentation is both the (proficient) end user as well as the administrator / service or maintenance technician. In contrast to a mere "cookbook" manual, technical documentation aims at providing enough information for a user to understand inner and outer dependencies of the product at hand. The technical writer's task is to translate the usually highly formalized technical documentation produced during the development phase into more readable prose.

Center

Another type of text alignment is centered. When a paragraph is center aligned all of the text is aligned symmetrically on a vertical line through the middle. Centered text is not commonly used for body text because it makes it difficult to read. It is, however, useful for centering titles for example. The following is an example of a center-aligned paragraph.

Figure 5.4
4.jpg
The intended recipient for product technical documentation is both the (proficient) end user as well as the administrator / service or maintenance technician. In contrast to a mere "cookbook" manual, technical documentation aims at providing enough information for a user to understand inner and outer dependencies of the product at hand. The technical writer's task is to translate the usually highly formalized technical documentation produced during the development phase into more readable prose.

Grids

Aligning page elements to a grid is an important way to organize the items on your page. You can separate the page into a series of horizontal and vertical lines, creating columns and rows. By aligning all text, images, and other page elements with these lines, you are sure to maintain even spacing all around.

Figure 5.5
home-wireframe-grid-overlay.png
HOME WIREFRAME GRID OVERLAY SOURCE: HTTP://WWW.GAVINWRAY.COM/WP-CONTENT/UPLOADS/2010/06/HOME-WIREFRAME-GRID-OVERLAY.PNG

Spacing

The white space on the page is just as important as the text and graphics. Improper use of spacing can create a clustered unorganized look.

White space is best used around the edges of the page to create a margin and around graphics and other visuals to separate them from the text. The two types of space are referred to as positive and negative space. Positive space is the actual text and graphics that are contained on the page. Negative space is the white space that is located around these text and graphical elements. If you do not use enough negative spacing, the main elements on the page that you want to stand out start to become clustered together. Whitespace helps draw attention to the separate areas of the page.

Highlighting Differences Between Elements

While it is important to stay consistent, it is good to use contrasting styles to emphasize different elements on the page. For example, making the heading larger and bolder than the body text. Or using a different color perhaps for captions or other text you want to make stand out.

Rule of Thirds

This is a tool used to position elements on a page. If you were to take an image and place two vertical and two horizontal lines on it to divide the page into 9 boxes, the most important compositional elements should be on these lines or at the intersections of the lines. This is a way to take the focus away from the center of the page and make it off center. In the following images, the first image, figure x.6, shows an image that does not follow the rule of thirds. The second image, figure x.7, shows an image that does follow the rule of thirds.

FIGURE X.6 FIGURE X.7

CRW_6397_CTR. DIGITAL IMAGE. PHOTO 96. WEB. 18 MAR. 2911. <HTTP:WWW.PHOTO96.COM/BLOG/?P=37>. RULE-OF_THIRDS-IMAGE2. DIGITAL IMAGE. PHOTOGRAPHY TIPS. WEB. 18 MAR. 2911. <HTTP:HOWTOPHOTOGRAPHY.ORG/WP-CONTENT/UPLOADS/2010/06/RULE-OF-THIRDS-PHOTO2.JPG>.

Proximity and Unity

Grouping things together that relate to each other. When you place similar items together, your brain is able to interpret those things as being related. When things are separate that should be together it can cause confusion in your document. The reader can see this as being an error in the page when the have to search for information. It is best to create a flow throughout your document and to not make the readers remove themselves from that flow. The example below clearly shows the advantage of placing items where they should go in relation to other similar items. For instance placing descriptions of pictures directly under the picture. Also the proper use of white space is important to unifying the page.

FIGURE 5.8

MACNEIL, EVA. PROXIMITY. DIGITAL IMAGE. EVA MACNEIL CREATIVE. 30 DEC. 2010. WEB. 18 MAR. 2911. <HTTP://EVAMACNEILCREATIVE.BLOGSPOT.COM/2010/12/PRINCIPLES-OF-DESIGN-UNITY-PROXIMITY.HTML>.

TYPOGRAPHY

Typography covers all the different types of font families and the way text can be displayed. Font families include Times New Roman, Ariel, Century Schoolbook, Veranda, Helvetica, Calibri etc. Text is one, if not the most important aspect of a technical document. It is the text that is delivering the message, therefore to make a document effective it is very important to use the appropriate font size, weight and family to display the text. Within the font families there are different styles that can be used, e.g. within the family Ariel: Ariel bold, Ariel italic, Ariel narrow, Ariel wide etc, to enhance the readability of the text. Use care when mixing fonts and use consistency in your layouts

Font Family

Font family is another aspect of font that can be used to draw attention to certain parts of a document. There are many different styles to be used. The font you decide on should not dominate the document. Generally in technical documents Times New Roman is used for body font and Calibri is used for headings.
It is important to choose a good style of font depending on the purpose or content of the document. Different style font can add life, character or even set a theme to a document. When using different font families one should be careful not use too many different styles, as it could cause the document to look unprofessional. Using two or three styles of font should be sufficient, any more than that may look bad.

FIGURE 5.9

standard.gif
source: simplystamps.com/Images/Products/fonts/standard.gif

Font Style

Font style is a way of altering the font family to put emphasis on a particular word or group of words. Adjusting the font weight is an excellent tool to use along with font size to show importance. A heavier font, e.g. bold, is usually used in headings and titles. Whereas italics or bold can be used to put emphasis on important words. However in the body of a document the font is of normal weight. Underling is used occasionally, but usually just in titles and for citing sources in a works cited page.

Font Size

Font size is an excellent tool to use in technical documents. It can be used to show emphasis or hierarchy of the information being portrayed. Using different size font is good to break up the document so it doesn’t look all jumbled together, making the reading more enjoyable. A larger font size is usually used in headings and smaller font in the body of documents. Generally the settings of headings and body font for a technical document are as follows:

HEADING 1: 13PT

Heading 2: 12pt

Heading 3: 11pt

Body: 10pt

Font Color

Using different color font can be helpful to draw attention to words in a document. Color is an excellent method for creating emphasis and providing feedback to users. In the document below red is used to accent the information required in the text boxes. However, to people who are color blind may not be able to see red, thus making the required information invisible.

FIGURE 5.10

11.3.gif
SOURCE: UNIVERSALUSABILITY.COM
The example below exhibits a better method to display the required text fields. The required fields are displayed in black there is also a red asterisk next to the required fields for those who can see color. It is also a good idea to provide redundant emphasis and feedback using other, accessible methods, e.g. pop-up alert messages when the submit button is pressed without filling the required fields,

FIGURE 5.11
11.4.gif
SOURCE: UNIVERSALUSABILITY.COM

Readability

There are many aspects to font that can make it easy to read or hard to read. Since font is the most important part of the document, it should be easy to read. The font should be displayed in a manner that makes the document easy to read and in turn the reader will be able to easily read the material and understand it.

COLOR SCHEMES

The use of color in a technical document is critical in delivering the message to the user. When used properly, shading and background color can help highlight important text in a document. Color is probably the easiest way to highlight words or sentences. It allows you to make headings more prominent and distinct. On the flip side of this, certain types of color can be distracting when overused. The key is to use color selectively and consistently. Below is a good example of how color is used to highlight change. The colors on the bar are the only way to tell that a change has happened.

FIGURE X.12

Colors in Other Cultures

When using colors in a cross-cultural document, you have to be aware of how the reader will interpret the document. Certain colors have different meanings depending on the culture. A good example of this is the fact that in China, red signals happiness, while in Japan it signals anger. The use of red in Egypt symbolizes death. In France, the color green symbolizes criminality, while here in America it symbolizes environmental consciousness or moving forward. The key thing to remember is that when designing your document your choice of colors should reflect the expectations of the likely readers.

The Color Wheel

The color wheel is a visual representation of colors arranged according to their chromatic relationship. The wheel is composed of primary, secondary, tertiary, complementary, and analogous colors. The following are graphics of the different aspects of the color wheel.

FIGURE X.13

Primary Colors

Primary Colors: Colors at their basic essence. These colors cannot be created by mixing others. These colors include Red, Blue, and Yellow

Secondary Colors

Secondary Colors: These colors are created by mixing 2 primary colors. These colors include Orange, Purple, and Green. Orange is a combination of Red and Yellow, Purple is a combination of Blue and Red, and Green is a combination of Blue and Yellow.

Tertiary Colors

Tertiary Colors: Colors achieved by mixing primary and secondary hues. The name of the colors/hues is a description of the color. The colors are Yellow-Orange, Red-Orange, Red-Purple, Blue-Purple, Blue-Green, Red-Violet, and Yellow Orange.

Complementary Colors

Complementary Colors: Colors that are opposite each other on the color wheel. Examples are colors such as Red and Green, Red-Purple, and Yellow-Green. These opposing colors create a maximum contrast and maximum stability.

Analogous Colors

Analogous Colors: Colors that are close to each other on the color wheel.

Contrast

Using contrast makes items look different and distinct. Contrast adds energy and sharpens boundaries when used properly among features on a page or screen. Contrast can also be used to catch the readers’ eye and make text easier to read. However, you can accidentally create contrast problems with different colors or shading in the background. In order to prevent this, make sure the words on the page contrast significantly with their background. This will ensure that the reader will be able to view the content properly without any problems. A good example is the color and style of this line of text against the white background. Because the contrast is good, you are able to read this with no problem.

FIGURE X.14

CONTRAST CREATED BY USING A PINK COMB AGAINST GREY ROCKS

GRAPHICS

Charts

Charts are an important and powerful tool to express data in an easy to read format. Unlike tables, which usually express exact numbers, charts can be used to make the data more generalized and easier to understand.

There are three general types of charts, which include:
• Statistical Charts
• Progress Charts
• Concept Charts

Statistical Charts

These are the most common types of charts that you will use and are used to represent quantitative information. This category can be broken down into dozens of subcategories but the following are some of the key ones.

Bar Graphs

A bar graph consists of a x and a y axis with bars of a certain length representing numerical data. Bar graphs are very useful for visualizing how values in a data set compare to each other. They are also very useful because you can represent multiple data sets on a single graph.

FIGURE X.15

BAR GRAPH. SOURCE: HTTP://ACADEMICENGLISH.INFO/BLOG/ BAR-GRAPH-JPG1.JPG

Line Graphs

Line graphs are used to compare two variables along a x and y axis. Instead of having a bar go from the baseline to the value you want to represent, you place a dot only at that value. These dots are connected to create a line. There are a few advantages to using line graphs to represent data. They are great for visualizing trends and because of this you are able to estimate values that fall between points and foresee other possible trends.

FIGURE X.16

LINE GRAPH. SOURCE: HTTP://WWW.MATHWORKSHEETSCENTER.COM/MATHTIPS/LINE.GIF

Pie Charts

Pie Charts offer an excellent way to represent percentages. By using a circle you are able to represent a total 100% by dividing it into proportional sized pieces.

FIGURE X.17

PIE CHART. SOURCE: HTTP://DASHBOARDSPY.COM/IMG/CREATING-PIE-CHART-ILLUSTRATOR.JPG

Venn Diagram

Venn Diagrams are useful for representing all possible relationships between any number of sets. These are usually created using overlapping circles. For example if you were comparing sets A and B then you can represent values unique to A, values unique to B, and values that are common to both A and B in the area where the circles overlap.

FIGURE X.18

VENN DIAGRAM. SOURCE: EDORIGAMI.WIKISPACES.COM/BLOOMS

Progress Charts

A progress chart is used to show the relationship between a task and time and is useful for planning out a schedule for a task to ensure you get it done. The most common type of progress chart is the Gantt chart. A Gantt chart shows the start and finish date for a particular project as a whole and also breaks up the project into its individual elements with due dates. These are particularly useful for project proposals because they show a timeline and a breakdown of when the project should be completed.

FIGURE X.19

GANTT CHART SOURCE: HTTP://WWW.PHOTO96.COM/BLOG/?P=37

Concept Maps

A concept map shows the relationship between a set of different concepts. These are useful for visualizing how certain elements interact with each other and gives you an idea of how changing something affects other things. Concept maps are usually created using boxes or circles to represent different concepts with lines (sometimes with an arrow head to show directionality) connecting the different concepts. Words can be used on the lines to further define a relationship.

FIGURE X.20

CONCEPT MAP SOURCE: HTTP:WWW.UCOLICK.ORG/~MAXSIMPLECONCEPTMAPPRINCIPLE.JPG

Tables for Technical Documents

Tables are rows and columns of numbers and words, mostly numbers. They allow readers to quickly access and compare information. When data is arranged chronologically (e.g. sales figures over a ten-year period), tables can show trends of rising or falling activity. Tables are not the most vivid or dramatic way of displaying trends or relationships between data, but they are effective.

Table Format

A table is a group of rows and columns of data. A column heading, at the top of each column defines or identifies the contents of that column (and usually indicates the unit of measurement). On the left edge of the table may be row headings, which define or identify the contents of that row. When rows or columns must be grouped or subdivided you have to create row or column subheadings.

FIGURE X.23
ch7fg2.gif
SOURCE: ONLINE TECHNICAL WRITING: GRAPHICS AND TABLES

Placement of Tables

Tables should be placed as close as possible to the text it represents. Placing the tables near the text it represents makes it easier for the reader to reference the table as they read and gives the document a smooth flow. It is good to refer to the table and figures in the text so the reader gets a good understanding of the information portrayed.

Table Title

All tables should have a title. The table title should be in noun form and describe the table in as few words as possible. Participles should be used rather than relative clauses. For example: Customers spending more than 100 dollars instead of Customers who spend more than 100 dollars. The reader should know right away what the table is about just by reading the title. The first word of the title should always be capitalized.

Table Numbers

In a technical document all tables should be numbered and be placed in the order in which they are numbered. If there are a lot of tables, they should appear in a separate table of contents, titled List of Tables.

heading level 1

Text Tables

In rough-draft technical reports there can be a lot of information that is presented in regular text format. This information could be better presented in text tables. It is good to go through the text and gather all the information from the text that could be displayed in a text table. Text tables aren’t used much anymore because of the availability of tables generators that are so easy to use. The use of text tables is good for rough drafts and organizing information to be put into tables.

FIGURE X.25
ch7fg3.gif
SOURCE: ONLINE TECHNICAL WRITING: GRAPHICS AND TABLES

PHOTOS

When using photos or graphics in a technical document, it should tell the story. Your photo needs to support the data or display the product, part, or component the reader needs to see the data in a clear and concise way. By using a quick glance, readers should be able to figure out the meaning of the graphic. Below are a few key points to go by:

• A graphic should tell a simple story

FIGURE X.26

FIGURE X. THIS IS IMAGE IS OF A DESERT CHECKERSPOT BUTTERFLY. AT A GLANCE THE READER CAN LOOK AT THIS IS IMAGE AND SEE THAT IT TELLS A CLEAR STORY ABOUT THE MARKINGS ON THE DESERT CHECKERSPOT BUTTERFLY.

• A graphic should reinforce written text not replace it. Technical documents often discuss complex ideas or relationships and it is sometimes tempting to refer readers to a graphic to get the point across. The irony in this is that if you cannot explain something in writing, chances are the graphic will not explain it well either. Written and visual text should work together. The best way to achieve this is to make it so that the written text refers readers to the graphics while the graphics support the written information.

FIGURE X.27

Figure X. A graph the reinforces written text.

• A graphic should be ethical. Photographs, charts, tables or graphs should not be used to distort facts, hide information or exaggerate trends. One way this can happen is thru bar charts. The scales can be adjusted to suggest that the values are changing more rapidly than they actually are.

FIGURE X.28

Figure X. An unethical use of a bar graph. Breaks in the Y-axis distorted the data and make the categories seem more comparable than they actually are. Also, the colors used drew more attention to specific categories. In this example, swine flu is seems to be more dangerous than these other epidemics because of the blood red color.

• A graphic should be labeled and placed properly. Proper labeling and placement of graphics will allow readers to move back and forth between the text and visual features. Graphics should be labeled with informative titles.

Figure X. This graph is properly labeled, has a key and is easy to read.

Figure X. A detailed photo with proper use of color

CONCLUSION

Within the field of technical communication there are a lot of great attributes that are great to have. Of all of these skills one not only needs great writing skills but also an effective method of reaching readers using graphics. This is where visual elements within a technical document come into place. Throughout this section we have discussed four major topics: page layout, graphics, color and typography. Each section was broken down into sub topics to further elaborate on how to effectively use visual elements in a technical document.

Page layout is important because it determines the overall flow of the document. When designing a page or a screen, the challenge is to create a layout that is balanced but not boring. In order to devise a balanced page it is recommended to use a page grid. Using a grid for the layout ensures that everything lines up. Grids are also used to lay out screen based texts. When coming up with balance, things to consider are whether or not images are symmetrical or asymmetrical. The last aspect of page layout is the spacing. Improper using of spacing can create a clustered unorganized look. The types of space referred to in the document are positive and negative space. Be sure to be aware of how the space is being used in your document to ensure that it has a well presented layout.

When it comes to typography it is usually used in close conjunction with graphics. Both are used to catch the reader’s attention in different ways. The rule of thirds is explained in detail and it is a tool used to position elements on a page. This rule allows the focus of the picture of document to not be directly in the center. Repetition and proximity are also important aspects of making sure that the overall presentation of visual elements is good. The use of charts is critical to providing the reader with the necessary visual element to visually explain the text. Be sure to select a chart that is appropriate for the data you want to show, use a clear and easy to read title, and use color to add emphasis to different elements of the graph.

The last of the topics is Color. The use of color allows certain aspects of the document to stand out and is critical in delivering the message to the user. Color is used in multiple ways to display change, emphasis or excitement. The example used in the document illustrates how color is used to determine pregnancy status in a pregnancy test. Another example is being weary of the fact that in different countries color symbolizes different things. By having a good understanding of how to properly use color as a visual element, you may further entice your readers into reading more and getting your point across.

Bibliography

Bear, Jacci Howard. "Page Composition Tips - How to Compose a Better Page Layout." About.com. Web. 01 Mar. 2011. <http://desktoppub.about.com/od/layout/tp/composition.htm>.

"Book Page Layout Tips - Art Bookbindery." How To Publish A Book - The Self-Publishing Book Company. Web. 01 Mar. 2011. <http://www.artbookbindery.com/layout.htm>.

"Chapter 4: Visual Elements - TechnicalCommunication." Welcome to Professor Gomrad's Course Wiki - TechnicalCommunication. Web. 08 Apr. 2011. <http://techcomm.wikidot.com/chapter-4-visual-elements>.

Horton, Sarah. "Page Layout." Universal Usability: A Universal Design Approach to Web Usability. Web. 01 Mar. 2011. <http://universalusability.com/access_by_design/page_layout/index.html>.

"How to Design Technical Documents Visually | PoeWar." Writing Career Center. Web. 15 Mar. 2011. <http://www.poewar.com/document-hack-a-technical-writers-journal-lets-get-visual/>.

Markel, Michael H. Technical Communication. Boston, MA: Bedford/St. Martins, 2010. Print.

"Online Technical Writing: Graphics and Tables." PrismNet : Austin TX VOIP, Broadband Colocation, Web Hosting. Web. 15 Mar. 2011. <http://www.io.com/~hcexres/textbook/graphics.html>.

"Color Wheel, Color Circle, & Color Relationships." Worqx.com - Home Page - Design, Development & Color Theory. Web. 15 Mar. 2011. <http://www.worqx.com/color/color_wheel.htm>.

"February « 2009 « Alyson Camille Ogren." Alyson Camille Ogren. Web. 14 Mar. 2011. <http://www.alysoncamille.com/posts/2009/02/>.

Johnson-Sheehan, Richard. "Guidelines for Using Graphics." Technical Communication Strategies for Today. Boston: Longman, 2011. Print.

"Software - Sorted by Type - Graphics and CAD - CAD / CAM." AvaxHome. Web. 13 Mar. 2011. <http://avaxhome.ws/software/software_type/graphics_cad_cam/cad_cam>.

"Using Charts and Graphs." Document Design. Web. 8 Apr. 2011. <http://wiz.cath.vt.edu/tw/TechnicalWriting/docdesign/charts.htm>.

Concept Map. Digital image. Web. Web. 8 Apr. 2011. <http://www.ucolick.org/~max/289C/Concept%20Maps/Concept%20Maps%20from%20Elsewhere/SimpleConceptMapPrinciple.jpg>.

Venn Diagram. Digital image. Web. 8 Apr. 2011. <http://edorigami.wikispaces.com/blooms,+learning+styles+and+thinking+organisers>.

Line Graph. Digital image. Web. 8 Apr. 2011. <http://www.mathworksheetscenter.com/mathtips/line.gif>.

Bar Graph. Digital image. Web. 8 Apr. 2011. <http://academicenglish.info/blog/wp-content/uploads/2010/05/bar-graph-jpg1.jpg>.

Pie Chart. Digital image. Web. 8 Apr. 2011. <http://dashboardspy.com/img/creating-pie-chart-illustrator.jpg>.

Wray, Gavin. Home Wireframe Grid Overlay. Digital image. Gavin Wray. 16 June 2010. Web. 18 Mar. 2911. <http://www.gavinwray.com/wp-content/uploads/2010/06/home-wireframe-grid-overlay.png>.

Crw_6397_ctr. Digital image. Photo 96. Web. 18 Mar. 2911. <http://www.photo96.com/blog/?p=37>.

Rule-of_thirds-image2. Digital image. Photography Tips. Web. 18 Mar. 2911. <http://howtophotography.org/wp-content/uploads/2010/06/rule-of-thirds-photo2.jpg>.
Macneil, Eva. Proximity. Digital image. Eva Macneil Creative. 30 Dec. 2010. Web. 18 Mar. 2911. <http://evamacneilcreative.blogspot.com/2010/12/principles-of-design-unity-proximity.html>.