Aesthetics, Non-Text Media, and Usability: The Classic Balance

For the last several years I have been conducting research on Web Based Learning Technologies (often referred to as E-Learning these days); in particular developing and testing models of web design for learning. As I have explored this topic, one of the things I recognized quickly was that design was in many ways a delicate balance between what I referred to as "complexity", meaning rich-interactive multimedia, and "simplicity", meaning functional usability issues (e.g., Hall, Watkins, & Eller, 2003). As my own web development, research, and teaching has progressed I have come to recognize that this balance plays out within the general web design industry as a balance between aesthetics and usability. It turns out that there has been a classic battle between graphic design and artistic types, on one hand; and human-computer interaction (HCI), usability types, on the other hand, from at least the time that the graphic user interface (GUI) has been around. (This tension/balance is alluded to in many interesting and entertaining ways in Jeffrey Zeldman's (2001) book, "Taking your talent to the web" ).

Within the HCI community, therefore, usability and function has been emphasized, as represented on the web by Jakob Nielson and others (for example, note the aesthetic de-emphasis on Nielson's useit.com). Historically, this emphasis on functionality has been championed by one of the most famous HCI personalities ever, Don Norman, who wrote the classic "The Design of Everyday Things" (see his web site for more).

However, a very interesting phenomenon has been occurring lately in the HCI community, with the recognition that aesthetics and emotion play a very big role in effectiveness. For example, at the 2003 Association for Computing Machinery, Computer Human Interaction (ACM, SIG-CHI) annual conference, there was a much touted design symposium, which emphasized a collaboration of graphic designers and usability specialists. This change in perspective within the HCI community is illustrated even more dramatically by Don Norman's new interest in aesthetics and emotion as illustrated by his newest book , "Emotion & Design". To illustrate this point, note the following which is a part of a post from Don Norman to the World Wide Web special interest group list serve within ACM, SIG-CHI. (This post preceeded his book):

"I'm starting a new career phase: Ugly is out, beauty is in ...

Usability? Yeah, that matters, but beauty, pleasure, and fun -- those are truly important.

Yes, the product has to be balanced, yes, it should provide value, fulfill the needs of the users, and make good business sense. Sure, all of that. But if it is unattractive, if it doesn't feel right, who cares if it works? We need both pleasure and function. Beauty and usability." (Don Norman, Posted May 2, 2002).

"Beauty" and "aesthetics" of a web site often depend on media that goes beyond the printed word, such as graphics, animation, video, and audio. Most pages that we find aesthetically pleasing, cool, include one of more of those non-text components. Though it is difficult to specify "beauty guidelines", we can spell out some guideline for how to use "Art", which can also be applied to all of these types of non-text media. (These guidelines are drawn mostly from Albert Badre's book on Web Usability).

General Guidelines:

  1. Art should not interfere with the site's goal and functionality.
  2. Art should not result in visual noise.
  3. Art should not allow misinterpretation.
  4. Art should be consistent with the visitor's Web Experience.

The first three are pretty self explanatory. The third simply means that the use of art should not violate normal web conventions that the user is used to.

Some specific guidelines:

  1. Minimize the use of graphics on a site or page where aesthetics is clearly not an issue, such as transaction pages in an e-commerce site, or pages on a purely informational site, in which the media does not add to the informational content.
  2. Minimize and optimize the use of non-text media files.
    • Optimize graphics
    • Use vector animation programs (e.g., Macromedia Flash) rather than animated GIFs due to size
    • Use compression and streaming technologies for video and audio (e.g., Apple's Quicktime and Real Media).
  3. Minimize the number of colors (use no more than six colors).
  4. Include alt tags for all graphics and other multimedia.
  5. Label large multimedia downloads with size and approximate down load time, based on connection, to warn the user.

References