Humanistic Virtues in Information Graphics
Aesthetic Experience and the Importance of Visual Composition in Information Design
When considering the design of information and information structures, the focus tends to gravitate to general issues of content, information hierarchies, and in some instances, system usability. In discussions concerning system usability and human factors, the issue of the user experience, or overall aesthetic experience, with regard to a specific information structure is rarely addressed. Things such as the "look and feel" of a website, for example, may get some attention by the designers and developers of the information structure, but the idea of "look and feel" is essentially an issue of how to "decorate" the information. Too often, when software developers or usability engineers discuss "look and feel," they do not consider it to be an integral part of the information design structure but an additive element applied only after the structure and content of the information have been resolved.
What seems to be lacking in information design is a concern for the visual composition of information (in a given space) as an integral component of the overall information structure. Additionally, the visual composition as it relates to a user's experience of that information seems to be neglected by many designers as an important factor in the usability of the information. I would like to suggest that experiencing information and information structures is as much aesthetic and in no way different than viewing a painting, experiencing a play, listening to a piece of music, or reading a poem. Information design requires the same devotion to the creation of visually pleasing compositions as any other form of communication.
The Relevance of the Aesthetic Experience
There is no difference between the kinds of information or "content"
being presented in an information structure. All content falls
into the basic model of communication discussed by Roman Jakobson
in his essay Closing Statement: Linguistics and Poetics. Jakobson's
theory consists of an addresser, a message, and an addressee (353).
If we use this model as a basis or foundation in painting, the
message of the painting may be a scene or a particular emotive
state. In music, the message may be a series of notes containing
a specific melody - whatever the content - the message itself
must be sent and received. As I have discussed in other essays,
the aesthetic experience is as much a part of the creation of
the message as it is part of the reception, or more precisely
the perception by the receiver, of the message. This suggests
that the message itself is an aesthetic object that can be interpreted
an infinite number of ways by an infinite variety of viewers,
listeners, or in the case of websites - users.
The early twentieth century philosopher, John Dewey, in his book Art as Experience, makes the distinction between incidents that can be experienced and incidents that can be composed into an experience (35). The experience of day to day living is continuous and does not always come to a logical or completely fulfilled conclusion. Thus a single memorable experience is one that comes to a close, is consummated, or fulfills itself to completion (35). Consummation as it relates to the aesthetic experience occurs when we experience a play, listen to music, navigate a website, or read a poem. There is a beginning and an end to these experiences and it is in this way that these experiences differ from the long string of experiences that make up our interpretation of reality. Playing a game, reading a book, or watching a movie are all a part of a class of experiences that can be easily defined as having a beginning and an end and it is the consummation of these experiences that helps define them aesthetic. Therefore everything that we experience as a complete event can be considered an aesthetic experience, and this suggests an ability to enrich the experience of information and structures of information.
The
Importance of Composition as an Aesthetic Device
Much of what will be discussed in this section is concerned with
the use of certain technologies in presenting and structuring
information and how to achieve the "aesthetic" through use of
visual design and composition. Specifically I will be addressing
the limitations apparent in web-site design, but will also address
the areas where usability and human factors engineering fail to
provide appropriate compositional and visual design considerations
with regard to information design.
Whether designing pages for websites, GUI's for software applications, or hierarchical information structures to display web-site metrics, usability experts rarely address the "visual composition" of the information on a page. When compositional considerations about the organization of this information are addressed, most usability "experts" are relying on a very cursory knowledge of the rules that govern the page layout of traditional books. Some of these rules include the belief that serif type is easier to read than sans serif type, that secondary information can be placed in the page margin, or that type aligned to the left is easier to read than justified type. However, GUI design often differs greatly from traditional book design, and requires many of the rules that govern traditional page layout to be violated. Even if this were not the case, book designers as a community are constantly evolving and challenging the rules and assumptions of their traditional form.
Grid
Systems
One of the major tools of organization in page layout design is
the grid system. A grid is a system of vertical and horizontal
lines that help organize and establish relationships between elements
in a structure that can provide consistency and guide the development
of visual hierarchies. The use of a grid is not restricted to
a series of lines that create a simple three-column layout. A
grid is a flexible system of organization that can consist of
vertical and horizontal lines as well as circular and diagonal
lines that provide a means of organization that guide information
hierarchies and promote flexibility and consistency between multiple
pages or screens within the same structure. Grid lines rarely
appear in the final implementation of a design and are typically
used as systems of alignment throughout the design process. They
are used most often as a means of laying out various print publications.
The information is structured in a way that allows easy access
of the main content while providing expectation for the content
on subsequent pages.
ABA
Form and Variations
The ABA form of organizing information allows for visual relationships
that are built on a framework of repetition and contrast (Carter,
Day, and Meggs 62-65). People familiar with musical composition
and theory - in particular jazz and blues composition - may recognize
the ABA form. The ABA form is utilized in musical composition
the same way as in visual composition - as a method of "advancing
our understanding" of the organizational structure of a piece
or composition (Carter, Day, Meggs 62).
The letters "A, B, A," represent a three part form, defined as
the statement (A), the departure (B), and the return (A). The
beginning and end components (A) function as the repetition in
the statement and the middle element (B) acts as the contrast
between the two (Carter, Day, Meggs 62).
This method of organization provides a viewer with a way of connecting
the elements within a composition and helps establish a framework
of expectations for the composition as a whole. However, just
as in music, the real benefit of this method of organization is
that it allows for variations in its own structure. This variation
can provide a visual composition with the same sense of spontaneity
or improvisation that can be achieved in a music, allowing the
viewer to be surprised and interested by the composition as it
breaks from its established patterns.
The
Rule of Thirds
Often used by photographers when searching for and defining visual
compositions, the rule of thirds suggests a method of organization
that helps define focal areas. By "focal areas," what I am suggesting
are areas in which a person's visual attention is focused and
feels comfortable. The rule of thirds suggests that when any two-dimensional
rectangular or square composition is divided into three sections,
both vertically and horizontally, that the four intersecting points
inside that rectangle are the points of optimal focus within the
particular composition. The following diagram more precisely illustrates
this concept: The rule of thirds is another method of providing
a framework for developing a visual composition. There are four
potential points of focus in a particular composition, but a hierarchy
is typically required to determine which of the areas is the most
important area for potential focus within a composition. This
rule is not only a good method for developing a composition but
also an effective way to measure the balance and stability of
an existing composition.
The
Use of Typography and Image in Visual Composition
Traditionally,
the printed word has been dominant and image and illustration
has been used to enhance the interpretation of the text. This
is still the case in many instances including the design of information
structures, but advances in technology and changes in communication
theories allow for an inverted relationship as well. Roland Barthes,
in his book Image Music Text, states the following:
Formerly, the image illustrated the text (made it clearer); today, the text loads the image, burdening it with a culture, a moral, an imagination (Meggs 41).
It is one of the responsibilities of an information designer to negotiate a relationship between type and image within a composition. This relationship should remain consistent throughout the composition while reinforcing the organization and hierarchical structures that have been established. Because of the tenuous relationship between text and image the negotiator of this space greatly effects the interpretive meaning of the information. The wrong text with a particular image, or the wrong image with a particular text can have disastrous consequences in the meaning and clarity of the information. Information designers must rely on various tools to control and negotiate the delicate balance between these potent compositional elements.
Juxtaposition
One of the compositional tools used by designers to negotiate
the relationship between text and image is the idea of juxtaposition.
Juxtaposition is the relationship between the placement of separate
elements in a visual composition (Meggs
45). For instance, text that overlaps an image can provide
a different interpretive meaning than text located on the opposite
side of a page composition.
Combination
The various ways in which type and image can be combined provide
information designers with another tool for negotiating the space
between the two elements. One of these methods of combination
is referred to as fusion (Meggs 55).
Fusion is the result of combining text and image into one complete
element. For instance, a word can become an image by manipulating
the letterforms in such a manner as to enhance the meaning through
figurative interpretation of the words:
Individual letters can be fused with images to enhance their interpretive meaning as well:
There are an infinite variety of possible negotiations between type and image and only a well-informed, thoughtful solution to a particular visual situation will provide a clear or precise interpretive meaning.
Gestalt
Theory in Visual Composition
No matter how the information or information structures are organized
in a composition, the main objective in designing the information
is to provide the user with an easily accessible, clearly structured,
and aesthetically pleasing presentation. This can only be achieved
through unity and consistency in the composition and structure
of the information. In his book Type & Image, Philip Meggs states:
The designer combines graphic materials-words, pictures, and other graphic elements-to construct a visual communications gestalt. This German word does not have a direct English translation. It means a configuration or structure with properties not derivable from the sum of its individual parts. The designer combines visual signs, symbols, and images into a visual-verbal gestalt that the audience can understand. The graphic designer is simultaneously message maker and form builder. This complex task involves forming an intricate communications message while building a cohesive composition that gains order and clarity from the relationships between the elements (1).
The primary task for the information designer is to give the composition of the information a whole or a gestalt not only on an individual page basis, but also throughout the entire information structure whether in the form of a book, a painting, a web-site, or a CD-ROM. The entirety of the information needs to be taken into account to provide the user with a whole, complete and aesthetic "experience" of the information.
Resources and Links
March 2001
Aesthetic Experience and the Importance of Visual Composition in Information Design
Carter, Rob, Ben Day and Philip B. Meggs. Typographic Design: Form and Communication, Van Nostrand Reinhold, New York, 1985.
Dewey, John. Art as Experience, 4, First Perigee Printing, 1980.
Jakobson, Roman. "Closing Statements: Linguistics and Poetics," Style in Language, Thomas A. Sebeok (ed.), M.I.T. Press, 1978.
Meggs, Philip B. Type & Image: The Language of Graphic Design, Van Nostrand Reinhold, New York, 1992.
Designing for Advanced Users
Planning a Web Project
Caernarven-Smith, Patricia. Audience Analysis & Rsponse. Pembroke, MA: Firman Technical Publications, 1983.
Field Methods Casebook for Software Design. eds. Dennis Wixon and Judith Ramey. New York, NY: Wiley Computer Publications, 1996.
Fleming, Jennifer. Web Navigation: Designing the User Experience. Sebastopol, CA: O'Reilly & Associates, Inc., 1998.
Nielson, Jakob. "Is Navigation Useful?". January 9, 2000. http://www.useit.com/alertbox/20000109.html.
Rosenfeld, Louis and Morville, Peter. Information Architecture for the World Wide Web. Sebastopol, CA: O'Reilly & Associates, Inc., 1998.
Streaming Media
Streaming Basics: Shooting Video for Streaming
by Tim Kennedy, January 12, 2001
Streaming Media World (online)
http://smw.internet.com/video/tutor/streambasics1/index.html
MPEG Informations, Questions and Answers
http://www.crs4.it/~luigi/MPEG/mpegfaq1.html
Webopedia
http://webopedia.internet.com
Tech PC Webopedia
http://thetech.pcwebopedia.com