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.

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 Activities

1) Group Crits

• Split up into your teams (Yankees, Mets, Giants and Jets).
• 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.
• What to evaluate
  • 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) Grid and Photo Excercises

Task

• Create three different grid systems using an 8.5 x 11" sheet of paper, portrait or landscape orientation.
• Modular Typographic Grid (4 columns, 7 rows OR 7 columns, 4 rows)
• Column Grid (5 columns)
• Manuascript Grid (1 column, header and footer, and margin for annotation notes, captions, and footnotes)
• Choose 3 photographs from the 60 that you took during your research this week and create a composition using the same three photos in each of the three grid systems listed above.
• And compose the following text within each of the three grids. Design with heirarchy and readability in mind. Use gestalt principles to make your design compelling and visually distinctive.

In his "Theatres of Memory," the Oxford historian Raphael Samuel reaffirmed the power of the present in directing our understanding of the past: "History is an argument about the past, as well as the record of it, and its terms are forever changing, sometimes under the influence of developments in adjacent fields of thought, sometimes…as a result of politics…" History, he argued, must continually be revised, "stamped with the ruling passions of its time," yet to be convincing it must create "a consecutive narrative out of fragments, imposing order on chaos, and producing images far clearer than any reality could be." Historical studies that engage and excite us use the past to inform our present preoccupations and interests. - History with Attitude: A subjective Tour of Studies in American Graphic Design Education, by Ellen Mazur Thomson

• Save your electronic files, and add print outs of these three grids into your journal.

3) Team User Scenario Discussion

Task

Create a set of common activities for your personas to achieve. Then individually outline each of these tasks as written scenarios. Your scenarios should have common elements such as an over arching user goal, a begining a middle and an end, with at least 12 and no more than 16 tasks or distinct actitivies through out the user narrative.

Discussion

Working together in groups discuss your common persona(s).

Come up with a common team goal that each of you may then build a use case scenario from.

For example the goal could be for your persona...

...who lives in NYC to participate in a scavenger hunt and bar crawl as part of a college orientation.

...who doesn't live in NYC and s/he is planning a visit to see broadway plays and go to museums.

...who is visitng NYC from another country and speaks a little bit of english and is visiting family.

...who is on a working trip to NYC doing branding / cool hunting and writing about inspiration for a new design collection for the company they work for.

etc... Be creative and come up with an interest goal for your team to base the design of your next project for.

Take a look at these websites for some inspiration.

• www.plannyc.org
• www.nycvisit.com
• www.iloveny.com
• www.nyc.gov
• newyork.citysearch.com
• www.nyctours.com
• www.wgsn-edu.com Each of you has been provided with free academic access to the fashion and design insustry trends and research service WGSN-edu website. If you have not done so already request the registration PIN from your instructor inorder to register. Click PIN update (a link in the left-hand column of the home page). Input the PIN supplied to your by your instructor and leave the old username and password boxes blank and fill in the registration form.

Examples fo user scenarios

Example 1 Highlevel user scenario A user narrative can be as general as an outline of a series of events starting with a goal.

Actor and Goal: Sally is planning to visit her best friend Molly for her birthday in NYC.

User Scenario:

• Sally makes travel and hotel reservations
• Sally makes an itinterary for the trip including buying tickets to a broadway show, getting resturant recommendations for dinner, and making arrangements with Molly's boyfriend to set up a surprise party.

Example 2 Detailed use case scenario A user narrative can then be broken down into fairly detailed events, tasks and procedures.

Actor and Goal: Sally makes travel arrangements to NYC.

Use case scenario:

• Sally gets the location of a travel agent service via an unspecified way (search engine, URL in an email, service directory, etc).
• Sally provides a destination and some dates to the travel agent service. The travel agent service inquires airlines about deals and presents them to the user.
• 5.1.2 Scenario / Steps
  • Sally is presented with a form to fill in order to provide the travel agent service with details about dates of her travel and the destination.
  • Sally submits the information to the service in order to get a list of flights corresponding to her schedule.
  • The travel agent service finds a list of airlines.
  • The travel agent service requests a list of flights accommodating the user.

Assignment

Designed French Fold Brochure

You have been hired to create a brochure about your neighborhood / event.

This brochure should meet the needs of the user narrative that your team created in class.

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 neighborhood/event and/or participate in some related activity.

The brochure should be in color

Create an underlying modular typographic grid to organize your design.

Format is a double sided french fold brochure

A french fold brochure is made by folding a page in half in one direction and then folding the folded page in half again in the opposite dimension.	After folding, it consists of eight panels (four on the front and four on the back).

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

• Determine who your audience is and what their needs will be.
• Establish what the content will be to meet those needs.
• Create five rough idea sketches of how you want your brochure to look.
• Using the typeface(s) that you have been researching.
• Create a mood board exploring color, imagery and visual style.
• Bring in at least one example of a printed design (magazine, booklet, etc.) that you think is compelling and may relate to your designed brochure. Add this to your journal and bring it to class to show to the instructor.
• Design a first draft of the brochures typographic grid system using Indesign.

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 neighborhood / event.
• Research your topic to gather more details. From these materials and what you already know about the topic start picking out 6 to 7 significant or interesting facts that you think you will want to highlight in your brochure.

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.)

• Historical event, landmark, tourist destination, location of cafes, or landmarks, etc.
• Call to Action (What you want the reader to do: call, visit, fill out a form, etc.)
• 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 event, neighborhood, etc.)
• Instructions (steps, parts, How do you get to this neighborhood, find your way around, etc.)
• Lists, charts, diagrams, etc.
• Photographs of event or neighborhood, etc.
• Short narrative of easy to read blocks of text.
• Subheads.
• Further information such as a website address, list of related resources, a coupon for a local business, a map, etc.

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

Research

Class Journal

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

• Alignment
  • justified
  • flesh left
  • flush right
  • centered
• Vertical alignment
• Hierachy
• Modular Typographic Grid
• Column Grid
• Manuscript Grid

Related Information

• Online source to generate Lorem Ipsum placeholder text www.lipsum.com
• User Scenario examples
  • Actors and Goals