Bulletin, August/September 2006

The Language of Interaction: Rich Interfaces, Networks and Design Patterns

by Austin Govella

Austin Govella is a senior information architect with Satyam's User Experience Management group in Washington, DC. He writes about IA, UX and design at his blog “Thinking and Making”. 

Alarmists, betting on pestilence, warn pandemics will sweep the globe and destroy the human race. Germageddon isn't likely. People aren't dominoes waiting to be knocked over by disease. We're a vast, global network. Our survival depends on our ability to learn about diseases faster than they spread. Quarantines illustrate how this works: people learn about and isolate infected populations before they grow.

We didn't survive because we're stronger, faster or heartier. We survived because we talk fast.

But it's not just about speed. If someone tells you about the latest pox, you need two things: you have to speak their language, and you have to hear enough of what they say to grasp what they mean.

If you've had a bad cell phone connection, you understand the importance of quantity of information. To survive, we need information about a problem and a way to transmit that information, and it has to be transmitted accurately. These requirements govern all networks.

Information Theory: Understanding Networks
In 1948, Claude Shannon, a mathematician with Bell Labs, published “Mathematical Theory of Communications” where he described the transfer of information over a network. His model – source–encoder–channel–decoder–destination – wasn't new. It looks like the speech circuit proposed in 1915 by Ferdinand de Saussure, the founder of semiotics. Shannon went a step further to identify explicitly parts of a network:

  1. How much information is being transmitted

  2. The bandwidth available to transmit the information

  3. The quality of the transmission, or how much information is correctly transmitted.

Our evolutionary success depends on our operation as networked animals. In many ways technology is an expression of the human network, but technology doesn't measure up. The human network uses three highly advanced interfaces capable of accurately transmitting large amounts of information: internal dialog, verbal dialog and sexual dialog. Our technologies can never transmit as much information as clearly in as little time, so we consistently and constantly evolve our technological interfaces towards the quality of our three innate dialogs. In retrospect, it was fate that we should move towards rich interfaces both on the Internet and in the physical world – Web 2.0 and ubiquitous computing.

Figure 1. Traditional vs. rich interfaces

Figure 1. Traditional vs. rich interfaces

The static text and images of traditional Web pages transmit only so much information and how long it takes the system to respond to a user limits the clarity of the transmission. By comparison, rich interfaces use dynamic text, images and sound to transmit more information (to improve the bandwidth). (See Figure 1.) Technologies like Ajax and Flash also reduce response time to help us communicate with greater clarity.

You can use Shannon's model to think about ways you can improve an interface. For example:

  1. Boxes and Arrows uses instant feedback to increase the quantity of information they communicate. (Figure 2)

    Figure 2. Boxes and Arrows instant feedback
    Figure 2. Boxes and Arrows instant feedback

  2. Yahoo's popups improve the bandwidth of a page by allowing more information to be communicated in the same space. (Figure 3)

    Figure 3. An example of Yahoo's popups
    Figure 3. An example of Yahoo's popups

  3. Backpack's edit in place improves transmission quality by allowing instant correction and clarification. (Figure 4)

    Figure 4. An example of BackPack's edit-in-place feature
    Figure 4. An example of BackPack's edit-in-place feature

Between the Frames, Communicating Rich Interfaces
As designers, most of our grappling with new interfaces has been communicating them to one another. Shannon notes what we already know: the richer our interfaces, the more difficult it is to describe them.

We have no problem describing rich interfaces, per se. We've described select boxes for years. When someone says “select box,” we understand what happens on the page, the next page and in between. In Understanding Comics, Scot McCloud explains most of the action in comics takes place between the frames. Unlike select boxes, we don't have a common understanding of what happens between rich interface frames. We don't understand the transitions. New complexity requires a new language.

Our current design languages allow us to describe an interface's before and after state. To describe what happens between the frames, we need to develop a common vocabulary to describe the transitions. The visual effects library, Script.aculo.us, describes transitions using terms like blind up, blind down and fade to reference specific visual effects between before and after.

Such descriptions are like calling someone a “clown.” We can develop a common understanding of someone with a red nose and big shoes. Unfortunately, a vocabulary by itself is almost useless. A clown at a party is fun. A clown in a Steven King book will kill you. Vocabularies depend on their context of use. A language is not a vocabulary; a language is a pattern of usage. In design, these patterns of interaction – design patterns – demand a fundamental literacy from designers. Rich interfaces require us to study and document design patterns, the language of interaction.

Learning the Language of Interaction
Exposure to rich interfaces can teach a lot about design patterns. Everyone in an organization will benefit from looking at existing frameworks like Script.aculo.us, Yahoo's Widget Library, Backbase and others. Similarly, you can improve your grasp of the language of interaction by exploring websites, articles and books on design patterns like Yahoo's Design Pattern Library and Jennifer Tidwell's Designing Interfaces website and book.

Inside any organization, you've already evolved your own set of patterns and should have some way of collecting this knowledge. Knowledge management and sharing should focus not only on patterns, but also on methods for knowing when to use a particular pattern and when not to. You don't have to create a complex Web application. Wikis and blogs are easy to set-up and maintain, and they offer a simple way to manage information about patterns. Even a Word document or a PowerPoint deck full of annotated screenshots can be used. The goal is to collect your knowledge.

One caveat, however: In some organizations, style guides and libraries often instruct how something should be done. This approach can obscure how things could be done. The purpose of a pattern language is to make communication easier. Sometimes, though, you have to invent new words to communicate new meanings. From time to time, remind yourself about the blank slate. Languages continually evolve. So should yours.

Sources Mentioned
Lucent Technologies (2006). An overview of information theory. Retrieved April 16, 2006, from www.lucent.com/minds/infotheory/what5.html.

McCloud, Scott. (1994). Understanding Comics. New York: HarperPerennial.

Saussure, Ferdinand de. (1988). The object of study. In D. Lodge (Ed.). Modern Criticism and Theory (pp. 2-9). New York: Longman.

Rich interface frameworks and libraries:
Backbase: Ajax development framework: www.backbase.com

Designing interfaces: Patterns for effective interaction design. By Jennifer Tidwell. http://designinginterfaces.com/

Script.aculo.us: http://script.aculo.us

Yahoo! Design Pattern Libraryhttp://developer.yahoo.com/ypatterns/

Yahoo! UI Library: http://developer.yahoo.com/yui/

Rich interface examples:
Backpack. 2006. http://backpackit.com

Boxes and Arrows. 2006. http://boxesandarrows.com/account/login

Yahoo! 2006. http://yahoo.com