Colorado
By Randy Fox | February 11, 2013
Visual Rhetoric: Gestalt Principles

In the last arti­cle, we exam­ined the ana­lyt­i­cal Moore and Fitz (1993), who are tech­ni­cal com­mu­ni­ca­tor schol­ars spe­cial­iz­ing in visual design, and explained the impor­tance of Gestalt in Using Gestalt Theory to Teach Document Design and Graphics. Moore and Fitz (1993) quote Max Werheimer, a psy­chol­o­gist and one of the devel­op­ers of the Gestalt the­ory: “they believe peo­ple per­ceive a struc­ture of com­po­nents that they treat as a whole (p.392).” Have you ever won­dered why a doc­u­ment per­ceives to be orga­nized and invit­ing to read while oth­ers appear chaotic or messy and dif­fi­cult to fol­low? According to Moore and Fitz (1993), “Gestalt the­ory tries to under­stand how view­ers per­ceive wholes in groups of indi­vid­ual ele­ments (p. 392).” Gestalt was not intended as a tool of per­sua­sion, but rather descrip­tive; a means to per­ceive “struc­tures and pat­terns (p. 392).” However, the prin­ci­ples of Gestalt may also be used as rhetor­i­cal tools to influ­ence the way a viewer reads a doc­u­ment. The key prin­ci­ples are: figure-ground, sym­me­try, clo­sure, prox­im­ity, good con­tin­u­a­tion and similarity.

Figure-Ground Segregation is the visual sep­a­ra­tion of fore­ground and back­ground. This prin­ci­ple can be applied to form clar­ity and empha­sis in a doc­u­ment as well as to instill hier­ar­chy by direct­ing a viewer where to begin. Design ele­ments such as typog­ra­phy, color, images, or shapes that stand out from the back­ground are more notice­able and can help lead the viewer through the document.

Similarity occurs when ele­ments on a page have a sim­i­lar appear­ance such as size, shape, color or value. They are there­fore per­ceived as groups, or ref­er­enced with sim­i­lar ideas and sub­ject mat­ter. One exam­ple is the use of text; head­lines that are treated the same by using type size, font, and style can cre­ate con­sis­tency and give clues as to how infor­ma­tion is laid out in a doc­u­ment. Similarity can estab­lish clar­ity and con­cise­ness, there­fore mak­ing the doc­u­ment a pleas­ant read­ing expe­ri­ence for the viewer.

Proximity refers to the arrange­ment of ele­ments on a page. The per­cep­tion of the doc­u­ment, whether orga­nized or chaotic, can be con­trolled by the prox­im­ity of text and graph­ics. When sev­eral items are on a page, it is impor­tant for the reader to under­stand which text belongs to what image, or which head­line belongs to what body copy. Captions refer­ring to spe­cific images, for exam­ple, should be viewed as one unit so as not to con­fuse the reader. If the doc­u­ment presents an unpleas­ant read­ing expe­ri­ence the mes­sage will be lost, mak­ing the doc­u­ment ineffective.

Good Continuation can be a path or con­tin­u­ous line direct­ing the eye beyond a visual area, allow­ing the viewer to fill in the gaps in their own minds. In terms of doc­u­ment design, good con­tin­u­a­tion may be demon­strated with the use of grids, typog­ra­phy, color or graph­ics. For exam­ple, a web­site designed with the same menu bar at the top of every page (the “Home” but­ton, for instance) located in the same place from page to page cre­ates good con­tin­u­a­tion, there­fore inspir­ing con­fi­dence for the viewer to know where to look.

Closure is about “draw­ing con­clu­sions,” accord­ing to Andy Rutledge, author of Design + View web­site. He explains, “When pre­sented with less than the full pic­ture, we attempt to employ the prin­ci­ple of clo­sure to fill in miss­ing infor­ma­tion and form a com­plete image or idea based on com­mon or eas­ily rec­og­niz­able pat­terns from our past expe­ri­ence and under­stand­ing.” He con­tin­ues to explain that intu­ition and past expe­ri­ence allow us to rec­og­nize incom­plete shapes. For exam­ple, a rec­tan­gle miss­ing a cor­ner will still be per­ceived as a rec­tan­gle. In doc­u­ment design, clo­sure can be implied with neg­a­tive space to com­plete or seg­re­gate an idea or topic. Columns of text, for instance, formed by the sur­round­ing white space allow the reader to view the text ver­ti­cally opposed to hor­i­zon­tally, thereby rein­forc­ing the direc­tion or hier­ar­chy of information.

Symmetry is often referred to as bal­ance, mean­ing the equal dis­tri­b­u­tion of objects divided by a cen­tral point of axis. In regards to doc­u­ment design, sym­me­try cre­ates the per­cep­tion of sta­bil­ity, struc­ture and con­sis­tency, which adds to the tone and ethos of a doc­u­ment. Moore and Fritz (1993), among oth­ers, believe that an asym­met­ri­cal design of a doc­u­ment will con­fuse read­ers and make them feel uneasy and lost (p.391). Gary Bastoky (2010), a user expe­ri­ence designer, argues that sym­me­try and bal­ance are not the same and that bal­ance can be achieved sym­met­ri­cally or asym­met­ri­cally. He believes that sym­me­try can some­times make a doc­u­ment look stale or bor­ing, where asym­me­try adds a more dynamic view­ing expe­ri­ence. According to Bastoky, “Asymmetrical lay­outs can achieve equi­lib­rium as well, but their tenser, more dra­matic form of bal­ance depends on care­ful manip­u­la­tion to com­pen­sate visu­ally for dif­fer­ences in the size, posi­tion, and value of major ele­ments (2010).” Creating an effec­tive asym­met­ri­cal doc­u­ment is a more dif­fi­cult approach, but it may add to the aes­thetic value. Either way, the rhetor­i­cal sit­u­a­tion should direct the design decision.

Consider a few of gestalt prin­ci­ples demon­strated in the Yahoo! Travel web­site (pic­tured above):

Figure-ground seg­re­ga­tion is demon­strated by the large photo of Jerusalem set against the cloud photo in the back­ground. Good con­tin­u­a­tion is estab­lished with the yel­low box con­tain­ing “Find your price.” The box is designed with rounded cor­ners at the top and not on the bot­tom lead­ing you to believe there is more infor­ma­tion to be accessed within this space. Similarity is demon­strated by the design of the items in the top menu bar, as well as the tabs in the yel­low box. A con­sis­tent design of these ele­ments adds to the clar­ity and orga­ni­za­tion to the doc­u­ment. The prox­im­ity of the text “Jerusalem, Israel” cre­ates a rela­tion­ship to the small map in the lower right cor­ner of the page.

 

Conclusion

Being sur­rounded by mass media on a daily basis, visual com­mu­ni­ca­tors are respon­si­ble for obtain­ing the nec­es­sary resources and skills to com­pose and ana­lyze effec­tive visual mes­sages. This series of arti­cles intro­duced an under­stand­ing of visual rhetoric by explor­ing the rhetor­i­cal use of visu­als and visual argu­ments, as well as design tools for visual analy­sis. As we learned, visual rhetoric refers to per­sua­sive mes­sages using visual lan­guage. It is crit­i­cal for visual com­mu­ni­ca­tors to obtain the nec­es­sary skills and design tools to com­pose and ana­lyze visual mes­sages effec­tively. This can be accom­plished by the use of text, images, and lay­out while con­sid­er­ing the six visual cog­nates and gestalt principles.

The six visual cog­nates are: arrange­ment, empha­sis, clar­ity, con­cise­ness, tone and ethos. They are a means to con­sider the rhetor­i­cal sit­u­a­tion of a doc­u­ment, ensur­ing that the mes­sage is com­mu­ni­cated cor­rectly and directly to the tar­get audience.

The Gestalt prin­ci­ples are: figure-ground, sym­me­try, clo­sure, prox­im­ity, good con­tin­u­a­tion and sim­i­lar­ity. They offer a vocab­u­lary for effec­tive dis­course in visual analy­sis as well as pro­vide a set of design tools to com­pose visual messages.

 

We are inun­dated with visual mes­sages every­day via tele­vi­sion com­mer­cials, bill­boards, mag­a­zines, and surf­ing the Internet, just to name a few. We are also chal­lenged by rapid advance­ments in tech­nol­ogy, par­tic­u­larly smart­phones and tablet com­put­ers such as the iPad, allow­ing every­one to access visual infor­ma­tion at the touch of a fin­ger. Visual com­mu­ni­ca­tors are respon­si­ble for the design of such arti­facts includ­ing posters, adver­tise­ments, annu­als reports, Apps, and info­graph­ics. Understanding visual rhetoric, what makes a visual argu­ment, and what a rhetor­i­cal sit­u­a­tion con­sists of, visual com­mu­ni­ca­tors have addi­tional resources and skills to ana­lyze and eval­u­ate effec­tive design. As visual com­mu­ni­ca­tors, we are also respon­si­ble for obtain­ing the nec­es­sary resources and skills to com­pose and ana­lyze effec­tive visual messages.

COMMENTS
COMMENTS
AIGA encourages thoughtful, responsible discourse. Please add comments judiciously, and refrain from maligning any individual, institution or body of work. Read our policy on commenting.
  • http://www.mmcmahondesign.com/ Mike M

    A very thought pro­vok­ing arti­cle.  I think as we all go about our days we can some­times for­get to activly remen­ber these prin­ci­ples that help us in our design process.  Thank you! 

LOADING...
Whoops! The oldest version of IE this site supports is IE8. Please upgrade your browser and come visit again!