Complete beginner’s guide to Interactive Design

21 Apr

Web design has followed a long and windy road from it’s rather modest beginnings. Initially, the term “web designer,” described something much more akin to that of a graphic designer: a designer who concerns themselves with the presentation of text and pictures.

Today, however, the majority of websites and applications online are interactive. In turn, modern web designers are called upon to make a number of considerations drastically different than those made by traditional graphic designers. To bridge this gap, we call upon the discipline of interaction design.

This article serves as a good jumping off point for people interested in learning more about Interaction Design. To that point, we’ll briefly cover the history, guiding principles, noteworthy contributors, tools, etc. related to this fascinating discipline. Even if you’re an interaction designer yourself, give the article a read and share your thoughts in the comments below.


is Interaction Design? Back to top

Interaction design got its start only a few decades ago when the first interactive systems made their debut. Novel interfaces presented novel design challenges, and a new breed of designers emerged to accept it. Subsequently, a number of books were released that expressed the facets of this heretofore uncharted territory.

The Interaction Design Association (IxDA) explains:

Interaction designers strive to create useful and usable products and services. Following the fundamental tenets of user-centered design, the practice of interaction design is grounded in an understanding of real users—their goals, tasks, experiences, needs, and wants. Approaching design from a user-centered perspective, while endeavoring to balance users’ needs with business goals and technological capabilities, interaction designers provide solutions to complex design challenges, and define new and evolving interactive products and services.


Interaction design, like user experience design, has evolved to facilitate interactions between people and their environment. Unlike user experience design, which accounts for all user-facing aspects of a software or system, interaction designers are (typically) only concerned with the interaction between users and computers. This niche is referred to as human-computer interaction.

Because, in my opinion, the most rapid and exciting growth in the industry is taking place online, this article will focus on interaction design as it pertains to websites and applications.


There are a number of underlying concepts that drive the practice of interaction design. Here, I’ll give a brief overview of some of the major ones: goal-driven design, “interface as magic,” usability, affordances, and learnability.

Goal-driven design

Although conducting user research isn’t strictly required by an interaction designer, the results of a comprehensive user study are essential to eliciting the best design response. In every design discipline, the artist must first acknowledge their constraints, and then devise a solution. In the case of interaction design, users themselves generally form the basis of an interface’s constraints. Users typically have a number of goals in mind when using your website. Perhaps they want to balance their checkbook online. If so, your application should do this one thing quite well. Adding user research to the equation and forming a clear set of user goals, enables the successful marriage of form and function.

“Interface as Magic”

For the sake of brevity, I’ve condensed a number of Interaction Design best practices into this phase borrowed from Alan Cooper (author of About Face 3: the Essentials of Interaction Design). Alan says that ideally, interfaces wouldn’t exist at all in the mind of the user — they should simply “see” the interface as an extension of the underlying system. To this effect, the best interaction designs don’t exist: they don’t take a long time to load/respond; they don’t make users think; and they don’t give user’s cause for grief. As Jason Fried, CEO of 37 Signal’s says: “Less is Less.” Give the user’s just what they need to accomplish their goals and then move along.


Usability denotes the ease with which people employ a tool in order to achieve a particular goal. Throughout their practice, interaction designers must concern themselves with the inherent usability of the interfaces they design. Interfaces which make the state of the underlying system easy to understand and use are favored.


A pair of scissorsScissors serve as a simple example of affordances in action.Photo by Ivy Dawned.

Scissors are designed in such a way that someone unfamiliar with them should understand which end is for grasping and which end is for cutting. And why shouldn’t they be? The best (industrial/interaction) designs are those that speak for themselves; in which, as the saying goes, form follows function. In others words, links should look like links, buttons should look like buttons, search boxes should …you get the idea.

The underlying principle here is one called affordances, which I discussed previously this year in my article on affordances. Affordances represent the action possibilities available between an actor and their environment. Because affordances express a great deal about the underlying functionality behind a web site or service, it’s essential that designers utilize this concept consistently and cohesively throughout their designs. Bill Scott & Theresa Neil list a similar concept (“provide an invitation”) as one of their six interaction design principles.


A great deal of what comprises a usable interface is made up of familiar components. If users are used to submitting a form with a button, they’ll look for a button when that time comes. This is an example of an interface idiom, or pattern. The best interaction designers don’t reinvent the wheel every time a similar design challenge comes. Rather, they call upon a set of patterns. Many online interaction design patterns are documented in Yahoo!’s design pattern library.In sum, if the design problem at hand calls upon a truly unique interface, interaction designers should take great effort in making that interface learnable, or, easily learned. This, in and of itself, requires a strong knowledge of current design conventions, affordances, and overall web usability.


An interaction designer is a key player throughout the entire development process. They will typically perform the following activities as part of a project team:

Form/inform a design strategy

Although the boundaries here are fuzzy, one this is certain: an interaction designer will need to know who she is designing for and what their goals are. Typically, this is provided for her by an Information Architect or User Researcher. In turn, an interaction designer will assess the goals and develop a design strategy, either independently or with help from other designers on her team. A design strategy will help team members have a common understanding of what interactions need to take place to facilitate user goals. I wrote up a short article outlining how to create a design strategy earlier this year.

Identify and wireframe key interactions

After the interaction designer has a good idea of the strategy motivating her design, she can begin to sketch the interfaces that will facilitate the necessary interactions. The devil here lies in the details: some professionals will literally sketch these interactions on a pad/dry-erase board while others will use software application(s) to aid them in the process; some professionals will create these interfaces collaboratively while others will create them alone. It all depends on the interaction designer and their particular workflow.

Prototype Interactions

Depending on the project, the next logical step for an interaction designer might involve the creation of prototypes. There are a number of different ways in which a team might prototype an interaction, which I won’t be covering in extensive detail here. Some of these include: xhtml/css prototypes, paper prototypes, and even protocasting.

Stay Current

One of the hardest parts about being a practicing Interaction Designer is the speed of change in the industry. Every day, new designers are taking the medium in a different direction. Consequently, users are expecting these new kinds of interactions to appear on your website. The prudent interaction designer responds to this evolution by constantly exploring the web for new interactions, taking advantage of new technologies (such as CSS3 or HTML5), and pushing the medium forward themselves.

Read the rest of this great article here:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: