The Elements of Interaction Design

Other design disciplines use raw materials. Communication designers use basic visual elements such as the line. Industrial designers work with simple 3D shapes such as the cube, the sphere, and the cylinder. For interaction designers, who create products and services that can be digital (software) or analog (a karaoke machine) or both (a mobile phone), the design elements are more conceptual. And yet they offer a powerful set of components for interaction designers to bring to bear on their projects.

Motion

In much the same way that inert gases don't mingle with other gases, objects that don't move don't interact (Figure 3.1). An interaction, as noted in Chapter 1, is some sort of communication, and communication is about movement: our vocal cords vibrating as we speak, our hands and arms writing or typing as we send e-mail or instant messages, sound and data moving between two entities.

Figure 3.1. Motion. Without motion, there can be no interaction.

iStockphoto

We communicate in many ways and through many different products, from mobile phones to e-mail. Those products and the people who use them generate behavior, and interaction designers are very concerned with behavior: the way that products behave in response to the way that people behave. And all behavior is, in fact, motion: motion colored by attitude, culture, personality, and context. There's wide variation even in such universal and seemingly simple behaviors such as walking (that's why, for instance, there's a need for both high-impact walking shoes and walkers for the elderly), and the designs we create have to understand and account for those variations. Even a simple motion like pressing a key on a keyboard can be difficult if you are elderly or infirm.

Motion is often a trigger for action, as when your finger clicks the button on your mouse. The triggered action (or at least the feedback for that action) is often about motion as well. You click a Web site link, and the page changes. You press a key, and an e-mail window closes. There is motion on your screen.

Without motion, there can be no interaction.

Space

Movement, even on a subatomic level, happens in some sort of space, even if the boundary of that space (as with, say, the Internet) is unclear. Interaction designers work in both 2D and 3D space, whether that space is a digital screen or the analog, physical space we all inhabit (Figure 3.2).

Figure 3.2. Space. All interactions take place in a space. This Italian piazza in Ferrara was designed for interaction.

iStockphoto

Most often, interaction design involves a combination of physical and digital spaces. You make a gesture in physical, analog spacefor instance, turning a knob on your stereoand you see the results on its digital display screen. The reverse can, of course, be true as well. You can stream music from your computer through your stereo and into physical space.

Most interaction designers underutilize 3D space on screens. The physical flatness of our monitors and display screens causes us to ignore what the Renaissance painters discovered so long ago: perspective. Objects, even in a 2D space, can appear to move backward and forward in 3D space. Perspective creates, alongside X (height) and Y (width), a Z (depth) axis on which to work. Web sites are notably bad in their use of Z space.

Starbucks cafes typically make excellent use of physical space, with the ordering area separated from the fulfillment area where customers receive their beverages, and those areas separated from the area where people can customize (add milk and sugar and other condiments to) their drinks. Compare that to the typical crush around a single counter of a fast food restaurant.

Space provides a context for motion. Is the action taking place in a quiet office in front of a computer screen or in a crowded, noisy airport in front of a kiosk?

All interactions take place in a space.

Time

All interactions take place over time. Sometimes an interaction can occur instantaneously, as with a mouse click. Sometimes it can involve very long durations (Figure 3.3). You can still find online Usenet messages (Usenet is a sort of bulletin board system) from decades ago.

Figure 3.3. Time. All interactions take place over time. Sometimes this time can be very brief, and sometimes it can be very long indeed.

iStockphoto

Movement through space takes time to accomplish. As every gamer will attest, it takes time to press buttons (around 8 milliseconds at the fastest). Even with broadband speeds, it takes time for packets of data to travel from distant servers through the physical wires and perhaps through the air via wireless signal to your computer.

Interaction designers need an awareness of time. Some tasks are complicated and take a long time to completefor instance, searching for and buying a product. Many e-commerce Web sites require you to log in before making a purchase, and that login session will be active for a set time. Imagine if Amazon or other e-commerce sites timed out every few minutes and required you to log in repeatedly while shoppingit's unlikely you'd buy much from them. Some travel and concert-ticket Web sites make users race against the clock to enter their credit card information before their selected seats are lost.

Digital time is definitely not human time. Digital time is measured in milliseconds, a single one of which is considerably shorter than the blink of an eye. Changes made by the computer can be so nearly instantaneous that programmers need to program in delays so that humans can detect them.

You can feel the impact of milliseconds, however. Extra milliseconds added to every keystroke or mouse-click would probably make you think your computer is slow because of the tiny delays. Several hundred milliseconds would cause frustration and anger, and a single-second delay each time you pressed a key would probably make your computer unusable.

Time creates rhythm. How fast a menu pops up on the screen or how long it takes to complete an action such as renewing your driver's license controls the rhythm of the interaction. Games are often alert to rhythm: how many aliens come at you at any given moment or how long it takes to complete a level. Rhythm is also an important component of animation: how quickly does a folder open or close on the desktop, how slowly does a drop-down menu slide open. Interaction designers control this rhythm.

Battery life (the duration of which is slowly getting better) is another element of time of which designers need to be cognizant. Some features, such as a backlight, drain more battery power than others and thus decrease the amount of time a device works. A mobile phone that worked for only 10 minutes when unplugged from a power outlet wouldn't be of much use.

Interactions happen over time.

Appearance

How something looks gives us cues as to how it behaves and how we should interact with it (Figure 3.4). The size, shape, and even weight of mobile devices let us know that they should be carried with us. The sleek black or silver look of digital video recorders like TiVo devices tells us that they are pieces of electronic equipment and belong alongside stereos and televisions.

Figure 3.4. Appearance. The design of this gate latch provides affordances indicating how it should be used.

iStockphoto

Appearance is one major source (texture is the other) of what cognitive psychologist James Gibson, in 1966, called affordances. Gibson explored the concept more fully in his 1979 book The Ecological Approach to Visual Perception, but it wasn't until Don Norman's seminal book The Psychology of Everyday Things, in 1988, that the term spread into design. An affordance is a property, or multiple properties, of an object that provides some indication of how to interact with that object or with a feature on that object. A chair has an affordance of sitting because of its shape. A button has an affordance of pushing because of its shape and the way it moves (or seemingly moves). The empty space in a cup is an affordance that tells us we could fill the cup with liquid.

Affordances (or, technically, perceived affordances) are contextual and cultural. You know you can push a button because you've pushed one before. On the other hand, a person who has never seen chopsticks may be puzzled about what to do with them.

Except to the visually impaired (for whom texture often substitutes), appearance also conveys emotional content. Is this product whimsical or serious? Practical or playful? Appearance can also convey other attributes that may be meaningful: Is the object expensive or cheap? Complicated or simple? Daunting or approachable? Single use or enduring? Structured or casual?

Appearance has many variables for designers to alter:

• Proportion

• Structure

• Size

• Shape

• Weight

• Color (hue, value, saturation)

All of these characteristics (and more) add up to appearance, and nearly every design has some sort of appearance, even if that appearance is a simple command line.

Texture

While texture can also be part of the appearance, how an object feels in the hand can convey the same sort of information as appearance (Figure 3.5). Texture, too, can convey affordances. The sensation of an object can provide clues as to how it is to be used as well as when and where. Is it solid or flimsy? Is it fragile or durable? Do the knobs spin or push or do both?

Figure 3.5. Texture. How something feels in the hand can also provide affordances indicating how it could be used, as in the case of these cane lobster traps.

iStockphoto

Texture can convey emotion as well. A fuzzy, plush object conveys a different meaning than a hard, metallic one.

Designers can also work with texture variables such as vibration and heat to signify actions. A mobile phone can vibrate when a new message arrives, and one could imagine it growing colder the longer it's been since a voice-mail message arrived.

Sound

Sound (Figure 3.6) is a small part of most interaction designs, but it can be an important part, especially for alerts and ambient devices (see Chapter 7). Sound possesses many variables that can convey information as well. You wouldn't want a loud screech to come out of your computer every time you received e-mail, and a soft whisper wouldn't cause traffic to move aside for an ambulance.

Figure 3.6. Sound. Sound can be manipulated as a tool of interaction design through devices such as this mixing board.

iStockphoto

Sounds are made up of three main components, all of which can be adjusted by a designer:

• Pitch. How high in range a sound is. Is it high pitched like a bird's song or deep like thunder?

• Volume. How loud a sound is.

• Timbre or tone quality. What type of sound it is. Sounds played at the same volume and pitch can seem very different. Think of a middle C played on a trumpet and one played on a piano.

Sound is underutilized (some would say rightfully so) in interaction design, but even a little bit of sound can make a major difference in a product. Steve Jobs insisted that the iPod's wheel make an audible click that could be heard without headphones.

All of these elements of interaction design comprise any interaction designer's toolkit, and while interaction designers may not consciously manipulate them, they are the building blocks of interaction design. Now let's look at some principles that should guide the way that interaction designers assemble these elements into a product or service.