Figure 2: Figure/ground contrast levels affect legibility.

Figure/ground is the indispensable gestalt principle of perception that helps to identify objects (figure) as distinct from their background (ground). This principle relies heavily upon contrast, since images and text must be clearly visible to be understood. One example of the use of the theory of figure/ground is this text itself. These words are legible because the figure (text) is visible when set against the contrast of the ground (page background). Varying degrees of contrast between the figure and the ground can detract from or enhance legibility (see Figure 2). This basic application of figure/ground holds true in print documents as well as in interactive documents.

In interactive media designs like websites, applications of the figure/ground principle of perception are apparent in text or image rollovers. For example, when a user’s mouse hovers over a text link, the link generally alters in some way or changes colors (see Figure 3). Alterations in the figure/ground relationship provide helpful feedback to the user by visually informing them that an action will take place when the link is clicked. For this feedback to exist, however, the links must present a ?gure/ground relationship in strict accordance to the gestalt principle in several different states, with the normal and the hover states being the most beneficial.

Figure 3: An example of the principle of figure/ground in relation to interactive text links.

Figure 4 exhibits an image of a webpage with poorly contrasting links in both the normal state (top image) and the hover state (bottom image). The color of each link is too similar to the color of the background, making it difficult for the user to readily distinguish the text as a link. The links in Figure 5 portray figure/ground principles as determined in the Gestalt theory in both the normal (top image) and hover states (bottom image), making it much more legible and that much more effective. Understanding and properly implementing the gestalt principle of figure/ground relationships allows a web designer to enhance the visibility of the links, and therefore strengthen communication.

There are numerous opportunities to execute successful figure/ground relationships in web navigation since links most often have more than one state (such as normal, hover, down, and active). Additionally, some of these states may launch an animation or other function. In order to ensure user understanding, the figure/ground relationship should be examined for each state, along with the animation or function associated with it.

Figure 4: In this webpage, the links in both the normal state (top) and the hover state (bottom) lack contrast from the background, and show poor figure/ground relationships.

Figure 5: Increasing the contrast of the links in both the normal state (top) and the hover state (bottom) improves legibility and informs the user through color change that the links are active.

Some web designers include hidden links, or “Easter eggs”, to provide mystery, intrigue, and additional content for regular or intuitive visitors. Such hidden links also apply guidelines of gestalt figure/ground relationships by deliberately minimizing contrast between the figure and the ground. This use of the figure/ground relationship to hide or confuse creates a form of camouflage.

References

1. Graham, L., “Gestalt Theory in Interactive Media Design”, Journal of Humanities and Social Sciences, 2, (2008).
2. Graham, L., “Gestalt Theory, Experience Design, and the Sustainable Healing Garden”.

Summary

Three German psychologists, Max Wertheimer, Kurt Koffka, and Wolfgang Kohler, originally developed the scientific Gestalt psychology in 1910. Beginning in the twentieth century, people began to realize the strong connections between art and science and applied gestalt to design. It was common for visual artists and designers to adopt elements of gestalt perceptual theories to augment their work. In addition, scholars and designers embraced the concepts of perceptual organization and introduced concepts of gestalt visual principals to design education. Gestalt psychology could be argued as the beginning of a new way of thinking: of combining the technical with the artistic.

However, gestalt scholars and researchers did not anticipate the rapid evolutions of design mediums, and theories were not fleshed out for interactive documents. It was difficult to apply a combination of art and science to another… combination of art and science.

The rapid influx of technological advances in regards to the World Wide Web made the Internet a haphazardly designed medium, where technology and design were split. The Internet requires a combination of classical and romantic perceptions, of left- and right-brained thinkers, and of programmers and designers. It is this coalescence of technology and design that gestalt rationale has just begun to be applied to. This research paper investigates the major principles of gestalt perceptual theories in relation to a field where these two realms of thought are married: interactive design.

Introduction to Gestalt Theory

Gestalt, (pronounced “geh-shtalt”), is a German word that loosely translates to “configuration”. German psychologists completed most of the initial research supporting the Gestalt theory in the late 1800s and the early 1900s. Gestalt theory originated as a component of the field of psychology, but has affected the way that researchers look at many other disciplines, including linguistics, musicology, architectural healthcare design, instructional design, design, human-computer interaction, and artistic and visual communication. Visual designers embraced gestalt principles because they explained, in the constructs of the scientific method, human tendencies to organize items, as well as the nuances of perception. Specifically, Wertheimer’s research analyzed why some images appear to belong together as group while others appear to be separated. Wertheimer described the Gestalt Theory as follows:

“The fundamental “formula” of Gestalt theory might be expressed in this way: There are wholes, the behavior of which is not determined by that of their individual elements, but where the part-processes are themselves determined by the intrinsic nature of the whole. It is the hope of Gestalt theory to determine the nature of such wholes.”

Gestalt refers to a “structure, configuration, or layout that is unified and has specific properties that are greater than the simple sum of its individual parts”. For example, when people read text, he or she perceives each word as a complete entity with meaning, rather than individual letters. Each letter is undoubtedly an individual item, but the overall meaning is reliant upon the arrangement of those letters into a particular configuration. It is by cooperation between the left “analytical” hemisphere and right “creative” hemisphere of the brain, or classical and romantic thought processes, that humans perceive this whole and are able to read text.

Figure 1: Gestalt theory explains why simple shifts in spacing can significantly shift perception and alter meaning.

Gestalt theory provides rational and scientific explanations for why changes in visual configuration can have a profound impact on the perceptions of visual cues. Clear communication is a valued commodity within visual design. Failing to recognize the principles of gestalt visual theory often hinders clear communication by producing unexpected interpretations of content (see Figure 1).

Gestalt Principles and their Applications to Interactive Design

Interactive media designers use the gestalt principles of perception to determine how people interpret and organize the surrounding visual information. Additionally, interactive media designs often include sound and time-based content, such as embedded video or interactive characters. In these cases, interactive media designers may look to the gestalt principles of perception when constructing user experiences.
While some accounts report that over 114 principles of Gestalten exist, and that many of them that apply directly to visual forms, artists and designers have historically concentrated on a few perceptual principles to enhance their two-dimensional pieces. Some of the most crucial and influential gestalt visual principles relate to: figure/ground, proximity, similarity, closure, and continuation. These principles, if understood and properly executed, offer a method by which web designers and other interactive artists may utilize the combination of scientific thought with creative thought, and improve upon the visual organization, cohesiveness, and communicative strength of their work.

References

1. Croft, W., and Cruse, D. A., Cognitive Linguistics (Cambridge, United Kingdom: Cambridge University Press, 2004).
2. Carpenter, P., “Musical Form Regained”, Journal of Philosophy 64, (1965).
3. Graham, L., and Fain, C., “Greening Healthcare Design”, Hawaii International Conference on Arts and Humanities, (Waikiki, Hawaii, 2006).
4. Smith-Gratto, K., Fisher, M., “Gestalt Theory: A Foundation for Instructional Screen Design”, Journal of Educational Technology Systems, 27, (1999).
5. Graham, L., “Gestalt Theory, Experience Design, and the Sustainable Healing Garden”, Hawaii International Conference on Arts and Humanities, (Waikiki, Hawaii, 2007).
6. Shneiderman, B., and Plaisant, C., Designing the User Interface (London, United Kingdom: Addison Wesley, 2005).
7. Behrens, R., False Colors: Art, Design and Modern Camou?age (Dysart, Iowa: Bobolink Books, 2002).
8. Wertheimer, M., “Gestalt Theory”, translation in A Source Book of Gestalt Psychology. Ed. Willis D. Ellis. (New York: Harcourt, Brace and Co., 1938).
9. Graham, L., “Gestalt Theory in Interactive Media Design”, Journal of Humanities and Social Sciences, 2, (2008).
10. Pink, D., A Whole New Mind: Why Right Brainers Will Rule the Future (New York, New York: Riverhead Books, 2005, 2006).
11. Zakia, R. D., Perception and Imaging (Newton, Massachusetts: Focal Press, 1997). Figure inspired by Zakia.
12. Koffka, K., Principles of Gestalt Psychology. (London: Routledge & Kegan Paul, 1935).
13. Boring, E.G., Sensation and Perception in the History of Experimental Psychology, (New York: Appleton Century Crofts Inc., 1942).
14. Graham, L., “Gestalt Theory, Experience Design, and the Sustainable Healing Garden”.

Any website that does not pay attention to the way that their content, information, and navigation are structured risks the possibility of a great site that no one can use. If the public cannot find the information they seek quickly and effectively, most will leave the site. Skilled information architects know that the most effective websites play into human cognitive processes while they structure information.

According to the article “Cognitive Psychology & IA: From Theory to Practice” by Jason Withrow, humans naturally form mental categories in order to group similar items and concepts in everyday life. When visiting a website, the same cognitive processes occur, making the proper break-up of information essential to the usability of the website.

However, a common conundrum for information architects is that every person’s method of categorizing items and ideas is different. For instance, one person may mentally group items by visual similarities (ex: this icon looks like a computer), while another groups items by their intended purposes (ex: this article serves to educate the reader on information architecture), and yet another groups items by a certain set of rules for inclusion or exclusion (ex: this site doesn’t include any pictures of kids, so it cannot be a site for a children’s museum). A lot of people in the field of information architecture recommend to accommodate as many variations of categorization as possible, or at the very least, to accommodate a common categorization process.

Since visual cues often serve as a basis for mental associations, a web interface that exploits the cognitive processes of visual perception will be a more usable site. Proximity and similarity are among the most important parts of mental perception. Items that are layed out closely together will be perceived as belonging in a group, and will therefore be categorized as such (ex: these links are close together, so they must be related). Items that share similar characteristics will also be mentally grouped together (ex: these links are of different colors and font sizes, so they must not be related).

This is not to say that just because items are related in some way, that they should all be thrown onto one page of a website. Since encoding, storage, and retrieval of information makes up much of cognitive processes, functions of memory also play a significant role in web design and information architecture. Many studies have shown that the average human can remember between four and nine “chunks” of information in short-term memory at a given time (see “The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information“). For this reason, it is important for usability’s sake to split up information effectively into readable and memorable chunks.

Key points to take away from this article? Information architecture is important for usability. Pay attention to the way people group items, use visual cues to help people group items, and split up your information into bite-size chunks.

The most common, and simplest, fix is to use the following:

.clear {clear: both;}

In your HTML, you call this class as a separate, empty div after the floated elements:

<div class="clear"></div>

The problem with this approach is that it is not semantic HTML – since you’re calling an empty class – and it’s not descriptive. For screen readers, the class has no meaning, but will still be called. It also does not display the same across browsers.

A better method is to use the “clearfix” class. I’m not sure who originally developed it, but this slightly more robust snippet of CSS solves all of the above issues.

.clearfix:after {
content: ".";
visibility: hidden;
display: block;
clear: both;
_height: 0;
font-size: 0;
}

About the selectors and their properties:

height: 0; tells the div to not take up any space, and the underscore triggers “haslayout” in Internet Explorer, even fixing display errors in IE6.

content: “.”; Tells the HTML to append a period after the container div.

visibility: hidden; tells the page to hide the period.

display: block; forces the period to display as a block-level, rather than an inline element.

clear: both; clears the floated divs. This is the same as adding an unsemantic, empty “clear” div.

font-size: 0; is a precaution for Firefox since it sometimes adds a bit of space after the parent element. Setting the font-size to zero fixes this.

So there you have it – a completely valid, cross-browser supported, semantic way to fix parent-child relationships when you’re floating elements. Very handy in keeping footers at the bottom, where they should be!

For instance, one of my favorite Photoshop tools is the Automator. When you’re designing images and banners for the web, they all have to be optimized, and BreastCancer.org, in particular, requests that each banner be under 40kb. To individually optimize each banner would take probably close to two hours; time I didn’t have. Instead, I optimized one while recording my actions, and then hit play for each banner after that. It took me less than 5 minutes to optimize all of them.

For reference, the Automator for Photoshop CS4 is located in your toolbar right below your history. All you have to do is create a new recording, name it, click okay, do whatever you want to your image, click stop, and then click play for every other image that you want to repeat the same actions for.

Another shortcut that I’ve found is useful when working with stock images. If you’re using an image from a site like iStock Photos, you don’t want to purchase it before the design is approved, especially for a client like BreastCancer.org, who may turn down an image because the girl is too young or rosy, or because a sleeping person actually looks dead to them (they’re careful about upsetting their audience – breast cancer patients). Instead, you use a watermarked image to begin with. This is a hassle since you have to then recreate the design later with the purchased image, so a nice little shortcut is to drag any layer masks you have on the stock image to the new, purchased image. Voila! You just cut out some redundant work.

Another probably obvious solution is to get used to using keyboard shortcuts. It’s a lot faster to press command + s than to go through the menus to save your work. Common shortcuts I use include:

Command + s: save
Command + Shift + s: save for web
Command + z: undo
Command + y: redo
Command + c: copy
Command + v: paste
Control + right-click with a tool selected: size and hardness dialogue

Since I work with Photoshop a lot, I end up working with lots and lots of layers. After a few times not remembering what is what, I learned the importance of named, ordered, and grouped layers. This can save an immense amount of time looking for the layers you need to edit.

One other simple related tool that I only recently discovered is if you right-click the visibility toggle on the layers palette, you can assign a color to a layer or group of layers, making them stand out from the rest and easier to find.

Well, that’s it! I hope these tools will be useful for other people. If you have success with it, let me know!

Sadly, this will be my last blog post, as I go back to college next week. For this reason, I wanted to write a comprehensive article on the most important things: the experience, and the people. After living and working in Boulder, Colorado for three months, I’ve compiled information on the best parts of the area, and the best people….

Read the full article at http://blog.foraker.com/2009/08/through-the-interns-eyes-the-best-parts/

I wake up at 7am to my loudly beeping alarm clock, because that’s the only sound that is guaranteed to wake me. Before I leave, I grab an energy shake that my roommate steals from her job (Mix1: they’re made in Boulder, and they’re delicious), and drink it on the way to the bus (I didn’t bring my bumper-sticker-covered, beat up little Subaru). There are three different bus routes I can take; all of which involve a little walking and about a 40-minute commute. While on the bus, I typically stare out the window, lost in thought about what I’ll be doing with my life after I graduate next semester (can you say STRESS?), or chat with the bus drivers since I’m often the only passenger…

Read the full article here: http://blog.foraker.com/2009/07/through-the-intern’s-eyes/

Hello! For those of you who follow this blog, you may not recognize me. My name is Erica Decker, and I’m the new summer intern at Foraker Design. I’ve now been here for about three weeks, so I thought it might be useful to give my perspective on the company, my job, the city of Boulder, and web design in general…

Read the full article here: http://blog.foraker.com/2009/06/through-the-interns-eyes/

The researchers define website personality as the “mental representation of a website store on dimensions that are similar to and reflect the dimensions of human personality” which were listed as 5 dimensions: enthusiasm, genuineness, solidity, sophistication, and unpleasantness. Customer orientation is defined as the “the degree to which salespersons practice the marketing concept by trying to help their customers make purchase decisions that will satisfy their customer needs”, where the salesperson is represented by the website itself. Website quality is represented by the customer’s perceived quality of the website, and purchase intent is the likelihood that that a user will make a purchase from the site.

The experiments were carried at a large university in the southern part of the United States. Four hundred students (204 female, 196 male) tested 22 websites selling apparel in the first phase, while 60 (36 female, 24 male) students tested the websites in the second phase. The participants in phase one were instructed to browse through the sites as if they wanted to purchase an item for themselves or for others, and then to fill out a survey with questions on customer orientation, website quality, and their purchase intentions. The participants in phase two were instructed to browse the 22 websites and then fill out evaluations about website personality on 4 of them.

The first hypothesis was that customer orientation has a positive impact on the positive dimensions of website personality (enthusiasm, genuineness, solidity, and sophistication), and a negative effect on the negative dimension of website personality (unpleasantness). This hypothesis was found to be mostly correct. Customer orientation had a positive impact on the dimensions enthusiasm, genuineness, and sophistication, and a negative impact on the dimension unpleasantness. However, customer orientation did not have a positive impact on the dimension of solidity.

The second hypothesis was that perceived website quality relates positively to higher customer orientation, and positively to the positive dimensions of website personality (enthusiasm, genuineness, solidity, and sophistication), but negatively to the negative dimension of website personality (unpleasantness). This hypothesis had mixed support. Customer orientation was found to have a positive impact on site quality, but out of the dimensions of website personality, only enthusiasm and sophistication were found to have positive impacts website quality. There was no support found for the hypothesis that genuineness and solidity would positively influence perceived website quality, or for the hypothesis that perceived website quality would negatively relate to unpleasantness.

The third hypothesis was that higher customer orientations relate positively to purchase intentions. This hypothesis received full support.

The fourth hypothesis was that the impact of website personality is mediated by the quality of the website. According to the study, “mediation exists if, on the introduction of the mediating variable into the regression equation, the original independent variable becomes insignificant.” Website quality was found to serve as a perfect mediator for genuineness, solidity, sophistication, and unpleasantness, and as a partial mediator for enthusiasm.

Finally, the fifth hypothesis was that there was a positive relationship between the attitudinal measures of purchase intentions and the number of page visits. This hypothesis was also found to have strong support.

The findings of this study, and of other similar studies, play an important role in the development of an e-commerce website. As the researchers point out, “understanding website personality provides firms with a competitive edge in the marketplace.” The findings illustrate that customers often build associations between the behavior and characteristics of the websites they visit, making customer interaction and orientation just as important as the website design.

One criticism of this study is that I find the website personality dimensions to be unbalanced. To have 4 positive dimensions and 1 negative dimension seems like it could confound the results of the study and not be entirely reliable. Other negative dimensions could have included distracting, harsh, complicated, etc.

White – light, reverence, cleanliness, purity, peace, simplicity, innocence, security, sterility, humility.

Black – modernity, power, elitism, unhappiness, sophistication, elegance, formality, wealth, style, evil, death, fear, mourning.

Red – strength, passion, energy, fire, love, sex, heat, excitement, speed, ambition, arrogance, leadership, power, masculinity, danger, anger, revolution, radicalism, socialism, communism, aggression.

Blue – ocean, skies, peace, harmony, calmness, winter, coolness, tranquility, confidence, conservatism, water, ice, loyalty, unity, dependability, technology, cleanliness, depression, coldness, obscenity, air, wisdom, idealism, nobility.

Green Great intelligence, environment, nature, life, spring, fertility, youth, money, generosity, wealth, luck, vigor, grass, aggression, inexperience, envy,  jealousy, illness, greed, life eternal, air, earth, sincerity, hope, renewal, growth, health, balance. (In China – disgrace)

Yellow – sunlight, joy, happiness, earth, optimism, avarice, weakness, intelligence, idealism, summer, hope, cowardice, hazards, dishonesty, femininity, sociability, gladness, summer, friendship.

Purple – envy, spirituality, wealth, royalty, nobility, gaudiness, creativity, ceremony, confusion, wisdom, enlightenment, arrogance, flamboyance, mystery, mourning, exaggeration, pride, honor.

Orange – happiness, energy, heat, enthusiasm, flamboyance, fire, aggression, playfulness, arrogance, balance, warning, danger, gaudiness, autumn, desire, Hinduism, Buddhism.

Brown – boldness, depth, nature, richness, tradition, calm, fascism, boorishness, dullness, heaviness, poverty, stability, roughness, anachronism, dirt, down-to-earth, steadfastness, simplicity, friendliness, filth, dependability.

Pink – admiration, gratitude, spring, sympathy, femininity, health, appreciation, love, marriage, joy.

Read the article at www.lightecho.com