Complete Beginners Guide to Interaction Design

Written by
UX Booth
Author
Interaction design has its origins in web and graphic design, but has grown into a realm of its own. Far from
merely working with text and pictures, interaction designers are now responsible for creating every element
on the screen that a user might swipe, click, tap, or type: in short, the interactions of an experience.
This article serves as a good jumping off point for people interested in learning more about Interaction
Design. To that end, well briefly cover the history, guiding principles, noteworthy contributors, and tools
related to this fascinating discipline. Even if youre an interaction designer yourself, give the article a read
and share your thoughts in the comments below.

Table of Contents

What is Interaction Design?

Common Methodologies

Daily Tasks

People to Follow

Tools of the Trade

Associations

IxD Books

What is Interaction Design?

Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction designers
strive to create meaningful relationships between people and the products and services that they use, from
computers to mobile devices to appliances and beyond. Our practices are evolving with the world.
The Interaction Design Association (IxDA)
Interaction design began the day the first screen was designed to hold more than static copy. Everything
from a button to a link to a form field is part of interaction design. Over the past several decades, a number
of books have been released that explain facets of interaction design, and explore the myriad ways it
intersects and overlaps with experience design.
Interaction design has evolved to facilitate interactions between people and their environment. Unlike user
experience design, which accounts for all user-facing aspects of a system, interaction designers are only
concerned with the specific interactions between a users and a screen. Of course, in practice things are never
so crisply delineated.

Common Methodologies
Although interaction design spans myriad types of web and mobile applications and sites, there are certain
methodologies that all designers rely on. Well explore some of the more common methodologies here:
goal-driven design, usability, the five dimensions, cognitive psychology, and human interface guidelines.

Goal-Driven Design
Goal-driven design was popularized by Alan Cooper, in his book The Inmates Are Running the Asylum:
Why High-Tech Products Drive Us Crazy and How to Restore the Sanity, published in 1999. Alan defines
goal-driven design as design that holds problem solving as a highest priority. In other words, goal-driven
design focuses first and foremost on satisfying specific needs and desires of the end-user, as opposed to
older methods of design, which focused on what capabilities were available on the technology side of
things.
Today, some of the points Alan brings up seem obvious, since designers rarely select interactions based
solely on development constraints. However, at its heart, the methodology is all about satisfying the endusers needs and wants, which is just as necessary today as it ever was.
The process involved in goal-driven design, according to Alan, requires five shifts in the way we think as
interaction designers.

1. Design first; program second. In other words, goal-driven design begins with considerations for
how users interact (and how things look!), rather than beginning with technical considerations.
2. Separate responsibility for design from responsibility for programming. This refers to the
necessity of having an interaction designer who can champion the end-user, without worrying about
the technical constraints. A designer should be able to trust his or her developer to handle the
technical aspects; in fact Alan Cooper suggests that to do otherwise places the designer in a conflict
of interest.
3. Hold designers responsible for product quality and user satisfaction. Though stakeholders or
clients will have their own objectives, the interaction designer has a responsibility to the person on
the other side of the screen.
4. Define one specific user for your product. This particular idea has developed into something that is
now more commonly associated with user research: personas. Yet Alan reminds us to connect
personas back to the product, and constantly ask: where will this person use this? Who is he or she?
What does he or she want to accomplish?
5. Work in teams of two. Lastly, interaction designers should never work in a silo. Collaboration with
others, which Alan Cooper calls a design communicator, is key. Though the design communicator
Alan envisioned in 1999 was typically a copywriter intended to provide marketing copy for
products, today that has expanded to include a project manager, content strategist, information
architect, and many others.

Usability
Usability may feel like a vague term, but at its heart, designers are simply asking can someone easily use
this? Its been explained in books and online in a myriad of ways, and we will review a few different
definitions to uncover some common themes and nuances:
In the book Human Computer Interaction by authors Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell
Beale, usability is broken down into three principles:

Learnability: how easily can a new user learn to navigate the interface?

Flexibility: how many ways can a user interact with the system?

Robustness: how well are we supporting users when they face errors?

Meanwhile, Nielsen and Schneiderman explain usability as being made up of five principles:

Learnability: how easily can a new user learn to navigate the interface?

Efficiency: how quickly can users perform tasks?

Memorability: if a user hasnt visited the system in a while, how well will they remember the
interface?

Errors: how many errors do users make, and how quickly can they recover from errors?

Satisfaction: do users enjoy using the interface, and are they pleased with the results?

Lastly, the international standard (ISO 9241) has also broken down the word into five principles.

Learnability: how easily can a new user learn to navigate the interface?

Understandability: how well can a user understand what they are seeing?

Operability: how much control does the user have within the interface?

Attractiveness: how visually appealing is the interface?

Usability compliance: does the interface adhere to standards?

Clearly, there are common themes that make up what it means for an interface to be usable. Regardless of
the usability principles a designer follows, its an important consideration for any interface.

The Five Dimensions

In Bill Moggridges book of interviews, Designing Interactions, Gillian Crampton Smith, an academic in
interaction design, introduced the concept of four dimensions of an interaction design language. In other
words, these dimensions make up the interactions themselves, and as a result they make up the
communication between a user and the screen. The four original dimensions are: words, visual
representations, physical objects or space, and time. More recently, Kevin Silver, senior interaction designer
at IDEXX Laboratories, has added a fifth dimension, behavior.

1D: words should be simple to understand, and written in such a way that they communicate
information easily to the end user.

2D: visual representations are all graphics or images, essentially everything that is not text. They
should be used in moderation, so as to not overwhelm.

3D: physical objects or space refers to the physical hardware, whether its a mouse and keyboard,
or a mobile device a user interacts with.

4D: time is the length that the user spends interacting with the first three dimensions. It includes the
ways in which the user might measure progress, as well as sound and animation.

5D: behavior was added by Kevin Silver in his article, What Puts the Design in Interaction Design.
It is the emotions and reactions that the user has when interacting with the system.

Using these five dimensions, an interaction designer can pay attention to the very experience the user has
when communicating and connecting with a system.

Cognitive Psychology
Cognitive psychology is the study of how the mind works, and what mental processes that take place there.
According to the American Psychological Association, these processes include attention, language use,
memory, perception, problem solving, creativity, and thinking.
While psychology is an immensely broad field, there are a few key elements of cognitive psychology that
are particularly valued, and in fact may have helped form the field of interaction design. Don Norman called
out many of them in his book, The Design of Everyday Things. Here are just a few.

Mental models are the images in a users mind that inform their expectation of a certain interaction
or system. By learning the users mental model, interaction designers can create systems that feel
intuitive.

Interface metaphors make use of known actions to lead users to new actions. For example, the
trash icon on most computers resembles a physical trash can, in order to alert a user to the expected
action.

Affordances are things that are not only designed to do something, but that are designed to look like
they are designed to do something. A button that looks like a physical object you can push, for
example, is an affordance designed so that someone unfamiliar with the button will still understand
how to interact with it.

Human Interface Guidelines

This section is a bit of a misnomer; there actually is no single set of human interface guidelines. However,
the idea behind creating human interface guidelines is in itself a methodology. Guidelines have been created
by most major technology design businesses, including Apple and Android, Java and Windows. The goal is
the same for all of them: to alert prospective designers and developers to advice and recommendations that
will help them to create universally intuitive interfaces and programs.

Daily Tasks and Deliverables

An interaction designer is a key player throughout the entire development process. He or she has a set of
activities that are key to the project team. These typically include forming a design strategy, wireframing
key interactions, and prototyping interactions.

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 the users goals are. Typically, this is provided for her by a 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.

Wireframes of 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 web
applications to aid them in the process, and some will use a combination thereof. Some professionals will
create these interfaces collaboratively while others will create them alone. It all depends on the interaction
designer and his or her particular workflow.

Prototypes
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 we
wont be covering in extensive detail here, such as html/css prototypes, or paper prototypes.

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 and taking advantage of new technologies
while always keeping in mind that the right interaction or technology is the one that best meets the personas
needs, and not merely the newest or most exciting. Interaction designers also stay current by following
thought leaders (like the notable designers below) on Twitter, and pushing the medium forward themselves.

People to Follow
As we noted before, its nearly impossible to identify someone as only an interaction designer. The field
overlaps with UX design, UI design, development, and visual design, and as a result not all the designers
listed here even refer to themselves as interaction designers. Weve included them because of their impact
on the field, and because the things they have taught and written about are worth exploring if you yourself
work in interaction design.
Alan Cooper
Twitter

Alan Cooper co-founded Cooper in 1992. He is widely known for his role in humanizing technology
through his groundbreaking work in software design. He is also the author of the books About Face: The
Essentials of Interaction Design (editions 1-4) and The Inmates Are Running the Asylum: Why High-Tech
Products Drive Us Crazy and How to Restore the Sanity. Widely recognized as the Father of Visual Basic,
Alan also created the goal-directed design methodology and invented personas as practical interaction
design tools to create high-tech products that delight users sensibilities.
Brad Frost
Twitter
Brad Frost is leading a charge: Death to Bullshit. Death to Bullshit is a rallying cry to rid the world of
bullshit and demand experiences that respect people and their time. Brad helps by creating those
experiences as a web designer, and championing them as a writer, consultant, and speaker. While Brad is
technically a front-end developer, the line between developer and interaction designer is thin, and his work
has had a huge impact on the interaction design community, in part because of the tools and resources he has
created. These resources include This Is Responsive, Pattern Lab, Styleguides.io, WTF Mobile Web, and
Mobile Web Best Practices.
Whitney Hess
Twitter
Whitney Hesss lifes mission is to put humanity back into business. Whitney co-hosts the podcast
Designing Yourself, writes on her blog Pleasure & Pain, and speaks at conferences and corporations
worldwide. She holds a Masters in Human-Computer Interaction and a Bachelors degree in Professional
Writing and HCI from Carnegie Mellon University, and in 2014 became a certified coach through New
Ventures West.
Kim Goodwin
Twitter
Kim Goodwin is the author of the bestselling book, Designing for the Digital Age. Kim is currently
consulting for clients in varied industries including aviation, consumer electronics, and retail. She spent
most of the last decade as Vice-President, Design and General Manager at Cooper, leading an integrated
practice of interaction, visual, and industrial designers and the development of the acclaimed Cooper U
design curriculum. Her range of experience and a passion for teaching have led to Kims popularity as an
author and as a speaker at conferences and companies around the world.
Brenda Laurel
Twitter
Brenda Laurel has been part of several major revolutions in the way humans use computers: virtual reality,
interactive narratives and some fresh approaches to gaming. She is currently a chair and professor at the
California College of the Arts Graduate Program of Design. She has worked for Atari, co-founded game
development firm Purple Moon, and served as an interaction design consultant for multiple companies,
including Sony Pictures, Apple, and Citibank.
Mat Marquis
Twitter
Mat Marquis is another interaction designer who blurs the line between designer and developer. He is the
technical editor at A List Apart, where he curates articles by designers and developers to help educate the
design community. He has also spoken at several An Event Apart conferences. He chairs the Responsive
Images Community Group, a group that seeks solutions for images in responsive design. He is also an active
member of the open source community, helping other designers to move their work forward by building off
one another.
Karen McGrane
Twitter

For more than fifteen years Karen has helped create more usable digital products through the power of user
experience design and content strategy. Today, she manages Bond Art + Science, a user experience
consultancy she founded in 2006, where she has led content strategy and information architecture
engagements for The Atlantic, Fast Company, Franklin Templeton, and Fidelity. Karen is on the faculty of
the MFA in Interaction Design program at the School of Visual Arts in New York, where she teaches Design
Management, which aims to give students the skills they need to run successful projects, teams, and
businesses. She is also on the management team of consulting and venture capital firm Ignite Venture
Partners, serving as their VP of Digital. Karen is the author of Content Strategy for Mobile.
Mike Monteiro
Twitter
Mike Monteiro is the co-founder of Mule, a design agency renowned for exploring those dark territories
where content strategy, online identity, and cutting-edge web technology with classic, timeless design blend
together. Mike has written two books, Design Is a Job, and Youre My Favorite Client, in which he screams
to the world his love for hard work, self-awareness, and the importance of a good tailor. Designers around
the globe gave the love back for having been gifted with such a pivotal text for their industry.
Theresa Neil
Twitter
Theresa Neil is a User Experience consultant located in Austin, Texas. She has led the design for more than
100 web, desktop and mobile applications since 2001. Clients include a diverse mix of Fortune 500
companies, non-profit organizations, and local Austin start-ups. She co-authored Designing Web Interfaces
with designer and developer Bill Scott. Her experiences as a UX designer are chronicled at
theresaneil.wordpress.com and her work can be seen at www.theresaneil.com.
Don Norman
Twitter
Don Norman studies how real people interact with design, exploring the gulf between what a designer
intends and what a regular person actually wants. His work has resulted in some classic books, including
The Design of Everyday Things, which is generally considered to be a user experience classic.
Dan Saffer
Twitter
Dan Saffer is the creative director, new products at Jawbone, where he designs next generation products and
services for wearables and consumer electronics. He is also the author of many books on design, including
Designing Devices, and Designing for Interaction. His latest book, Microinteractions, was published in
2013.
Brenda Sanderson
Twitter
Brenda Sanderson is Executive Director of the 50,000+ member IxDA, the global network dedicated to the
professional practice of Interaction Design. Over 15 years as a practicing designer has taken Brenda through
design studios, print shops, daily newspapers, publishing companies and the advertising industry. She has
been recognized nationally for her design work and for her writing on technologys impact on the creative
field.
Bill Scott
Twitter
Bill Scott helped create the Yahoo! Design Pattern Library in 2006. His work on the pattern library has
impacted designers around the world since that time. Bill is a designer and developer, and his work has
included the creation of a 3D graphics library, wargaming interfaces for NATO, and many open source
projects. He co-authored Designing Web Interfaces with Theresa Neil, and is a frequent conference speaker.

Tools of the Trade

Interaction designers use a number of different tools to get their jobs done. Whether theyre 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 sampling
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.

Balsamiq Mockups

Balsamiq Mockups is an 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. Whats more, Balsamiq keeps their interface simple, using a hand drawn
style for elements and comic sans as a font face. This enables the designer and stakeholders to focus their
efforts (and their clients feedback) on interaction, by removing the extraneous design elements. Think of it
as an online version of paper prototyping!
Learn more about Balsamiq Mockups

InVision

InVision is a free web and mobile prototyping tool, for Mac and Windows. InVision is designed to facilitate
communication, and does so by integrating with Photoshop, Sketch, Slack, Jira, and other applications.
Designers can upload wireframes, and connect them via hotspots. Clients, stakeholders, and colleagues can
add comments directly on the design, and with LiveShare, InVisions real-time presentation tool, the app
enables live whiteboarding.
Learn more about InVision

Omnigraffle

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 offers a number of nifty
features, including: click-to-reveal functionality (for example, you can show how a modal box works),
sketching/bezier curves, etc.
Learn more about OmniGraffle

Patternry

No one wants to waste time reinventing the wheel. A good interaction library saves time and energy
designing or coding a common interaction, and ensures consistency across designs. Patternry is a tool that
allows teams of interaction designers to share and store their design and code assets in one central location
(i.e. the library). Whats great about Patternry is that its more than just a repository; it also provides a
starting point, with dozens of patterns for common interactions and modules.
Learn more about Pattenry

Sketch

Sketch is a design tool (Mac only), best used for icons or medium-to-high fidelity mockups. A lightweight
alternative to Adobe Photoshop, Sketch offers layers, grids, and artboards; in short, everything an interaction
designer requires to create wireframes and mockups with some visual additions. Want to get more out of
Sketch? Consider Zeplin, the Sketch plugin (currently in Beta) to allow for team collaboration.
Learn more about Sketch

Axure

Axure RP is arguably the best interaction design tool on the market. Boasting far more robust functionality
than Balsamiq, built-in collaboration and sharing, and the ability to easily convert a wireframe to a
prototype, Axure seems to offer everything. The one downside is that it perhaps offers too much, which
means it has a slow learning curve.
Learn more about Axure RP

UXPin

UXPin is a collaborative design platform that supports lo-fi wireframing to hi-fi animated prototyping.
Designers using Photoshop or Sketch can import their work for layered prototyping, then get feedback from
their team and other stakeholders. UXPin facilitates interaction design with dozens of built-in interactions
and a custom animations editor. The tool also includes usability testing and live presentation functionalities.
Learn more about UXPin

Associations
An interaction designer is still an IxD whether or not they belong to any particular group. Still, finding other
designers is a great way to network and learn from others in the field. All of these associations are available
across the United States, and some exist internationally as well.

IXDA
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.
More information available at: http://www.ixda.org/

AIGA
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, and host events ranging from Photoshop Layer Tennis, to art exhibitions.
More information available at: http://www.aiga.org/

Meetup
To be fair, there is no one Meetup group. Thats the beauty of it: search interaction design in your city on
the Meetup interface or go to http://ia.meetup.com/, and youll find any number of networking groups,
educational groups, and social groups. If you happen to live in an area where an Interaction Design (or User
Experience Design) meetup doesnt yet exist, nows the time to start! As it happens, Meetups interface also
makes it easy to start a new group.
More information available at: http://www.meetup.com/

Books
The list of books relevant to interaction design could span many pages by itself. Here, weve narrowed the
list to just a few iconic books. If youre really itching to expand your library, though, check out our
recommended books for your user experience library.

Designing for Interaction: Creating Innovative Applications and Devices (2nd Edition)
Dan Saffer
Dan Saffer takes a look at the world around us, and the interactions we experience every day. His book
opens up the design world, and lays it out in an easy-to-follow way. Designing for Interaction is
simultaneously a book of examples, and a how-to for creating usable products and design strategies.

Designing for the Digital Age: How to Create Human-Centered Products and Services
Kim Goodwin
In Designing for the Digital Age, Kim Goodwin takes the bull by the horns: we as a culture need to accept
that all of our products and services have been made more complicated by their technological constraints
and opportunities. No matter how much incredible functionality is possible, we cant ignore the possible
confusion the digital realm brings to our users. Goodwin explores the benefits and challenges designers
face, and offers processes and activities to offer better experiences, without complications.

Designing Interfaces
Jenifer Tidwell
Over the years, Designing Interfaces has become so ubiquitous it has become known by its nickname, the
book with the bird. But its popularity is for an excellent reason: Jenifer Tidwell explains best practices,
provides rich examples, and leaves the reader with enough methods and guidance to inspire future designs.

Interaction Design: Beyond Human-Computer Interaction

Yvonne Rogers
Now in its third edition, Rogers book offers a look at how we design, both technically and ethically. Each
chapter helps provide a foundation for how to design interactive products that enhance and extend the way
people communicate, interact and work. The book includes case studies, examples, questions, and insight
into future trends.

The Design of Everyday Things

Don Norman
The Design of Everyday Things is a classic. It is the book that changed design from a nice-to-have into a
necessity. In it, Don Norman exposed the value of usable, intuitive design in every facet of our daily lives.
He outlines a series of rules to follow, in order to create simple, usable products and effortless experiences.
Dont Make Me Think, by Steve Krug
A short but robust book, Dont Make Me Think is both a fun read and informative. In it, Steve Krug covers
the basics of designing interactions that are user-proof. Krugs experience as a usability consultant provides
him with plenty of real-world examples and concrete solutions to problems every interaction designer has
come up against.