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

Bulletin of the American Society for Information Science & Technology, Aug/Sep 2006 by Govella, Austin

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.

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)

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

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

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.