This document discusses the Gestalt principles of design, which are theories about how humans perceive and organize visual elements. It describes the principles of balance, continuation, closure, figure-ground relationship, focal point, proximity, similarity, simplicity, and harmony. For each principle, it provides the theory, examples of how to apply the principle in design, and an illustrative example. The goal is to help designers understand how to structure interfaces in a way that is intuitive for users based on cognitive processes.

1. An Instructional Guide to Multimedia and Interface Design Gestalt Theory Katherine Meagher 2126849

2. Home Bibliography Balance Continuation Closure Figure-Ground Focal Point Interpretations Good Form Proximity Select a topic… Similarity Simplicity Harmony Gestalt Principles Introduction

3. Balance The theory The human brain perceives information to be incomplete if it is not balanced or symmetrical. In practice Design interfaces that have an even balance of elements on the screen. Example Balanced Unbalanced Home Introduction Bibliography Continuation Closure Figure-Ground Focal Point Interpretations Good Form Proximity Select a topic… Similarity Simplicity Harmony Gestalt Principles Balance

4. Continuation The theory When people view images, their eyes will follow an obvious path or flow of information. In practice Peoples’ natural instinct to follow obvious paths of information can be used to direct their gaze to the appropriate information. Example Home Introduction Bibliography Balance Closure Figure-Ground Focal Point Interpretations Good Form Proximity Select a topic… Similarity Simplicity Harmony Gestalt Principles Continuation

5. Closure The theory The human brain prefers to view and interpret full and complete visual data. Viewing incomplete data causes disturbance to the viewer. In practice Use incomplete (open) visual data only where drawing attention to the information is the aim. Example Text that is open is harder to read and requires greater attention and focus to comprehend the information presented. Home Introduction Bibliography Balance Continuation Figure-Ground Focal Point Interpretations Good Form Proximity Select a topic… Similarity Simplicity Harmony Gestalt Principles Closure

6. Figure-Ground The theory Tones and colours can be used to show the difference between the foreground and background of visual data. This can change people’s perception of data. In practice Use appropriate colours and tones to ensure that the visual information presented is perceived in the manner intended. Example The same image in different tones can change perception. (Chang, D, Dooley, L and Tuovinen, J, 2002, p2) Home Introduction Bibliography Balance Continuation Closure Focal Point Interpretations Good Form Proximity Select a topic… Similarity Simplicity Harmony Gestalt Principles Figure-Ground

7. Focal Point The theory Focal points in visual data are designed to capture the attention of the user. A focal point is intended to encourage the viewer to further explore the information presented. In practice Focal points can be created by making the intended point clearly different from the other information being presented. Example 20% OFF all digital cameras The focal point attracts attention, being larger and in a different font, colour and size with a shadow effect. It also encourages the user to read further details about the offer. Home Introduction Bibliography Balance Continuation Closure Figure-Ground Interpretations Good Form Proximity Select a topic… Similarity Simplicity Harmony Gestalt Principles Focal Point

8. Interpretations The theory Isomorphic correspondence is the terminology used to describe things that are understood to have certain meanings due to cultural uses and understandings. In practice Design interfaces that use standard cultural understandings where appropriate. Example The colour red and the X are have a standard meaning of ‘stop’ or ‘exit’. An image of a house has a standard understanding that clicking on it will take you to a ‘home’ screen. X Home Introduction Bibliography Balance Continuation Closure Figure-Ground Focal Point Good Form Proximity Select a topic… Similarity Simplicity Harmony Gestalt Principles Interpretations

9. Proximity The theory Elements that are located close together are seen to be a part of one group. In practice Use proximity as a tool to show elements of visual that are meant to be seen as a group as well as elements that are meant to be seen as separate. Example Consider the navigation pane to the left. The principles being addressed have been placed close to each other, and a greater amount of space is used to separate links to other elements of the file. Home Introduction Bibliography Balance Continuation Closure Figure-Ground Focal Point Interpretations Good Form Select a topic… Similarity Simplicity Harmony Gestalt Principles Proximity

10. Good Form The theory Design elements that are simple and well balanced to create visual information that is well accepted by the viewer. In practice Elements should be designed in an elegant manner so that they adhere to the laws if simplicity and balance. This makes information straightforward for the viewer. Example The Intel logo is a good example of good form. Home Introduction Bibliography Balance Continuation Closure Figure-Ground Focal Point Interpretations Proximity Select a topic… Similarity Simplicity Harmony Gestalt Principles Good Form

11. Similarity The theory Elements that are similar can be grouped together to further understand and examine the information presented. In practice Use similar elements to group items as well as using elements that are different to show that they are clearly different components of presented information. Example Using similar colours for the same information allows the viewer to distinguish between information to see a tree. XXXXXXX X XXXXXXX XXXXXX XXX XXXXXX XXXXX XXXXX XXXXX XXXXXX XXX XXXXXX XXXXX XXXXX XXXXX XXXX XXXXXXX XXXX XXX XXXXXXXXX XXX XXXX XXXXXXX XXXX XXX XXXXXXXXX XXX XX XXXXXXXXXXX XX XXXXXX XXX XXXXXX XXXXXX XXX XXXXXX Home Introduction Bibliography Balance Continuation Closure Figure-Ground Focal Point Interpretations Good Form Proximity Select a topic… Simplicity Harmony Gestalt Principles Similarity

12. Simplicity The theory The human brain will make an unconscious effort to simplify visual information. Effective interfaces simplify the information for the viewer to allow the user to quickly and easily process information. In practice Limit the amount of elements and data in one viewing to allow the user to interpret the intended message. Example The following images show how unnecessary excess information causes the user difficulty interpreting the message. (Chang, D, Dooley, L and Tuovinen, J, 2002, p3) Home Introduction Bibliography Balance Continuation Closure Figure-Ground Focal Point Interpretations Good Form Proximity Select a topic… Similarity Harmony Gestalt Principles Simplicity

13. Harmony The theory Elements in a visual representation of data should all look like thy belong together as a part of one whole visual representation. In practice Use elements that have some links to ensure a consistency through the information that implies a link between the information. Example Information in this interface is harmonious. Consistent shapes and their locations show a clear link between information. Navigational buttons are the same colour as the related information panel. Home Introduction Bibliography Balance Continuation Closure Figure-Ground Focal Point Interpretations Good Form Proximity Select a topic… Similarity Simplicity Gestalt Principles Harmony

14. Bibliography Chang, D, Dooley, L and Tuovinen, J (2002) Gestalt Theory in Visual Screen Design – A New Look at an Old Subject , Volume 26, Australian Computer Society Inc. Darlinghurst Australia Intel.com (2008) Learn About Processors http://www.intel.com/en_AP/Consumer/Learn/Processors/index.htm Accessed 28/10/08 Johnson, J (2008) GUI bloopers 2.0 [electronic resource] : common user interface design don't and dos , Morgan Kaufmann Publishers, Boston Saw, J (2000) 2D Design Notes http://daphne.palomar.edu/design/gestalt.html Accessed 10/08/08 Soegaard, M (2008) Gestalt Principles of Form Perception http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html Accessed 12/08/08 Twentyman, H (2005) NHS Visual Perception , Salisbury District Hospital, Salisbury, Wiltshire, http://www.salisbury.nhs.uk/informationforpatients/patientleaflets/occupationaltherapy/a4visualclosure.pdf Accessed 14/08/08 Home Introduction Balance Continuation Closure Figure-Ground Focal Point Interpretations Good Form Proximity Select a topic… Similarity Simplicity Harmony Gestalt Principles Bibliography