Gestalt theory in multimedia design: a guide for teachers

Denae Fiez 2444537

EDGE903

BackgroundThis presentation is designed to assist teaching effective digital multimedia design in the classroom.

We look at several of Gestalt’s principals and how they can be applied in multimedia education.

I have included examples from my own teaching in order to further illustrate how student’s can apply these principles in order to further develop their design techniques.

Examples come from a year 6 class who were asked to design both a brochure and a PowerPoint based website based around Bali. The students received little to no instruction into Gestalt principles.

GestaltChang, Dooley and Tuovien (2001) state Gestalt theory as being “a family of psychological theories, that have influenced many research areas since 1924, including visual design issues.”

They note that “The Gestalt laws explain how the individual elements from the environment may be organised into fields or structures. Traditionally the Gestalt laws are used to suggest how static visual elements should be presented in order to achieve effective visual results.”

Jackson (2008) suggests that Gestalt theory has to do with the brain’s “self-organising tendencies.” He states that “although the individual elements may contain some meaning , the coherent whole will have a greater meaning than the sum of the parts.”

Gestalt

Williams Brosnan and Swan (2008) note that “Gestalt theory states that learning is best achieved if based on understanding”, also known as ‘insightful learning’ “and occurs when the student has understood principals behind the material to be learned, rather than just memorising specific information.”

Chang, Dooley and Tuovien (2001) found that Gestalt theory is “one of the foundations for instructional screen design.” and that “it is generally accepted that Gestalt theory may be used to improve educational screen design and thereby improve learning.”

Balance / Symmetry

“A visual object will appear incomplete if the visual object is not balanced or symmetrical” Chang, Dooley and Tuovien (2001)

You can see here the difference between the two examples. In the first figure the page looks very busy and disorganised, as though the pictures do not relate to each other or the overall design. Whereas the balance in the second example makes it seem neater and more complete.

Continuation“Continuation is the eye’s instinctive action to follow direction derived from the visual field” Chang, Dooley and Tuovien (2001)

You can see here in the first example that the eye has trouble following the visual field, thus the elements look confusing. In the second example, the line of links on the left hand side give the eyes a visual path to follow and thus makes navigation much easier.

ClosureChang, Dooley and Tuovien (2001) note Fisher and Smith Gratto (1998-99) when they point out that “open shapes make the individual perceive that the visual pattern is incomplete” and “the sense of incompletion serves as a distraction to the learner.”

Moore and Fitz (1993) note that “If an area is not closed, readers search in the local context of the page to see what the area belongs to and then they fill in the gaps in order to complete it.” Thus even though part of the rear picture is obscured, the readers brain automatically fills in the gaps to finish the picture. This is an example of clear closure.

Figure / GroundMoore and Fitz (1993) note that “we cannot perceive figures unless they are separate in some way from their backgrounds.”

We can see from the above examples that when a similar background colour is used, it makes the content very hard to read. When an appropriate contrasting colour is used as in the example to the right, you find the information a lot easier to read. I have found this to be one of the most common mistakes made with primary school students.

Focal Point“The focal point catches the viewer’s attention and persuades the viewer to follow the visual message further.” Chang, Dooley and Tuovien (2001)

Whilst in the example on the left, your attention is initially drawn to the heading, your focus then goes upon the links placed randomly around it. The contrasting colours of the heading and links do stand out, but unlike the second example, your attention is not drawn to the important information that the page is trying to convey.

Isomorphic Correspondence

Chang, Dooley and Tuovien (2001) note that “all images do not have the same meaning to us, because we interpret their meanings based on our experiences.”

Using our Bali assessment as an example, it would have been appropriate for the students to use the picture of a Balinese hut as the “home” icon as it is a common symbol. However the use of a random element such as an elephant or orangutan would cause confusion for the user, as they would not be able to readily relate the two.

Good Form (Pragnanz)Chang, Dooley and Tuovien (2001) explain good form as “a simple design or a symmetrical layout.”

There is much to learn here for primary school students, who, as you can see from the example on the left, often try to fit as much onto a page as possible, particularly when using technology. Simple designs such as that on the right however, are often much more effective.

Proximity“The law of proximity states that items placed near each other appear to be in a group” Chang, Dooley and Tuovien (2001)

As you can see from this example, the image on the left shows a distinct grouping of the hyperlinks along the top of the page, establishing them as a group and allowing the user to recognise their relationship to one another. Even with the links slightly out of alignment as in the example to the right, you can see that the objects do not appear immediately linked.

Similarity

Moor and Fitz (1993) explain the law of similarity as “units which resemble each other in shape, size, colour, or direction will be seen together as a homogenous grouping.”

This can also be seen in the previous example, where all of the links are of one font type, size and colour. Simply by changing the font of the text immediately removes some meaning from it.

Simplicity

Chang, Dooley and Tuovien (2001) note Fisher et al. (1998-99) when they state that “when learners are presented with visuals, there is an unconscious effort to simplify what is perceived into what the viewer can understand.”

In this example, the information is being cluttered up by the busy background, and the the loud text. If the image and text were presented in a simpler fashion, it would be a lot easier for the user to take the information on board.

Unity / HarmonyChang, Dooley and Tuovien (2001) note Lauer (1979) in explaining that “unity implies that a congruity or arrangement exists between elements in a design; they look as though they belong together.”

The above example shows three pages from the one website. You can see that whilst navigating through this site, the user would have a large degree of confusion and would not feel comfortable navigating as the pages do not work together to form a site.

Recommendations

The use of these principals can be quite useful in the primary classroom, particularly in technology, but also in general creative arts and design.

As you can see from my examples, by not using the principles, you can end up with some very interesting designs, which are often very hard to read and interpret.

Hopefully by keeping these principles in mind, you are able to create an environment of awareness in your classroom when developing multimedia design projects.

Reference:

6B Bali Website and Brochures, Grose View Public School, Grose Vale, NSW.

Chang., D., Dooley, L., & Tuovinen, J.E, (1001) Gestalt Theory in Visual Screen Design – A New Look at an Old Subject. Seventh World Conference on Computers in Education, Copenhagen, July 29 – August 3, 2001.

Jackson, I., (2008), Gestalt – A Learning Theory for Graphic Design Education, International Journal of Art & Design Education, v27 n1 p63-69 Feb 2008

Moore, P., & Fitz C., (1993) Using Gestalt Theory to Teach Document Design and Graphics, Technical Communication Quarterly. Vol 2, No. 4., Fall 1993

Williams, M., Brosnan, S., & Swan, J., (2008) SkillQuests: Bringing real life to the classroom with a collaborative computer-based instructional tool. Proceedings ascilite Melbourne 2008.