VisualPerception and thePrinciplesof GestaltVisualPerception and thePrinciplesof GestaltSteven BradleyVisual Perception & the Principles of Gestalt 4 Visual Perception & the Principles of Gestalt 5In1910,psychologistMaxWert-heimerhadaninsightwhenhe observed a series of lights flashing on and off at a railroad crossing. It was similar to how the lights encir-cling a movie theater marquee flash on and off.To the observer, it appears as if a singlelightmovesaroundthemar-quee,travelingfrombulbtobulb, when in reality its a series of bulbs turning on and off and the lights dont move it all.Thisobservationledtoasetof descriptiveprinciplesabouthow we visually perceive objects. These principlessitattheheartofnear-lyeverythingwedographically as designers.Visual Perception & the Principles of Gestalt Visual Perception & the Principles of Gestalt 7 6The quote above is gestalt in a nut-shell.Whenhumanbeingsseea group of objects, we perceive their entirety before we see the individual objects. We see the whole as more than the sum of the parts, and even when the parts are entirely separate entities, well look to group them as some whole.The Key IdeasBehind Gestalt TheoryThe whole is other than the sum of the parts. Kurt KoffkaVisual Perception & the Principles of Gestalt Visual Perception & the Principles of Gestalt 9 8Reification(our mind fills in the gaps)Reificationisanaspectofpercep-tion in which the object as perceived containsmorespatialinformation than what is actually present. As we attempt to match what we see to the familiarpatternswehavestoredin memory, there isnt always an exact match. Instead we find a near match and then fill in the gaps of what we think we should see.Reification suggests that we dont need to present the complete outline in order of viewers to see it. We can leave out parts of the outline as long as we provide enough of it to allow foracloseenoughpatternmatch. Youcanseeexamplesofthisalit-tle further down under the principle of closure.Multi-stability(the mind seeks to avoid uncertainty) Multi-stabilityisthetendencyof ambiguousperceptualexperienc-es to move unstably back and forth between alternative interpretations. Someobjectscanbeperceivedin more than one way. An example from below in the section of figure/ground is one youve likely seen before. The image can be seen as either two fac-es in profile or as a vase.You cant see both at once. Instead youbouncebackandforthquickly between the two stable alternatives. Onewilltendtobeyourdominant perceptionandthelongeryougo without begin able to see the other, the harder it will be to see that other perception.Fromadesignperspectiveifyou want to change someones percep-tion, dont try to change it all at once. Findawaytogetthemtoseean alternative. Then work to strengthen that alternative view, while weaken-ing the original.Invariance (were good at recognizing similarities and differences)Invarianceisapropertyofpercep-tioninwhichsimpleobjectsare recognizedindependentoftheir rotation, translation and scale. Since weoftenencounterobjectsfrom different perspectives, weve devel-opedanabilitytorecognizethem despitetheirdifferentappearance. Imagine if you could only recognize someoneyouknewiftheystood directly in front of you and faced you, butyoucouldntrecognizethem once they turned in profile. Despite thedifferentvisualperspectivewe can still recognize people.Emergence (the whole is identified before the parts)Emergence is the process of form-ingcomplexpatternsfromsimple rules. When attempting to identify an object, we first seek to identify its out-line. We then match this outline pat-tern against shapes and objects we already know to find a match. Only after the whole emerges through this outline pattern matching, do we start toidentifythepartsthatmakeup the whole.Whendesigning,keepinmind thatpeoplewillidentifyelements first by their general form. A simple well defined object will communicate more quickly than a detailed object with a hard to recognize contour.There are several key ideas behind gestalt:Visual Perception & the Principles of Gestalt 10Youcanseetheseideasinplayin the principles below. The main idea isthatgestaltprinciplesareabout perception and what is visually com-municated by objects. The principles speak to the core of the visual lan-guage within which we work.Visual Perception & the Principles of Gestalt Visual Perception & the Principles of Gestalt 13 12Most of the principles are relatively easy to understand. Theres a com-monthemerunningthroughmany of them.Many of the principles below will fol-low this pattern. The principles either defineXorthehigherorderthats perceived.Gestalt PrinciplesAll else being equal, elements that are related by X tend to be grouped perceptually into higher-order units. Stephen PalmerVisual Perception & the Principles of Gestalt Visual Perception & the Principles of Gestalt 15 14Law ofPrgnanz(Good Figure, Law of Simplicity)People will perceive and interpret ambiguous or complex images as the simplest form(s) possible.This is the fundamental principle of gestalt.Wepreferthingsthatare simple, clear and ordered. Instinctu-ally these things are safer. They take less time for us to process and pres-ent less dangerous surprisesWhenconfrontedwithcomplex shapes, we tend to reorganize them intosimplercomponentsorintoa simpler whole. In the images to the left,youremorelikelytoseethe image composed of the simple coco-nut, pineapple and pear than as the the complex and ambiguous shape the whole forms above it.In this case, seeing three distinct objectsissimplerthanseeingone complex object. In other cases, its simpler to see a single object, which brings us toVisual Perception & the Principles of Gestalt Visual Perception & the Principles of Gestalt 17 16AswithPrgnanz,closureseeks simplicity.Closureistheopposite ofwhatwesawinthePrgnanz imageabovewherethreeobjects weresimplerthanone.Withclo-sure,weinsteadcombinepartsto form a simpler whole. Our eye fills in the missing information to form the complete figure.In the image to the left, you should see a white triangle even though the image is actually comprised of three Pac-Man-like shaped pineapple slic-es.Seeingthetriangleissimpler than trying to make sense of the indi-vidual parts.Closure can be thought of as the glue holding elements together. Its aboutthe human tendency to seek andfind patterns.Thekeytoclosureisproviding enoughinformationsotheeyecan fill in the rest. If too much is missing, the elements will be seen as sepa-rate parts instead of a whole. If too much information is provided, theres no need for closureto occur.ClosureWhen seeing a complex arrangement of elements, we tend to look for a single, recognizable pattern.Visual Perception & the Principles of Gestalt 19 18Symmetrygivesusafeelingof solidityandorder,whichwetend toseek.Itsournaturetoimpose order on chaos. This principle leads us to want balance in composition, though our compositions dont need tobeperfectlysymmetricaltobe in balance.Inthebananasontheright,you shouldseethreepairsofopening and closing brackets. The principle of proximity, which well get to later in this post, might suggest we should see something else. That suggests symmetrytakesprecedenceover proximity.Sinceoureyeswillquicklyfind symmetry and order, these principles can be used to effectively communi-cate information quickly.Symmetryand OrderPeople tend to perceive objects as symmetrical shapes that form around their center.Visual Perception & the Principles of Gestalt Visual Perception & the Principles of Gestalt 21 20Figure/ground refers to the relation-ship between positive elements and negative space. The idea is that the eye will separate whole figures from their background in order to under-stand whats being seen. Its one of the first things people will do when looking at any composition.The figure/ground relationship can be either stable or unstable depend-ingonhoweasyitistodetermine which is which. An example of where therelationshipisunstableisthe image to the left. You either see an appleortwofacesdependingon whetheryouseetheappleasfig-ure and the white as ground, or vice versa.Thatyoucaneasilybounce back and forth between the two per-ceptions demonstrates the unstable relationship.The more stable the relationship, the better we can lead our audience to focus on what we want them to see. Two related principles can help us: AreaThe smaller of two overlaping objects is seen as figure. The larger is seen as ground. Convexity Convex rather than concave patterns tend to be perceived as figures.Figure/GroundElements are perceived as either figure (the elementin focus) or ground (the background on which the figure rests).Visual Perception & the Principles of Gestalt Visual Perception & the Principles of Gestalt 23 22UniformConnectednessElements that are visually connected are perceived as more related than elements with no connection.In the image to the right, a vine con-nects all the grapes. This connection leadsustoperceivethatthecon-nected elements are related to each other in some way.Ofalltheprinciplessuggesting objectsarerelated,uniformcon-nectednessisthestrongest.Even if the elements are visually different, they will still appear strongly related because they are visually connected.Linesdontneedtotouchthe elementsfortheconnectionto be perceived.Visual Perception & the Principles of Gestalt 24 Visual Perception & the Principles of Gestalt 25CommonRegionsElements are perceived as part of a group if they are located within the same closed region.Another way to show a connection between elements is to enclose them insomeway.Everythinginsidethe enclosure is seen as related. Every-thing outside the encloser is seen as separate. The apples in the image to theleftaresimilar,yetweseetwo distinctgroups,withtheapplesin each enclosure related in some way.The typical way to show a common region is to draw a box around the relatedelements.Placingtheele-ments on a different background col-or than their immediate surroundings will also work.Visual Perception & the Principles of Gestalt 27 26ProximityObjects that are closer together are perceived as more related than objects that are further apart.Proximityissimilartocommon regions but uses space as the enclo-sure. When elements are positioned close to one another, they are seen as part of a group rather than as indi-vidualelements.Thisisespecially true when the elements in the group are closer to each other than they are to any elements outside the group.The objects dont need to be sim-ilarinanyotherwaybeyondbeing grouped near each other in space in order to be seen as having a proxim-ity relationship.Visual Perception & the Principles of Gestalt Visual Perception & the Principles of Gestalt 29 28ContinuationElements arranged on a line or curve are perceived as more related than elements not on the line or curve.Its instinct to follow a river, a path or a fence line. Once you look or move in a particular direction, you continue to look or move in that direction until you see something significant or you determine theres nothing significant to see.Anotherinterpretationofthis principleisthatwellcontinueour perceptionofshapesbeyondtheir ending points. Lines can be curved segments or distinct lines that meet atasinglepoint(asseeninthe blueberries).Visual Perception & the Principles of Gestalt Visual Perception & the Principles of Gestalt 31 30Common Fate(Synchrony)Elements that move in the same direction are perceived as more related than elements that are stationary or that move in different directions.Regardless of how far apart the ele-ments are placed or how dissimilar they appear, if they are seen as mov-ing or changing together, theyll be perceived as being related.Theelementsdontneedtobe moving for the principle of common fate to be present. Its more that they are seen as having a common des-tination. For example, if four people are clustered together, but two are observed heading toward the right, they will be seen as having a com-mon fate. Even if two are only look-ing in the same direction, theyll be perceived as having a common fateIn the image to the left, the arrows areenoughtoindicatethatthe cherries share a common fate. While movement or change isnt necessary, both are still a stronger indication of common fate than things like arrows orlookinginthesamedirection which only imply movement.Visual Perception & the Principles of Gestalt 32ParallelismElements that are parallel to each otherare seen as more related than elements not parallel to each other.This principle is similar to the com-monfateprincipleabove.Lines are often interpreted as pointing or movinginsomedirection.Parallel lines are seen as either pointing or moving in the same direction and are thus related.Itshouldbenotedthatforparal-lelism to be perceived, the lines can alsobecurvesorshapes,though with the latter the shapes should be somewhat line-like in order for them to appear parallel.Visual Perception & the Principles of Gestalt 35SimilarityElements that share similar characteristics are perceived as more related than elements that dont share those characteristics.Anynumberofcharacteristicscan be similar: color, shape, size, texture, etc. When a viewer sees these simi-lar characteristics, they perceive the elements as being related due to the shared characteristics.In the image to the left, red straw-berriesareseenasrelatedtothe otherredstrawberriesandgreen kiwi slices to green kiwi slices due to the similarity in type of fruit and color. An obvious place to find similarity online is in the color of links. Typical-ly, links within content will be styled the same way, often blue and under-lined. This lets the viewer know that the different pieces of text are relat-ed. Once one is discovered to be a link, it communicates the others are also links.Visual Perception & the Principles of Gestalt Visual Perception & the Principles of Gestalt 37 36Focal PointsElements with a point of interest, emphasis or difference will capture and hold the viewers attention.This principle suggests that our atten-tion will be drawn toward contrast, toward the element that is unlike the others in some way. In the image to the right, your eye should be drawn to the raspberry. Its a different fruit and color from the blackberries.Theprincipleoffocalpointslike-ly arises out of our need to quickly identifytheunknowntoalertusto potential danger.Theprinciplesofsimilarityand focalpointsareconnected,and focalpointscantbeseenwithout thepresenceofsimilarityamong other elements.Visual Perception & the Principles of Gestalt Visual Perception & the Principles of Gestalt 39 38PastExperiencesElements tend to be perceived according to an observers past experience.Pastexperienceisperhapsthe weakest gestalt principle. In conjunc-tion with any of the other principles, the other principle will dominate over the past experience principle.Pastexperienceisuniquetothe individual,soitsdifficulttomake assumptions about how it will be per-ceived. However, there are common experiences we all share. For exam-ple, a lot of color meaning arises out of past experience.Having seen traffic lights through-out our lives, we expect red to mean stopandgreentomeango.You probably see the fruit to the left as a traffic light, because of the three common colors. Thats past experi-ence at work.Many of our common experiences also tend to be cultural. Color again providesexamples.Insomecoun-tries, white is seen as pure and inno-cent and black as evil and death. In other countries, these interpretations are reversed. Conventions can arise whentheexperienceiscommonly shared, though again its important to remember that we dont all share the same experiences.Visual Perception & the Principles of Gestalt 40SummaryWhen seeing a complex arrangement of elements, we tend to look for a single, recognizable pattern.Gestaltprinciplesareimportantto understand. They sit at the founda-tion of everything we do visually as designers. They describe how every-one visually perceives objectsTheprinciplesaboveshouldbe relativelyeasytounderstand.For most of them, the definition and the imageareprobablyallyouneeded tounderstandtheprinciple.Atthe same time, understanding the basic ideasoftheseprinciplesisntthe sameasunderstandinghowthey influence design.