Teaching home

Design 3: Visual Organization and Information Design

Information Hierarchies II

“When I am working on a problem, I never think about beauty. I only think about how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong.” - Buckminster Fuller

Information Hierarchies are the cornerstone of clarity in design and assist in communication and in the case of forms or tasks usability of the design. Creating an informational hierarchy is about organizing content into logical, reader-orientated sections. It is also about prioritizing content in order of importance.

Hierarchy Types

Hierarchical organization is the simplest structure for visualizing and understanding complexity. Increasing the visibility of the hierarchical relationships within a system is one of the most effective ways to increase knowledge about the system. Examples of visible hierarchies include book outlines, multi-level software menus, and classification diagrams.

There are three basic ways to visually represent hierarchy: Trees, Nests and Stairs.

Tree

Tree structures illustrate hierarchical relationships by locating child elements below or to the right of parent elements, or through the use of other strategies indicating hierarchy (e.g., size, connecting lines). Tree structures are effective for representing hierarchies of moderate complexity, but can become cumbersome for large or complex hierarchies. Tree structures grow large quickly, and become tangles whne multiple parents share common child elements. Tree structures are commonly used to represent overviews or high-level maps of system organization.

Nest

Nest structures illustrate hierarchical relationships by locating child elements within parent elements. Nest structures are most effective when representing simple hierarchies. When the relationships between the different levels of the hierarchy become too dense and complex to be clearly distinguishable, nest structures become less effective. Next structures are most commonly used to group information and functions, and to represent simple logical relationships.

Stair

Stair structures illustrate hierarchical relationships by stacking child elements below and to the right of parent elements, as in an outline. Stair structures are effective for representing complex hierarchies, but are not easily browsed and falsely imply a sequential relationship between the stacked child elements.

For more on information hierarchy and structure read at Visual Explanations, or Envisioning Information by Edward R. Tufte. Also look at Universal Princlples of Design by William Lidwell, Kritina Holden and Jill Butler

Heirarchy and Emphasis

You only need to pick up any newspaper to see how the size and positioning of headlines indicates to you which stories are of the greatest importance. Using visual queues to establish hierarchies of information can be achieved by considering factors such as: Relative Size, Proximity (aka placement and juxtaposition) and Color.

Relative size

Relative size tells a user a great deal about the importance of one screen element over another. Larger items generally catch the eye and therefore are seen as more important to the user. Titles are a good example of this. The larger the text in a title the more important it will appear. As I have already mentioned this is an approach which has been used in the newspaper industry for years.

Proximity

Placement or position of elements is also another important sign post to the user. However, care is needed in this area as the importance associated with position can be altered by cultural factors. The majority of western users read from left to right and top to bottom. This means that information on the top and left of the screen is noticed first.

Note that lists and / or large blocks of similar text initially will be scanned by readers. In many cases scanning focuses initially in the top left and right, as well as top and bottom of a composition of similar visual elements. For example a list of data.

Color

Color is also another powerful way of helping users find their way around a design. Color can be used as a way of showing relationships between items. It can also establish importance or draw attention. Highlighting elements on the page draws attention to them and high contrast use of color improves readability. However too much of a good thing can be a disadvantage to a reader and prove confusing and difficult to read.

Visual hierarchies, combined with expressive imagery and readable, appropriate typographic choices are some of the basic building blocks of clear visual organization and information design.

Examples of problems with heirarchies (i.e. how not to use hierarchy in design)

Look at how these examples force the reader to struggle with the erroneous visual junk such as visual vibrations, overall patterns and proximity, lack of a scannable hierarchy, etc.

Here is an example of a vegetable and fruit stand sign found on the island of Barbados. In this example the proximity of equally treated text and color create a field of compelling visual activity but the legibility suffers because of the mis-use of similarity of color, size inconsistencies and visual tension created by the proximity of text. Consider alternative visual tactics could be used to create a more readable and useful design for this sign.

Many voters in the Florida found this voting ballot confusing and unintentionally voted for the wrong candidate by punching the wrong hole in the center of the ballot. This in turn added to further confusion and dispute during the re-count of the 2000 presidential election.

A simple soultion would have been to address the heirarchy and proximity of information wihin the design. For exmaple here is a proposed redesign of this ballot which would have been much more clear for voters. Just imagine what impact design has on our lives!

Examples of hierarchy in form design

Classic confusion in the design and use of the Department of Motor Vehicles, vehicle registration form.

This form is required by any car owner when they register the car with the DMV in New York State. There are multiple parts of this form that are filled out by different parties, and there are also variable sections within the form that are requried based on what the reader / applicant wishes to do. Note the top of this form has internal and deal sections to fill out, and the bottom of the form also has administrative sections to fill out. The center of the form has instructions as well as variable ares within the form modules that also require information. There is a second page to this form which is equally complex.

Example of a redesign of information within a complex form.

Before: (Page 1 of the currect 1040 Tax Form)

After (Example of a revised design for the 1040 Tax Form by Ashton Peters & Dax Collins)

Examples of hierarchy in painting

At first glance this visual language seems to have no heirarchy but in fact if you look closely at how artist Jean Michel Basquiat's paintings uses contrast and color to tell an underlying narrative about the slave trade and avarice it shows a subtle hierarchy of visual information which is grounded with bold bilateral structure and justaposed color and supporting similarity with the use of text within a complex composition.

Native Carrying Some Guns, Bibles, Amorites on Safari, 1982, Acrylic and oil, oil paintstick on canvas with exposed wood supports, 72x72 inches. Collection of Francesco Pellizzi.

Below are you can see how Giotto's fresco establishes a visual heirarchy within the architectural space. The system clearly relies on a grid systems to organize the information in a linear pattern.

Giotto's Frescos in the Capella degli Scrovegni. 1304-1306. Padua, Italy.

Example of hierarchy in a student design for brochure/poster about a film series. Designed by Matthew McBride

In this typographic grid McBride has created a poster which may also be folded into a brochure. The folds follow the structure of the grid. 11x11" square folds within a 22x33" poster format.

Example of hierarchy in a product brochure

Look at how these page designs for an automotive brochure use these tactics along with an underlying typographic grid system.

To see more download the interactive brochure

When communicating information for maximum readability consider the following:

• Micro/Macro Readings so that readers can easily scan and ascertain information about the content.
• Layering and Separation can be used for emphasis of a focal point within a design and guide the eye through a hierarchy.
• Avoiding erroneous visual junk which can get in the way of the reader's comprehension of the content.

Class Activity

1) Group Crits

• Split up into groups or 3 or 4
• You will be critiquing other class mates assignments
• Choose one person from your group to "document" the criticisms for each of the designed collage heirarcies by writing out the pros and cons of the design, and elaborate on how the objectives of the assignment were or were not met. Do this for each of the projects you will be critiquing. Your notes will be given back to the designer for their reference.
• Identify the major elements and structure of the collages
• Do the designs effectively illustrate the requirements of the assignment?
• Identify areas of complexity in the visual structure and hierarchy that may be improved
• Make recomendations for improvements, such as proposing an outline of a new structure for the design so that it assists in visual flow and comprehension.
• Be prepared to present back to the the instructor. You should present which of the designs in your group crit were the most effective and why, AND which ones were the least effective and why.

2) Show and Tell

Working together in groups introduce each of your "designed objects" to your peers.

You present

Explain what it is. Demonstrate what it would be used for and show it's function and features and explain why you choose to focus on this object.

Your peers ask questions

Your peers should ask you questions about the designed object. Such as who is it for? How much does it cost? Where can you buy it? Why would you buy it? Is it a luxury item or a practical tool? What is it used for? How can you use it? Are there flaws in the design? What gestalt principles are at work within the designed object?

Document the discussion

During each presentation choose one or your peers to document EVERYTHING stateing in the Q and A about the object. Once your are done presenting, use the notes taken during your presentation as a starting point for your assignment this week.

If there is time, start preparation work on your assignment by exploring typography options that might work with your brochure assignment.

Assignment

Designed Object Brochure

You have been hired to create a brochure about your designed object.

The goal of this activity is to work on an iterative design and propose a solution to present the information to the intended audience in a manner that is easy to use, easy to understand, and - if possible - pleasing to read and compelling to encourage the reader to seek out the designed object to either learn more or to obtain it.

The brochure should be in color, and is a four page spread using letter sized (8.5x11") paper.

You may use Illustrator, Photoshop and any other software and materials, but the final file should be developed using InDesign.

This is a two week project. The first draft is due next week and includes the following

• Choose the type of brochure you will design and determine who your audience is and what their needs will be.
• Create five rough idea sketches of how you want your brochure to look.
• 2-3 different type faces that you would like to consider using for your brochure.
• A mood board exploring color and imagery and visual style
• Bring in at least three examples of brochures that you think are compelling and may relate to your designed object brochure.
• Design a first draft of the brochures typographic grid system.

Come to class prepared to present information about who your audience is; ideas for your brochure and a mood board with typeface examples and type explorations. Bring all your electronic files and artwork to class so that you may work on this project during class time.

Resources to help you organize your brochure design

Preliminary research for your brochure

• First, write down what you currently know "off the top of your head" about your designed object. Write down any key characteristics, benefits or features of your product.
• Research your topic to gather more details about your product. From these materials and what you already know about the topic start picking out 5 to 6 significant or interesting facts that you think you will want to highlight in your brochure.
• Look at sample brochures that you should collect and add to your journal. Identify those that have a style or format you might like to imitate or borrow. See how much detail each type of brochure includes.

Where does your brochure fit within the buying process?

Determine the type of product brochure you will design

• Point of sale Brochure: The type of brochure you may pick up when visiting a retail store or waiting on line at the register.
• Respond to Inquiries: When a persons asks about your product and you provide them with a brochure in the mail or download it from the web.
• Direct Mail: You marketing department will include your brochure into a mailing to it's customer mailing list
• Insert / Supplement: The brochure may appear as an insert in a news paper or magazine that broadly targets your customer base.

Know Your Audience

Who are you intending this brochure for? Consider if your audience attributes such as geographic location, income, marriage/family status, age, techno-graphics (do they go online, do they have a cell phone, do they have cable tv, etc.), gender, political or socio-economic tendencies, etc.

Taking into consideration who you are designing for will help you to make decisions which may impact the size of the text, the style of typography, the choice of color and imagery, etc.

Decide what type of information and issues this audience needs and design your brochure accordingly.

Content and elements of a brochure

Content to consider including in your brochure (note these are suggestions, you should choose what is most appropriate for your audience, type of brochure and goal.)

Note that while this brochure may not include real information (i.e. you may wish to use Lorem Ipsum place holder copy for your copy blocks) you should consider the type of information that would be relevant to your readers.

• Business or Organization
• Call to Action (What you want the reader to do: call, visit, fill out a form, etc.)
• Email Address
• Fax Number
• Features (does it come in different sizes, speeds, colors, styles, functionalites?)
• Graphic Imagery such as decorative elements which support the function and design of the brochure.
• Headline or Tag Line that draws the reader into the design
• History (eg. what is the back story about the product, designer, or company)
• Instructions (steps, parts, Is assembly required? How do you use the product? How do you clean it?)
• Key Benefits
• Lists, charts, diagrams, etc.
• Location of business or retail where the product can be purchased
• Logo (note this can be the real product logo or a "placeholder" as we will be developing your own logos for your designed object)
• Name of the "designed object" product
• Phone Number
• Photographs of product, place, people using the product
• Short narrative making compelling and easy to read blocks of text.
• Subheads.
• Web Page Address

Note the first draft does not need to be mounted, bring in loose print outs of your visual mood boards, related deliverables.

Research

Class Journal

Define the following terms in your class journal, include visual examples of these typographic terms.

• Kerning
• Letter spacing (aka tracking)
• Leading
• Alignment
  • justified
  • flesh left
  • flush right
  • centered
• Vertical alignment
• Hierachy
• Modular Typographic Grid

Reading

pp 11 - 55 Thinking with Type by Ellen Lupton. Princeton Architecture Press, New York, 2004

Related Information

• Online source to generate Lorem Ipsum placeholder text www.lipsum.com

Extra Credit Optional

This extra credit assignment will be considered the same as TWO full home work assignments in the consideration of your grade.

Using the Central Intellegence Agency World Fact Book https://www.cia.gov/cia/publications/factbook/docs/profileguide.html

Choose a country profile from the website

Create a color, folded brochure using an eight or 16 page broadside-style fold on a two page spread.

• A broadside-style fold doubles its area by folding in half on itself before any characteristic folding style is created.
• A spread is both front and back sides of a page.

Learn more about common folds for paper and printing http://americanprinter.com/mag/folding_lingo_0805/

Your brochure may be a socio-political brochure focusing on a particular aspect of the country that you want to bring attention to eg. HIV epidemic, Poverty, War, Despotism, etc. It may be a travel brochure developed for tourists. You decisde the context of the brochure.

This extracredit assignement is due at the end of the term with your portfolio review.

Your brochure may include any information based on the data available on the CIA World Fact Book Site

Examples of the content you may obtain through the fact book includes:

• Government
  • Country name
  • Government type
  • Capital
  • Political parties
  • Name and Title of Leader(s)
  • Flag (image)
• Background
• Geographic Location
  • Geographic coordinates
  • Map (graphic image)
  • Area
    • total
    • land
    • water
  • Area - comparative (As big as Texas, etc.)
  • Land boundaries - border countries if any
  • Natural resources
• Population
  • Age structure
    • 0-14 years
    • 15-64 years
    • 65 years and over
  • Median Age
  • Population growth rate
  • Birth rate
  • Death rate
  • Sex ratio
    • at birth
    • under 15 years
    • 15-64 years
    • 65 years and over
    • total population
  • Infant mortality rate
    • total
    • male
    • female
  • Life expectancy at birth
    • total population
    • male
    • female
  • HIV/AIDS
    • adult prevalence rate
    • people living with HIV/AIDS
    • deaths
  • Nationality
  • Ethnic groups
  • Religions
  • Languages
  • Literacy
  • Population below poverty line
  • Household income or consumption by percentage share
    • lowest 10%
    • highest 10%

Explanations of all these types of data are available in fact book. https://www.cia.gov/cia/publications/factbook/docs/profileguide.html