Web design has followed a long and winding 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.
What 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.
What concepts drive IxD?Back to top
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.
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.
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.
What does an Interaction Designer do?
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.
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.
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.
Notable Interaction Designers Back to top
Cennydd Bowles is obsessed with making the web a better place and has several years’ experience of doing just that on e-commerce, government and community sites. As a user experience designer at Clearleft, he thinks, writes and practices information architecture, interaction design and usability like there’s no tomorrow.
Cennydd writes about user experience and interaction design on his blog, http://www.cennydd.co.uk/.
Nathan Curtis is a founder and principal at EightShapes, LLC, a user experience consulting firm based in Washington, DC. Nathan has been practicing varied disciplines within user experience design since 1996, and areas of interest include information architecture, interaction design, usability research, and front-end development. He started EightShapes in 2006 and has helped improve the user experience for clients in Washington DC and across the United States.
Tim Van Damme
Tim is a 24 year old interface designer, based and raised in Belgium. When he’s not busy designing interfaces at his company Made by Elephant, he can be found traveling (is it just me or is that an oxymoron?) or going to conferences.
Tim’s personal blog is available at MaxVoltar.com.
Uday Gajendar is a UI designer with almost a decade of experience in Silicon Valley. His work has spanned enterprise software, consumer websites, and VOIP apps at Oracle, Adobe, Cisco, Netflix, as well as agencies like frog and Involution. Having earned degrees in industrial design (BFA from University of Michigan) and interaction design (MDes. from Carnegie Mellon), Uday advances the field with talks & articles about aesthetics, leadership, and strategy. He has also taught UI design at San Jose State University.
Uday frequently conjectures on the more idiosyncratic aspects of interaction design on his blog Ghost in the Pixel
Theresa Neil is a User Experience consultant located in Austin, Texas. She has led the design for more than 80 live web, desktop and mobile applications since 2001. Her recent clients include Zenoss, Innography, PayPal, Pervasive, and OneSpot.
Theresa’s blog is occasionally updated with notes of interest to Interaction Designers
Bill Scott is the director of UI Engineering at Netflix in Los Gatos, CA, where he plies his interface engineering and design skills. Scott is the former Yahoo! Ajax evangelist and pattern curator for the Yahoo! Design Pattern Library.
He has a long and glamorous history in the IT world, due mostly to his unique understanding of both the technical and creative aspects of designing usable products.
Checkout Bill Scott’s blog, Looks Good Works Well.
Tools of the TradeBack to top
Interaction designers use a number of different tools to get their jobs done. Whether they’re sketching an interaction on a napkin or presenting a prototype to a client, their goal is the same: communication via conversation. Above all else, interaction designers need to communicate well. The list below is a small sampling of just a few of tools used to facilitate conversations. Keep in mind that the web interfaces that are eventually created, are typically done so with user-facing (front-end) technologies such as CSS/HTML, Flash, etc.
Balsamiq Mockups is a great little Adobe Air app that makes wireframing an interaction easy. The team at Balsamiq has done a superb job, providing users with a number of interaction design patterns that are ubiquitous to contemporary application design. In addition, users quickly share wireframes with clients, create links between wireframes, and more.
Omnigraffle is the premier diagramming software for Mac OS X. Interaction Designers can take advantage of the rather bland aesthetic created by diagramming software such as OmniGraffle to focus their team on the interactions behind their designs rather than on the design itself. OmniGraffle sports a number of nifty features, including: click-to-reveal functionality (for example, you can show how a modal box works), sketching/bezier curves, etc.
Although InDesign as initially designed as a “page layout” application, used primarily by graphic designers, it’s utility to interaction designers shouldn’t be overlooked; especially with the introduction of the EightShapes Unify framework (see below). InDesign might be the ideal tool to introduce into a creative workflow simply because it’s a part of the Adobe creative Suite, meaning that other creatives on your team will face a more shallow learning curve.
Last but certainly not least, let us not forget the ever faithful Moleskine notebook. Sketching interactions with pencil and paper adds a human element to the wireframing process that other software tools simply can’t match. In addition, everyone can play along. Even the worst designers can sketch “boxes and arrows.” Be sure to invest in a few of these notebooks and then bring them along to your first client meetings; especially if a dry-erase board isn’t handy.
Mockups To Go is a “user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups”. If you find yourself recreating something that already exists, you should go checkout their design library; they’re likely to have a template that closely approximates your design.
Konigi has offered up (for free!) a set of shapes for making wireframes (low-fidelity web page schematics) in OmniGraffle version 5.x. It consists of most of the basic elements you’ll need to create user interface specifications.
Here’s the elevator pitch:
EightShapes Unify is a collection of templates, libraries, and other assets that enable user experience designers to create more consistent, effective deliverables faster. The system utilizes the Adobe Creative Suite of products; primarily, Adobe InDesign is the key authoring tool.
In sum, EightShapes attempts to standardize the Interaction (and User Experience) Designer’s workflow. I’ve yet to take the system for a spin, but it’s well-documented and comes with video tutorials to get yourself started.
In Jason Robb’s post on sketching user experiences, Jason details a number of tools one can collect to sketch interactions. Checkout his article to get started.
Associations Back to top
In their own words:
the IxDA network provides an online forum for the discussion of interaction design issues as well as other platforms for people who are passionate about interaction design to gather and advance the discipline.http://www.ixda.org/
More information available at: http://www.ixda.org/.
Although the AIGA (American Institute of Graphic Arts) was initially founded for graphic designers, the organization itself realizes that graphic designers are more frequently designing compositions for new media, in which interaction design plays a major part. Local AIGA chapters are available throughout the United States. In chapters that I am familiar with have hosted events as Photoshop Layer Tennis, or art exhibitions, etc. It’s a great idea to go out and meet
More information available at: http://www.aiga.org/.
Books Back to top
The list of books relevant to interaction design could span many webpages by itself. Here, I’ve condensed this list to just five such books. If you’re really itching to expand your library, though, check out our recommended books for your user experience library.
- The Principles of Beautiful Web Design
- Designing the Obvious: A Common Sense Approach…
- About Face 3: The Essentials of Interaction Design
- Designing Web Interfaces: Principles and Patterns…
- Sketching User Experiences: Getting the Design Right…