Fall 2009

Module 4. Hierarchy 1

Unit 1. Design

Module 4: Organization Principle: Hierarchy

Module 4. Hierarchy 2

Introduction

• Hierarchy is the order of importance within a social group (such as the regiments of an army) or in a body of text (such as the sections and subsections of a book).

• Hierarchical order exists in nearly everything we know, including the family unit, the workplace, politics, and religion.

• Indeed, the ranking of order defines who we are as a culture.

• Hierarchy is expressed through naming systems: general, colonel, corporal, private, and so on.

• Hierarchy is also conveyed visually, through variations in scale, value, color, spacing, placement, and other signals.

Module 4. Hierarchy 3

Introduction

• Like fashion, graphic design cycles through periods of structure and chaos, ornament and austerity.

• A designer's approach to visual hierarchy reflects his or her personal style, methodology, and training as well as the zeitgeist of the period.

• Hierarchy can be simple or complex, rigorous or loose, flat or highly articulated.

• Regardless of approach, hierarchy employs clear marks of separation to signal a change from one level to another.

Module 4. Hierarchy 4

Introduction

• A well designed visual has a clear starting point (helped by a clear dominance) and guides the viewer through the design.

• What is most important, less important, and the least important parts of the design can be clearly expressed by having a clear hierarchy.

• You can achieve clear hierarchy of elements by separating the most important element on the page and group more closely together other less important elements.

• You can use the same color or shape of similar elements to guide a reader or viewer down the page.

• In general, according to White, having more than three levels of hierarchy in a single design leads to confusion for the reader.

Module 4. Hierarchy 5

Introduction

• When you look at many well-designed ads, there's a headline that is big and attention grabbing, maybe a large photo, and then the rest of the information is arranged to give each part more or less importance.

• There may be additional smaller photos showing details, or contact information or where to find a product.

• There may be copyright notices at the bottom of the page in small type.

• All of these things are designed, sized and spaced to help the reader move through the information logically.

• Readers aren't forced to work through everything to find the important items.

• Adding subheads makes it even easier for the reader. • If I wrote this as one long paragraph, with no breaks, it

would be a lot harder to read. • And I'd run the risk that you wouldn't bother with it.

Module 4. Hierarchy 6

Research and Hierarchy

• Creating hierarchy in visual design involves the creation of cues/signs that direct the eye to engage with certain information in a certain (desirable) sequence.

– Cues are signals that capture the viewer’s attention.

– Cues are created using a variety of design tools: shapes, color, typography, white space, texture, and depth.

• Contrast, alignment, and proximity are specific strategies for creating hierarchy.

• There is an interrelationship between hierarchy and figure-ground.

Module 4. Hierarchy 7

Research and Hierarchy

Hierarchy and Figure-Ground• Figure-ground is important regarding

hierarchical considerations because what you notice first directs you to what you see next.

• Figure-ground also acts as to provide direction, location, position, motion, and sequences – all of which are hierarchical functions.

• Just as viewers (learners) automatically and somewhat unconsciously seek figure-ground distinctions, they likewise seek hierarchical relationships as well. (Lohr, p. 124)

Module 4. Hierarchy 8

Creating Hierarchy

Three steps have been identified as essential to creating hierarchy:1.Chunking Information2.Providing entry points to instruction3.Using horizontal and vertical planes

Module 4. Hierarchy 9

Chunking Information

• Chunking is a principle that applies to the effective communication of information between human beings.

• It was particularly useful initially in the domain of written communication.

• It was first put forward in the 1950s by Harvard psychologist George A. Miller.

• He published a landmark journal article entitled "The Magical Number Seven, Plus or Minus Two".

• Miller studied the short term memory. • For example, how many numbers people could be reliably

expected to remember a few minutes after having been told these numbers only once.

• The answer was: "The Magical Number Seven, Plus or Minus Two".

• Miller’s concept goes beyond numbers. • For example, most of us can remember about seven

recently learned chunks of similarly classified data.

Module 4. Hierarchy 10

Chunking Information

• Chunking: The human ability to group information into related small sets, which can then be stored in short-term memory. 

• By keeping information in smaller pieces, the functional storage capacity of the brain is increased. 

• Information is often presented in a chunked format to facilitate human memory, for example North American phone numbers are often grouped into the xxx-xxx-xxxx pattern. 

• Familiarity with the information and/or rehearsal of it increases the person’s ability to remember the information. 

Module 4. Hierarchy 11

Chunking Information

• In the past, designers used Miller’s “seven plus or minus two” rule.

• That is, no more than seven to nine chunks of information at any one time.

• Cowan more recently suggested that three to five information chunks as the maximum number for working memory. (Lohr, p. 125)

• Given this recent finding, there is the implication that visual design should present fewer rather than more chunks of information.

• Remember that chunks can vary in size.

Module 4. Hierarchy 12

Chunking and Learner Expertise

The greater the expertise possessed by the learner, the greater number of information units that can be effectively

and efficiently processed within a chunk.

Module 4. Hierarchy 13

First Impressions

• When the visual field (white space) is small and the image is large, the viewer is more inclined to notice details of the image.

• When the visual field is large and the image is small, the viewer is more likely to notice the whole image.

• Thus, the white space in an image can be manipulated to create an equal perception of the big picture and the detail.

• Providing detail in an image is important because we tend to be attracted to and are often motivated by it.

Module 4. Hierarchy 14

Making the Eye See Different Parts of the Visual

• Create paths or layers through which the learner can travel to gain understanding.

• Create paths by controlling the sequence in which information is displayed.

– Progressive disclosure– Lines, and cells in tables, graphs, and charts– Non-linear links in hypertext environments

• Gain and direct the viewer’s attention by using design devices including lines, arrows, and the composition of the message.

Module 4. Hierarchy 15

Hierarchy Using Alignment

Vertical Alignment• People see items placed on the top of a

vertical plane as being high powerful, lightweight, light color, spiritual, valuable, rare, and primary.

• Objects placed low on a vertical plane are perceived as dark, heavy, earthy, common, and secondary.

Module 4. Hierarchy 16

Hierarchy Using Alignment

Horizontal Alignment• Elements placed on the left side of the plane are perceived

as before, cause, primary, problem, crude.• Images on the right side are perceived as after, effect,

secondary, solution, refined.• Lines between elements show cause and effect.

– Strengthen this perception by placing the causal element on the left of the affected element.

– Use thick lines to strengthen the relationship.– Arrows imply an even greater relationship.

• Show evolutionary relations using left to right pattern.• Utilize organizational structures to facilitate memory and

match learners’ organizational schema.

Module 4. Hierarchy 17

Hierarchy Using Alignment

Diagonal Alignment• Diagonal lines can be used to generate

excitement and energy in images.• However, making diagonal arrangements look

balanced can be very difficult.• Information on the top of a diagonal plane is

perceived as adventure, far, later, unknown, and secondary.

• Information placed at the bottom is perceived as near, now or soon, familiar, primary, intrusion, and involvement.

Module 4. Hierarchy 18

Hierarchy Using Alignment

Reading Order• If neither the vertical, horizontal or

diagonal strategies is used, learners will likely resort to their preferred reading order.

– Place most important items in the upper left-hand corner of a display or page;

– Place the next most important items to the immediate right, and work toward a lower position on the page/display (a shape corresponding to the letter “Z”).

Module 4. Hierarchy 19

Hierarchy Using Alignment

Proximity• Text placed close to an image it references is perceived as

related.• Text placed close to other text will have a similar effect.

Contrast• Images that are brighter or darker are often perceived as

more important, dominant, or superordinate.• Larger images are perceived as more important, powerful,

and superordinate than smaller images.• Shades of color communicate sequence, time passing, and

rates of change.

Module 4. Hierarchy 20

Use of Hierarchy to Design Tables and Charts

Tables1.Use tables to make information easier to understand

– Some people find tables to be daunting and confusing.2.Use columns instead of rows when making comparisons

– Side-by-side position implies a coordinate relationship3.Use rounded numbers when detail is not needed

– Rounded numbers are easier for most people to comprehend and remember.

4. Include averages– The use of averages can help learners summarize data.

5.Place words before numbers6.Keep words and numbers a readable distance apart7.Create chunks in data to make it easier to read and retrieve

Module 4. Hierarchy 21

Use of Hierarchy to Design Tables and Charts

Charts and Graphs1. Avoid “chartjunk”

– Chartjunk = overly embellished statistical information– De-emphasize the data container

2. Use bar charts to display values across categories3. Focus attention on the data, not the data container

– Eliminate surrounding borders, y-axis, and x-axis4. Reconsider the use of picture/isotope and three-dimensional charts

– The use of pictorial data “dummies down” the data and insults the reader

– Exact quantities may be difficult to read in three-dimensional charts

5. Use pie charts for general rather than specific information.6. Use line charts to show trends over time (up to 5 lines of data).7. Be cautious with stacked area graphs8. Consider picture charts when a picture does speak a thousand words

Module 4. Hierarchy 22

Hierarchy in Books, Electronic Presentations and Web Pages

• Some media have predetermined or pre-formed hierarchies because of their inherent nature: books, electronic slides, computer or web-based training elements.

• CBT/WBT use menus that serve as the highest level followed by units of instruction, instructional content, practice activities, and feedback levels.

• For developing general web sites, thinking of hierarchy as analogous to a family tree is helpful as an organizing scheme.

Module 4. Hierarchy 23

Techniques to Show Hierarchy

1. Use signal words2. Use numbers or letters to show sequence3. Use visual metaphors to show relationships:

• High = powerful; Low = less powerful

4. Use lines and arrows to show relationships– Thicker lines between elements suggest stronger connections

than thin lines– Arrows imply an even stronger relationship

5. Use lines, arrows, and shapes to imply speed and direct attention

6. Use “ghost images,” small multiples, and numbers or letters to suggest temporal events.

7. Use the size of common objects to make comparisons

Module 4. Hierarchy 24

Hierarchy and Picture Functions

Decoration• People and faces used as decorative elements can also

direst the eye toward text or other essential elements.

Representation• Representative images depict something and can be more

motivational and interesting than simple line or shape representations.

Organization• Organizational images effectively provide temporal or

spatial relationships; use chunking, numbering, etc.

Explanation• Clarifies complex and difficult concepts or phenomena• Use labels and eliminate non-essential elements/detail

Module 4. Hierarchy 25

Using Hierarchy to Facilitate Generative Strategies

FLASHBACK: Generative strategies are techniques that require learners to generate their own meaning using specific techniques and tools: outlining content, creating organizational charts, mental images, analogies, and summarizing information in their own words.•Learners can generate their own hierarchy by using:

– Mental imagery, – Creating an outline , concept map, and a flowchart to represent

content structure (Inspiration, Mind Manager, Smart Draw), and – Creating an image or model that summarizes essential points of

instruction.

Module 4. Hierarchy 26

References

• Meek, L. (2007, August 6). Visual Metaphors: 7 rockstar examples on the web. Retrieved from http://www.devlounge.net/articles/visual-metaphors-7-rockstar-examples-on-the-web

• Signal Words http://web.clark.edu/martpe/signal%20words.htm

Module 4. Hierarchy 27

Web Page Hierarchy: "Family Tree"

Module 4. Hierarchy 28

BACK

Module 4. Hierarchy 29