gestalt

An Instructional Guide toMultimedia and Interface

Design

Gestalt Theory

Katherine Meagher

2126849

An Instructional Guide toMultimedia and Interface

Design

Gestalt Theory

Katherine Meagher

2126849

HomeHome

Introduction

BibliographyBibliography

BalanceBalance

ContinuationContinuation

ClosureClosure

Figure-GroundFigure-Ground

Focal PointFocal Point

InterpretationsInterpretations

Good FormGood Form

ProximityProximity

Select a topic…

SimilaritySimilarity

SimplicitySimplicity

HarmonyHarmony

Gestalt Principles

Balance

The theoryThe human brain perceives information to be incomplete if it is not

balanced or symmetrical.

In practiceDesign interfaces that have an even balance of elements on the

screen.

Example

Balance

The theoryThe human brain perceives information to be incomplete if it is not

balanced or symmetrical.

In practiceDesign interfaces that have an even balance of elements on the

screen.

Example

BalancedUnbalanced

HomeHome

IntroductionIntroduction


Balance


ClosureClosure




Good FormGood Form

ProximityProximity

Select a topic…



HarmonyHarmony

Gestalt Principles

Continuation

The theoryWhen people view images, their eyes will follow an obvious path or

flow of information.

In practicePeoples’ natural instinct to follow obvious paths of information can

be used to direct their gaze to the appropriate information.

Example

Continuation

The theoryWhen people view images, their eyes will follow an obvious path or

flow of information.

In practicePeoples’ natural instinct to follow obvious paths of information can

be used to direct their gaze to the appropriate information.

Example

HomeHome



BalanceBalance

Continuation

ClosureClosure




Good FormGood Form

ProximityProximity

Select a topic…



HarmonyHarmony

Gestalt Principles

Closure

The theoryThe human brain prefers to view and interpret full and complete visual data. Viewing incomplete data causes disturbance to the

viewer.

In practiceUse incomplete (open) visual data only where drawing attention to

the information is the aim.

ExampleText that is open is harder to read and requires greater

attention and focus to comprehend the information presented.

Closure

The theoryThe human brain prefers to view and interpret full and complete visual data. Viewing incomplete data causes disturbance to the

viewer.

In practiceUse incomplete (open) visual data only where drawing attention to

the information is the aim.

ExampleText that is open is harder to read and requires greater

attention and focus to comprehend the information presented.

HomeHome



BalanceBalance


Closure




Good FormGood Form

ProximityProximity

Select a topic…



HarmonyHarmony

Gestalt Principles

Figure-Ground

The theoryTones 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 practiceUse appropriate colours and tones to ensure that the visual information presented is perceived in the manner intended.

ExampleThe same image in different tones can change perception.

(Chang, D, Dooley, L and Tuovinen, J, 2002, p2)

Figure-Ground

The theoryTones 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 practiceUse appropriate colours and tones to ensure that the visual information presented is perceived in the manner intended.

ExampleThe same image in different tones can change perception.

(Chang, D, Dooley, L and Tuovinen, J, 2002, p2)

HomeHome



BalanceBalance


ClosureClosure

Figure-Ground



Good FormGood Form

ProximityProximity

Select a topic…



HarmonyHarmony

Gestalt Principles

Focal Point

The theoryFocal 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 practiceFocal points can be created by making the intended point clearly

different from the other information being presented.

Example

20% OFF20% OFFall 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.

Focal Point

The theoryFocal 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 practiceFocal points can be created by making the intended point clearly

different from the other information being presented.

Example

20% OFF20% OFFall 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.

HomeHome



BalanceBalance


ClosureClosure


Focal Point


Good FormGood Form

ProximityProximity

Select a topic…



HarmonyHarmony

Gestalt Principles

Interpretations

The theoryIsomorphic correspondence is the terminology used to describe

things that are understood to have certain meanings due to cultural uses and understandings.

In practiceDesign interfaces that use standard cultural understandings where

appropriate.

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

Interpretations

The theoryIsomorphic correspondence is the terminology used to describe

things that are understood to have certain meanings due to cultural uses and understandings.

In practiceDesign interfaces that use standard cultural understandings where

appropriate.

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

XX

HomeHome



BalanceBalance


ClosureClosure



Interpretations

Good FormGood Form

ProximityProximity

Select a topic…



HarmonyHarmony

Gestalt Principles

Proximity

The theoryElements that are located close together are seen to be a part of

one group.

In practiceUse 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.

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

Proximity

The theoryElements that are located close together are seen to be a part of

one group.

In practiceUse 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.

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

HomeHome



BalanceBalance


ClosureClosure




Good FormGood Form

Proximity

Select a topic…



HarmonyHarmony

Gestalt Principles

Good Form

The theoryDesign elements that are simple and well balanced to create visual

information that is well accepted by the viewer.

In practiceElements 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.

ExampleThe Intel logo is a good example of good form.

Good Form

The theoryDesign elements that are simple and well balanced to create visual

information that is well accepted by the viewer.

In practiceElements 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.

ExampleThe Intel logo is a good example of good form.

HomeHome



BalanceBalance


ClosureClosure




Good Form

ProximityProximity

Select a topic…



HarmonyHarmony

Gestalt Principles

Similarity

The theoryElements that are similar can be grouped together to further

understand and examine the information presented.

In practiceUse similar elements to group items as well as using elements that are different to show that they are clearly different components of

presented information.

ExampleUsing similar colours for the same

information allows the viewer to distinguish between information to see a tree.

Similarity

The theoryElements that are similar can be grouped together to further

understand and examine the information presented.

In practiceUse similar elements to group items as well as using elements that are different to show that they are clearly different components of

presented information.

ExampleUsing similar colours for the same

information allows the viewer to distinguish between information to see a tree.

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

HomeHome



BalanceBalance


ClosureClosure




Good FormGood Form

ProximityProximity

Select a topic…

Similarity


HarmonyHarmony

Gestalt Principles

Simplicity

The theoryThe 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 practiceLimit the amount of elements and data in one viewing to allow the

user to interpret the intended message.

ExampleThe following images show how unnecessary excess information

causes the user difficulty interpreting the message.(Chang, D, Dooley, L and Tuovinen, J, 2002, p3)

Simplicity

The theoryThe 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 practiceLimit the amount of elements and data in one viewing to allow the

user to interpret the intended message.

ExampleThe following images show how unnecessary excess information

causes the user difficulty interpreting the message.(Chang, D, Dooley, L and Tuovinen, J, 2002, p3)

HomeHome



BalanceBalance


ClosureClosure




Good FormGood Form

ProximityProximity

Select a topic…


Simplicity

HarmonyHarmony

Gestalt Principles

Harmony

The theoryElements in a visual representation of data should all look like thy

belong together as a part of one whole visual representation.

In practiceUse elements that have some links to ensure a consistency through

the information that implies a link between the information.

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

Harmony

The theoryElements in a visual representation of data should all look like thy

belong together as a part of one whole visual representation.

In practiceUse elements that have some links to ensure a consistency through

the information that implies a link between the information.

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

HomeHome



BalanceBalance


ClosureClosure




Good FormGood Form

ProximityProximity

Select a topic…



Harmony

Gestalt Principles

BibliographyChang, 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

BibliographyChang, 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

HomeHome


Bibliography

BalanceBalance


ClosureClosure




Good FormGood Form

ProximityProximity

Select a topic…



HarmonyHarmony

Gestalt Principles

gestalt

Technology

good example of good

balance of elements

theory elements

visual information

practice elements

theory focal points

practice focal points

practice use proximity