revise

Design

Lesson 3 Notes

Defining Design

Information design, sometimes also referred to as document design, has a two-part definition. The first part considers information design as a product and refers to the presentation of information on page and screen. The second part considers information design as a process and refers to what we do to develop a document “that works for its users” (Reddish).

Understanding What You Already Know

You already apply this definition when you use MLA format in writing academic essays (sample below excerpted from a Purdue OWL sample essay). The process of following these specific guidelines presents a document that allows its users to find information they need quickly and to complete the tasks they need to in relation to your work.

Angeli 1

E. L. Angeli

Professor Patricia Sullivan

English 624

12 February 2012

Toward a Recovery of Nineteenth Century Farming Handbooks

While researching texts written about nineteenth century farming, I found a few authors who published books about the literature of nineteenth century farming, particularly agricultural journals, newspapers, pamphlets, and brochures. These authors often placed the farming literature they were studying into an historical context by discussing the important events in

For example, by consistently formatting your in-text citations, your classmates can identify what source you’ve used and then know to discover how to access that source for additional information. The same presentation allows your instructors to assess how you are supporting your own ideas by incorporating facts and opinions from other sources.

In addition, the process of formatting your document in MLA ensures that your instructors, who review many of these documents at a time, can quickly identify ownership, class, date, and title, along with any missing elements. The double-spacing facilitates their ease of reading and allows also space for them to include comments or notations within your document.

Consistency in the overall design also promotes equitable assessment for students, filtering out an instructor’s unconscious preferences for specific fonts or formatting by ensuring everyone’s formatting is the same. The presentation of the information on the page and screen and the process of developing that document to work for its users are both referred to as document design.

Keeping it Simple

Effective information design follows user-centered guidelines and principles. One guideline that is always essential to follow is referred to as the KISS (Keep it Simple) Principle. This means that design, much like professional and technical style, should be simple. The goal is to get users interested and keep them engaged so that they can easily find and use the information they need, whether they are searching the document for key terms, scanning the document for to find what they need, or reading every word.

So, instead of presenting information to users in a way that makes using information difficult (review sample below from the Texas Estates Code),

Sec. 1101.001. APPLICATION FOR APPOINTMENT OF GUARDIAN; CONTENTS. (a) Any person may commence a proceeding for the appointment of a guardian by filing a written application in a court having jurisdiction and venue. (b) The application must be sworn to by the applicant and state: (1) the proposed ward's name, sex, date of birth, and address; (2) the name, relationship, and address of the person the applicant seeks to have appointed as guardian;(3) whether guardianship of the person or estate, or both, is sought;(3-a) whether alternatives to guardianship and available supports and services to avoid guardianship were considered;(3-b) whether any alternatives to guardianship and supports and services available to the proposed ward considered are feasible and would avoid the need for a guardianship;

good design presents information to users in a way that makes information both easier to understand (review sample below from Texas Health and Human Services)

 

The actual application for guardianship includes an introduction to the need for guardianship, basic demographic information, a statement to establish residency in that county and the relationship of the person filing for guardianship.  The application must also identify other family members and/or interested parties and those parties must be served notice that the application has been filed.  The Texas statutes are specific about what is to be included in the application.

and easier to find (review sample below, modified from the above):

What does the guardianship application include?

The application for guardianship includes:

· an introduction to the need for guardianship

· basic demographic information

· a statement to

· establish residency in that county

· the relationship of the person filing for guardianship. 

· Identification of family members and/or interested parties

The last example uses headings and lists to help readers who are scanning the document in ways the other documents help only readers who read all details or use keyword searches. The heading itself also engages the user by asking a question. Like question headings, verb headings (like all first-level headings in this document) help to engage actively with the content. Noun headings allow more passive engagement.

Considering the Elements

When we design, we think about both what elements we use and how to place them to effectively craft a message. Although there are many elements that we can consider, the following are the most common elements:

· Color

· Size

· Weight

· Shape

· Type (text, graphic, photo, white space, etc.).

Following the Basic Principles (CRAP)

Once we know the elements, we often say, “Great. Now what? How do I know what to put where?” Robin Williams answers these questions in her 2008 handbook The Non-Designer’s Design Book by offering four basic principles of design.

Using these principles involves arranging elements to create visual and typographic cues that help users to find and access information. The four basic principles are:

· Contrast

· Repetition

· Alignment

· Proximity

Following, we will review each of these principles.

Contrast

We will focus first on the Contrast principle, which is what attracts a reader to the page and helps to organize the page for the reader. We all unconsciously search for similarities and differences in our surroundings. By using elements that are different from each other, we signal users to pay attention.

For example, users will attend to the bulleted lists of elements and principles in the previous section. The surrounding white space helps draw their attention in, and the bullets make clear that this information is somehow different.

Applying any design principle involves thinking about ways to use elements to get and maintain the interest of users. Below, we will apply the contrast principle to understand how to leverage differences in element color, size, weight, shape, and type to accomplish those goals.

Color

One way to create contrast is to use multiple colors. However, to create effective contrast, color choices must be intentional. Weak contrast can prevent a user from using or even accessing information.

For example, yellow text on a white background, or blue text on a dark blue background, creates low contrast that makes text difficult to see.

This text is harder to read.

This text is harder to read

Using color intentionally can create higher contrast. For example, placing black text on a white background, makes text easier to see.

This text is easier to read.

So how do we know what colors to use? Understanding how colors relate to each other helps us use color more intentionally.

For greatest contrast, we need to use colors that are opposite each other on a color map or color wheel (review color map below). Contrasting colors, like yellow and blue, are farther from each other on the color map than white is from yellow or dark blue is from blue.

Figure 1: Color Map. By Onjacktallcuca - Own work, Public Domain

However, because we do not all perceive color in the same way, color should never be the only means of contrast.

Size

Contrast can also be created through the use of elements of different sizes. We generally know some of the ways to use size effectively without realizing it. We all probably know that the title of a document is usually is biggest element. We are also familiar with the use of headings and body text to help us organize information. Take for example Figure 2 below which shows the first section of this document.

Figure 2: Sample - Contrast/Size

Although the black body text and the blue heading are different colors that are both easily readable against their shared white background, color is not the only element used to create contrast. Size is also used. Both use the same font, Calibri, but the body text is 11 point while the heading is 16 point.

Body text should typically be a minimum of 11-12 point to ensure it can be read easily at a comfortable distance. In bad applications of design, size is used to discourage readers (often unethically) from reading text. You may be familiar with the expression “the fine print.” This use of small text (usually 10 point or smaller) means that it takes more effort for the user to access the information; this also makes it less usable.

Size contrast can be created manually to emphasize an individual word within a given text block. Increased font size (like the 14-point “emphasize” in the previous sentence) can help to draw positive attention to a specific word. While decreased font size also draws attention to the word (like the 8-point “manually” in the first sentence of the paragraph, the attention it draws may be negative. contrast

Manually creating a hierarchy of titles, headings, subheadings, body text, and lists can be difficult to do. To ensure both consistency across these elements and accessibility for individuals who access the document through the use of screen readers and/or use the navigation pane, use the Styles tool. Using Styles also enables you to easily add automatic tables of contents for your documents. Styles are preset, but you can modify them.

Weight

Using different weights or thicknesses also creates contrast between elements. You are likely already familiar with the use of boldface type as a way to emphasize a word (the word “emphasize” in this sentence is in boldface type). Bold text has a heavier weight than plain text.

Shape

Differences in shape create contrast as well. In text, this happens when we use different fonts. An effective way to create contrast in text using shape is to use both a serif and a sans serif font.

“Serif” essentially means “feet,” and “sans serif” means “without feet.” So, a serif font can be identified by its feet, or the lines that appear at its base. The “T” on the left below is in a common serif font - Times New Roman. The “T” on the right has no feet and is in a common serif font – Arial.

T

T

In general, serif fonts are easier to read in printed documents, and sans serif fonts are easier to read on screen. The feet on serifs can tend to create lines for readers that are useful on a written page. On the screen, these feet can become bothersome.

Some common serifs and san serifs include:

Common Serifs

Times New Roman

Courier

Garamond

Droid

Georgia

Common Sans Serifs

Arial

Calibri

Verdana

Droid Sans

Helvetica

Varying the shape of headings and body text along with size can help to create additional contrast. Figure 3 below is the original formatting of the first section of this document that we looked at earlier. It includes contrast in both size and color, but not shape, using the same sans serif font for both the heading and body text. Figure 5 uses the same sans serif font for the heading but uses a serif font for the body text, and Figure 6 uses a serif font for the heading but keeps the same sans serif font for the body text.

Figure 3: Sample - Sans Serif Heading and Sans Serif Body

Figure 4: Sample - Sans Serif Heading and Serif Body

Figure 5: : Sample - Serif Heading and Sans Serif Body

Type

One last type of contrast can be created by combining different types of elements. All of the elements above can be applied to text only or graphics only. Another way to create contrast is to use both together.

For example, the full-color photo to the left is the first one to appear in this document, so it creates contrast, and users are likely to notice it.

To ensure all users can perceive this photo, good design includes alt-text (alternative text) for images that describe the photo.

Figure 6 - This Photo by Unknown Author is licensed under CC BY-NC-ND

Hyperlinks will also stand out. It’s important to ensure that all hyperlinks are descriptive meaning the hyperlink text describes what the link leads to rather than providing a URL. This resource offers additional information about using features in Word to make documents accessible.

Repetition

Repetition is the second principle. Repeating elements, like using contrasting elements, creates emphasis to draw attention and help organize a document, but it does so by using the same elements rather than different elements.

Repetition helps to unify design and to create a blueprint to aid memory. Elements used only once in a document stand out significantly but are not necessarily emphasized in ways that will help the reader to remember information.

The repetition of these visual cues lets the reader know that the value of element is relative to the other items that are formatted in the same way.

One clear example of repetition you are likely familiar with is the use of headings on documents or slides. This repetition in style and pattern helps readers to know how to skim a document.

Another example often employed is the use of lists. Bulleted lists, like those used for ingredients and tools in the recipe below, denote items of equal value that can be considered or gathered in any order. Numbered lists, like those used for the list of steps in the recipe below, offer items that must be considered in order so that the process can be successful.

Peanut Butter and Jelly Sandwich

Ingredients

· Bread

· Peanut butter

· Jelly

Tools

· Knife

· Plate

Steps

1. Set the plate on a flat surface.

2. Open the bread.

3. Get out two slices of bread.

4. Place the slices on the plate.

Alignment

Alignment is the third principle. To make design look unified and clean, it is important that each element lines up with another in some way.

For example, all of the headings and body text in this document are aligned to the left of the page. A centered heading, then, would disrupt the organization and flow of the document.

In addition, every visual example used in this document is indented from the left by the same distance so that all of those elements align with each other. If I suddenly indented from the right instead, it would make it harder for the user to access and process it.

Proximity

Proximity is the last principle. Elements that are related to each other should be grouped closer together. Elements that are unrelated should be farther apart from each other. These related elements may sometimes be called families.

For example, in our peanut butter and jelly sandwich recipe (below), like items are grouped together:

Peanut Butter and Jelly Sandwich

Ingredients

· Bread

· Peanut butter

· Jelly

Tools

· Knife

· Plate

Steps

5. Set the plate on a flat surface.

6. Open the bread.

7. Get out two slices of bread.

8. Place the slices on the plate.

The consumable items used up in the process of creation (ingredients) are in a single list . The reusable item (tools) are in a different list. If I instead we included peanut butter and plate in one list and knife, jelly, and bread in another, we would confuse our users. The grouping would not make sense, and it would cause them extra time and effort in sorting out the like elements.

Similarly, text that relates to an image should be close to the image, not on a different page. Related text should also not break across pages (which would force the user to look in multiple pages for needed information).

Putting it All Together

Review the differences between Figure 7 and Figure 8 below. What differences make Figure 8 a better design?

Figure 7: Principles Not Followed (Williams)

Figure 8: Principles Followed (Williams)

Here are some actions taken to Figure 7 to create the better design in Figure 8:

· Removed the unnecessary border

· Changed the serif font to a sans serif font, added color, and italicized commentary (Contrast)

· Repeated the pattern of bold statement/italicized commentary (Repetition)

· Created stronger text alignments to guide the user with less effort (alignment)

· Added space between steps to group like items together (proximity)

· Removed the unnecessary numbers

When principles are used effectively, the resulting good design gains and maintains users’ attention and facilitates easy access and use.

References

Reddish, Ginny. “What is Information Design?” Teaching Technical Communication: Critical Issues for the Classroom, edited by James Dubinsky. Bedford St. Martin’s, 2004, pp. 211-217.

Williams, Robin. The Non-Designer’s Design Book, 4th ed. Peachpit Press, 2015, p. 12-13 and 225.