También disponible en Español


The digital magazine of InfoVis.net

Gestalt and Visual Momentum.
by Juan C. Dürsteler [message nº 19]

Last week we spoke about the importance of using text and images in an appropriate way. In order for the communication to be more effective, the connection between them has to become evident. What is known about this matter is still at an early stage. Hence, the resource of common sense continues to be a powerful tool. Nevertheless there's a set of findings related to psychology that have proven to be useful.

Following again the book of Colin Ware (see the previous article) we should differentiate between static and dynamic links, depending on if the images are static or animations.

Static Links

When making the link between text and still images, the principles of perception organisation of the Gestalt school of psychology can be helpful:

Proximity: Close objects are perceived as grouped together. This is the typical case of the legend below, above or to the side of a figure.

The enclosed figure appears to have 2 groups of 2 columns of triangles instead of 4 columns or four rows of triangles.

Similarity. The elements that share similar features, like shape, colour, orientation, size or texture are perceived as grouped together.

The inverted triangles are perceived typically as a column and the red triangles as a row.

Continuity or connection. It's more probable that we build the perception of a visual entity from elements that are continuous and show smooth transitions or that are connected somehow. A straight line (for example an arrow) that relates an image and its text.

The figure is perceived like a wavy X instead of four curves joining at one point.

Symmetry. If the elements of a figure have a symmetric shape, we tend to perceive the symmetric set as a whole, instead of seeing its constituting parts.

Typically we perceive  2 overlapped squares instead of two symmetrical figures in touch by their corners.

Closure. We tend to see completed or closed figures from contours, even when they are incomplete or open. An example of this is the speech balloon of the comic stripes. In it a closed contour envelopes the text and points to the character that is speaking.

You can perceive a pentagon, a square, a circle and an ellipse although none of them is actually there.  

Relative Size or Area. The smaller components of a figure or pattern tend to be perceived as objects while the biggest are perceived as background 

The octagon is perceived as the object.

Some of the more used principles are Proximity, Continuity and Closure

Dynamic links.

Animation and multimedia systems allow the connection between moving images and written or spoken text. In this case the linking strategy can become very complex.

Among the different concepts that can be used to link images and text the most appealing is that of Visual Momentum.

This concept arises from the work of Hochberg and Brooks* in 1978 when they studied the way in which different shots are linked in cinematography. The basic idea is that when people look at a static image, once the most important traits of it are captured, the attention diminishes quickly. Continuously changing the shots in a film, allows you to add perspective and supplementary information to the narrative by approaching the scene from different angles.

Somehow each shot brings up some visual queries and answers others. As soon as we have obtained some answers we have to change the shot in order to keep the attention of the public. The important thing is maintaining the Visual Momentum without losing coherence. The movie star can't have a different hairstyle in each shot of the same scene.

Translated to information visualisation this means presenting different views of the information that enhance understanding by showing it from different standpoints. Hochberg himself concludes that the most effective detailed views come after showing a general view. Showing the views in the opposite order is far less effective.

Diving into a web site, for example, exposes us to different shots of the information it contains. Hence, the design of the user interface has to maintain the visual momentum. In any case it's important to:

  • Maintain coherence. The girl's hairstyle or the style of a web site.
  • Avoid non-smooth transitions in order to maintain the context.
  • Keep the objects that act as visual references in order for the people to locate themselves. The links to the home page or the navigation bar in a web site, for example.
  • Present the general information first and then the detailed views. For example the radar map that indicates the player's position in some interactive games.

Design is a mixture of Art and Science. For this reason a multidisciplinary approach to the different scientific fields that shed some light on Information Visualisation is indispensable in order to feed the art and the talent that lies behind good design.

*Hochberg, J y Brooks, V, Film Cutting and Visual Momentum en "Eye movements and the Higher Psychological Functions", Wiley, NY, 1978

Links of this issue:

© Copyright InfoVis.net 2000-2014