Top

The Elements of Interaction Design

May 8, 2006

An excerpt from Designing for Interaction: Creating Smart Applications and Clever Devices. ©2006 New Riders.

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. An interaction 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 email or instant messages, sound and data moving between two entities.

Champion Advertisement
Continue Reading…

We communicate in many ways and through many different products, from mobile phones to email. 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 in motion. 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 email 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.

Most often, interaction design involves a combination of physical and analog spaces. You make a gesture in physical, analog space—for instance, turning a knob on your stereo—and 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 that time can be near-instantaneous, like the time it takes to click a mouse. Sometimes it can involve very long durations. You can still find online usenet messages (usenet is a sort of bulletin board system) from decades ago.

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 complete—for instance, searching for and buying a product. Many e-commerce Web sites require you to log in before purchasing, 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 shopping—it’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 done by the computer can be so 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 delay. 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 something pops up on the screen or how long it takes to complete an action like renewing your driver’s license controls the rhythm of the interaction. Games are often about rhythm: how many aliens come at you at any given moment, or how long does it take 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 the device works. A mobile phone that worked for only 10 minutes unplugged from power 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. 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 tell us that they are pieces of electronic equipment and belong alongside stereos and televisions.

Appearance is the 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. An affordance (or, technically, a perceived affordance) is 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 would 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 information as appearance. 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 both?

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 is a small part of most interaction designs, but it can be an important part, especially for ambient devices and alerts. Sounds possess 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 email, and a soft whisper wouldn’t exactly cause traffic to move aside for an ambulance.

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 wheel on an iPod® 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. 

Founder and Principal at Kicker Studio

San Francisco, California, USA

Dan SafferSince 1995, Dan has designed products—including devices, software, and Web sites—and services that millions currently use every day. He has led projects for large organizations like Nokia and Time Warner and startups such as Ning and Foxmarks. His design innovations have received several patents. An internationally recognized thought leader and acclaimed speaker and author, Dan wrote the best-selling book Designing for Interaction, which one reviewer called “a bookshelf must-have for anyone thinking of creating new designs,” and Designing Gestural Interfaces. He has spoken at conferences and taught workshops on interaction design all over the world. His writings on design have appeared in BusinessWeek, Vitamin, and Boxes and Arrows. Dan was a founding Director of the Interaction Design Association (IxDA) and is also a member of AIGA and IDSA. He has a Masters of Design in Interaction Design from Carnegie Mellon University.  Read More

Other Articles on Interaction Design

New on UXmatters