Summer 2008

Module 5: Integration Principle: Gestalt

Gestalt Based on the belief that the whole is greater than the sum of its parts Example: combining text and visuals produces more effective visuals for learning than if are treated separately Tufte: “Simplicity is not the lack of detail but an organization of detail that makes the information meaningful and clear.” Five principles: 1. Closure – the mind seeks completion 2. Contiguity – the mind seeks a direction to follow and continues to follow based upon directional cues 3. Proximity – the mind’s tendency to group elements based upon their closeness to each other 4. Similarity – the mind’s tendency to group items based on likeness; facilitated by repetition 5. Experience – process of helping the learner/viewer integrate information in a meaningful way Module 5. Gestalt3

The Principle of Integration and Gestalt “Gestalt is the all-encompassing principle of perception.” (Lohr, p. 160) The principle of integration in visual design is founded on the utilization of the tools, actions, and principles discussed in this module (Chapter 7, textbook) Gestalt is a general description for the concepts that make unity and variety possible in design. It is a German word that roughly translates as "whole" or "form." Gestalt theory is involved with visual perception and the psychology of art and visual design, among other things. It is concerned with the relationship between the parts and the whole of a composition. Module 5. Gestalt4

The Principle of Integration and Gestalt The aspects of gestalt theory that interests designers are related to gestalt's investigations of visual perception, principally the relationship between the parts and the whole of visual experience. The visual world is so complex that the mind has developed strategies for coping with the confusion. The mind tries to find the simplest solution to a problem. One of the ways it does this is to form groups of items that have certain characteristics in common. Module 5. Gestalt5

The Five Gestalt Principles Closure A complex object is really a group of simple items that the mind puts together as a single entity. A face is a collection of eyes, ears, nose, mouth, etc. You can recognize a familiar face even if part of it is hidden (with a hat or sunglasses for instance). Your mind supplies the missing parts if enough of the significant features are visible. A simple example of this can be seen with this series of circles. Module 5. Gestalt6 As more and more of each is removed the circle still remains identifiable until more is missing than is present. This is called closure because the mind "closes" the image by supplying the missing parts. In other words, the mind seeks “completion

The Five Gestalt Principles Closure The principle of closure suggests some basic directions: 1. Simplify designs, because in some instances it is not necessary to include all details of a complete image. 2. Including some “gaps” in the image permits learners to complete or fill in their own information Module 5. Gestalt7

The Five Gestalt Principles Contiguity Also known as the theory of direction, this principle holds that the mind will seek a direction to follow and will continue to follow directional cues. In other words, once you start looking in a particular direction you will continue looking in that direction until you see something significant. When there is a strong line or plane in an image, the eye wants to follow – and continue to follow - that line. Module 5. Gestalt8

The Five Gestalt Principles A simple example of this is illustrated. You notice the small circle that the hand points at in preference to the closer, larger circle. In a sense this is a kind of closure -- a grouping of disconnected items by momentum. Module 5. Gestalt9

The Five Gestalt Principles Similarity The principle of similarity is close in meaning and application to repetition. Gestalt is based on what items look like not what they are like. The tendency of the mind is to group items based upon likeness. By grouping elements in a visual, the mind is automatically reducing the cognitive load placed on memory. Module 5. Gestalt10

The Five Gestalt Principles Similarity There are three major similarity types -- ways items can look alike (or look different): 1. Size Size 2. Value-Color Value-Color 3. Shape Shape Use of a grid system is recommended as a means of enhancing the principle of similarity. This is the technique applied most often in the design of web pages. Correctly applied, a grid system will allow learners to predict where a particular piece of information will/can be found in a visual design. Module 5. Gestalt11

The Five Gestalt Principles Proximity Proximity relationships will generally dominate over similarity relationships. The strongest control is available when the two are used together. The amount of space involved is relative. Thus, proximity is concerned with where items are placed. There are four specific types of proximity relationships: close edge, touch, overlap and combining. Module 5. Gestalt12

The Five Gestalt Principles Proximity: Close Edge The general concept for proximity states that the closer items are to one another, the more likely they are to be seen as a group. We read words from left to right but also from top to bottom. Close edge relationships can form groups in any direction. What would you order if you saw this sign in a restaurant window? FREE WATER FOOD SOLD Module 5. Gestalt13

The Five Gestalt Principles Proximity: Touch When items get close enough they touch. They still are two different items but they seem to be attached together. This makes for a stronger gestalt than close edge. Notice in the example to the right that the touching groupings are stronger than the close edge groupings. In the example there are no size differences so the shape relationships are more noticeable. Module 5. Gestalt14

The Five Gestalt Principles Proximity: Overlap The strongest gestalt between two items happens when they overlap. Two colors are used in the example to the right to show the overlaps better. When the two items are the same color they seem to form a new, more complex shape. The new shape seems flat. Module 5. Gestalt15

The Five Gestalt Principles Previous Experience New impressions are influenced by previous experiences or by the immediate context. Learners analyze and interpret new information based in part on a range of learner experiences, emotions, and the prevailing situation; e.g., circulatory system and plumbing Symbols, icons, and metaphors are utilized to capitalize on previous experience. When people encounter familiar symbols, they quickly understand their meaning. People in other cultures interpret symbols differently. Module 5. Gestalt16

Gestalt: Instructional Interface Metaphors Instructional interfaces serve to provide directions in distance learning environments. Outline metaphor – organize computer-based learning and serve as an interface format Book metaphor – table of contents with a display of instructional information against a background of pages Desktop metaphor – the learning environment is organized around desktop elements: folders, files, etc. Syllabus metaphor – course work organized around a familiar syllabus format: goals, objectives, grading policies, etc. Module 5. Gestalt17

General Interface Design Guidelines for Websites 1. Know your users 2. Keep navigation clear 3. Provide one menu with many links rather than many menus and submenus of fewer links 4. Keep loading time to a minimum 5. Design for simplicity, using the same grid structures and layouts 6. Give visual feedback to any actions users take; e.g., change colors on links clicked. 7. Consider needs of handicapped users Module 5. Gestalt18

Tools and Actions to Increase Gestalt The task of the designer is to create visuals that reduce the work required for the learner to gain meaning. Type Shape Color and repetition Depth and contrast Space Module 5. Gestalt19

Type of Balance to Use Symmetry is achieved when all elements in a display are centered. Asymmetry is form that does not have balanced proportions. The Rule of Thirds – The Rule of Thirds Divide the visual elements of a display along the intersection of imaginary lines that divide an image into thirds. Placing the focal point near the intersection of these lines can be particularly effective This is a “rule of thumb” that may not be applicable in all situations. Module 5. Gestalt20

Type of Balance to Use The Golden Rectangle is the ratio of the length to the width of what is said to be one of the most aesthetically pleasing rectangular shapes. Evokes a sense of harmony from the viewer. Ratio of 5 to 8 units Module 5. Gestalt21

Similarity Size Notice in the example on the right that the squares and circles are presented in two different sizes. Do you first notice them grouping because of their shape or their size? The difference between the sizes is probably greater here than the difference in the shapes. Had they been only slightly larger the shape difference might have been noticed first. The potential, however, for size variation is greater than the differences possible in shape so size is usually a more dominant similarity type. Module 5. Gestalt22 BACK

Similarity Value-Color Another powerful similarity type is value/color. The two are grouped together because value is part of color but can act independently (black and white images). Again notice that the dominant grouping concept is color not shape. Color makes items easy to identify and hence makes a good grouping tool. Value can work as easily as color, and in fact sometimes is a stronger design element. Module 5. Gestalt23 BACK

Similarity Shape Shape, and shape-like elements such as direction and texture, can also form groups. When all other things are equal it performs quite well in this function. The squares and circles used here are simple geometric shapes. It is possible to make shapes that are more distinct and therefore more noticeable. Complex shapes may stand out more but there is attractiveness to simpler shapes that makes them more powerful visual elements in most cases. They appeal to our sense of order. A simple example of using shapes to group is the use of italic or bold type to emphasis and separate parts of a sentence. Module 5. Gestalt 24 BACK

Rule of Thirds Take a look at these two photos of a lion. On the one on the top your eye is drawn straight into the centre of the image and you tend to ignore the rest of the picture. On the one on the bottom, where the lion's face is on one of the Rule of Thirds 'hotspots', your eye is drawn to the lion's face, then around the painting following the curve of the body. Module 5. Gestalt25 BACK Type of Balan ce to Use Type of Balan ce to Use