Complete Beginner’s Guide to Interaction Design

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.

IxDA

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.

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

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.

Affordances

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.

Learnability

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.

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.

Notable Interaction Designers Back to top

Cennydd Bowles

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

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.

Checkout Nathan’s company, EightShapes, or his personal/professional blog.

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

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

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

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.

On Twitter


@Cennydd


@nathanacurtis


@maxvoltar


@theresaneil


@billwscott

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

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.

Learn more about Balsamiq Mockups.

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 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.

Learn more about OmniGraffle.

Adobe InDesign

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.

Learn more about InDesign.

Moleskine

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.

Learn more about Moleskines.

Related Resources

Mockups To Go

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.

A Google Wave mockup on Mockups to Go

OmniGraffle Wireframe Stencils

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.

Stencils lend affordances to OmniGraffle diagrams

EightShapes Unify

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.

Unify offers consistency to your UX deliverables.

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.

Markers, Paper Templates, etc.

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.

Linking your sketches together gets everyone on your team involved.

IxEdit

Interaction Designers creating a rudimentary xhtml/css/javascript prototype of an interaction might speed up their process by using this in-browser tool for visualizing interactions. IxEdit is a self-described “JavaScript-based interaction design tool for the web. With IxEdit, designers can practice DOM-scripting without coding to change, add, move, or transform elements dynamically on [their] web pages.”

IxEdit allows for in-page prototyping

Associations Back to top

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.http://www.ixda.org/

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. 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.

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Good article. I’m assuming you’ve read Donald Norman’s “The Design of Everyday Things”? In it he mentions affordances and even uses the scissors example. Good stuff if you’ve not read it. Thanks for sharing.

  2. This is just the article i was looking for !thank’s UX booth i think im in love with UX ! but what about Jesse James Garret book, the elements of user experience ? i want to get one !

  3. Great Overview Andrew! This is going to prove very helpful to many readers… bookmarking this one for good reference…

    Thanks again for another rocking article!

  4. great article! as a beginner web designer i have always wanted to explore more in the fields of interaction design :D you’ve just given a number of precious resources that i just need! thank you so much! :)

  5. Good show Andrew. Good show indeed.

    Great bridge article for those think designing for the web (and smart mobile) is just about getting the latest CSS or coding techniques under their belt.

    There’s so much more. Thanks!

  6. Thanks for including me in the list!

    Bill Scott and I have a joint blog at http://www.designingwebinterfaces.com/posts and a new tumbleblog showcasing the best Rich Internet Applications at designgalleria.tumblr.com

  7. Absolutely fantastic post, definitely made me think about basic interface design. A lot of qualities of interfacing could be extended to so many other areas. Thanks for a great post!

  8. How did you arrive at the list of notable designers? I mean: notable for what reason? Have you seen their work?

  9. Skilled none the less, I have heard of not a single of those “famous” interaction designers mentioned. I have worked with ixd aka interaction design (not to be confused with webdesign) for 14 years.

    I recommend http://www.johnnyholland.org – one of the best article blogs on ixd.

    • Hey there! I arrived at the noteworthy list while researching this article (and passively in my work as an interaction designer). Before most of my posts, I go through a good day or two of research. If it’s not something “factual” I’m looking for but, rather, something more esoteric, I’ll typically send out a lazy tweet or two asking for suggestions (In fact, I did that for this very post). If you’re itching to help out with my next post you can follow/reply to @andrewmaier (me) or @uxbooth on Twitter. Or, if you’d rather write your own post and share it with the community, head on over to http://uxbooth.com/contribute to see our submission guidelines.

      Thanks for reading!

  10. I agree with this post 100%. It’s great to see other companies preaching the same things. I try to sit with my clients and make them understand this because if they have an education early on it can help with future decisions.

    My biggest thing with interaction design is justification. If you can justify the importance of an element I will allow it to stay.

    Treat your website as a constitution that constantly grows and evolves.

  11. Hi, thanks for including me on your list of Notable IxD’ers!

    Just FYI that the bio you have of me is out of date. Ping me and I’ll send an update. I left Involution early 08, and currently consulting in the valley for clients like Netflix (met Bill Scott in fact, a great guy), Citrix, and Linked In. Thanks again!

  12. I feel privileged to be on the ‘notable’ list, thanks guys.

    I’d recommend listening to folks like Dan Saffer, Nick Finck, Chris Fahey, Donna Spencer too. Whether they’d label themselves interaction designers I don’t know – but I do know they’re smart folks doing interesting stuff in the field.

  13. I had to laugh. A post about interaction and design in a site that requires horizontal scrolling at 1024px and has zero left margin. haha, that was funny!

    • Hey Craig, you’re not the first to notice this! We’ve got a bug list that we’re getting to as time allows. Thanks for your patience.

  14. Cennydd, you have no idea what you are talking about.. no one should ever listen to me :P

    Cheers,
    - Nick

  15. Dan Saffer has my vote too. Ignore his website (tis a bit ugly :-), just read his books.

    Lot more to being a good designer than having drawing talent or crazy widget ideas or mad Flash skills;

    Being able to herd cattle, drag feedback out of people with tonsil-pliers and get everyone excited without resorting to LSD. Being able to throw out ideas, good and bad, to keep at it, wittle it down, keep everyone invested … that’s most of the job.

  16. Tremendous article. One of the best I’ve read on any design-centric blog in some time. Stumbled here from Smashing Mag and UXBooth will forever be bookmarked from here on out.

  17. “interaction designers are (typically) only concerned with the interaction between users and computers”
    How did you arrive at this conclusion? It is not in the Ixda definition you quote. See also David Malouf post on The essence of Interaction Design here: http://davemalouf.com/?p=1744

    • Nurit,

      I think that the quote you pulled from my article has the same problem as the quote that David analyses in his own blog post: it’s without context.

      I arrived at the conclusion that interaction designers generally design software interfaces because that’s where I see our technology-centered culture heading; with the ubiquity of the internet and mobile technologies, interaction designers are (by and large) called upon to sort out the boundary between users and software.

      The IxDA’s definition is worded in such a way that it applies to an immense variety of products and services––and rightfully so, it’s on their website to the interaction design community at large.

      This article is unique because it primarily focuses on web-application-based interaction design–I give that disclaimer upfront. While I appreciate your comment––it’s a welcome addition because it brings some perspective to the guide as a whole––I still feel that the article itself is appropriate to beginning interaction designers reading UX Booth.

  18. I’m glad you mentioned the importance of staying current. True to any industry! =)

    And thanks for the link to my sketching article, Andrew. Much appreciated!

  19. Wow Andrew! I don’t think I’ve seen such an awesome article in a long time. All of your points are so well thought out and very well explained.

    Thanks for an awesome article!

  20. Hmm… It starts by saying that most websites today are interactive, which just isn’t close to true. Then it seems as though you’re advocating following the lead of a few notables. iow, let them reinvent the wheel then watch and do what they do, which is kind of how it’s been since people were drawing on cave walls (They always seem to have a similarity don’t they?)
    Don’t get me wrong, I think this is all good. It’s important that each new generation of designers try to reinvent the profession in order to stay fresh, and current, and relevant, and whatever. But it’s also interesting that for all the new tools and outlets, the impulse and the thought process remains generally the same. Good article.

  21. Hi Andrew,
    I actually think this is both a great piece and well a very myopic one at the same time. But I’m not going to concentrate on the good stuff bc well people already did that.

    Titles frame more than disclaimers do and while it is clear you are speaking about “web design” your framing and title make it sound like IxD is limited to web design which when speaking to “beginners” as you are is a tad irresponsible. If I google and find this piece and I’m a phone designer, I might be put off by this piece and thus put off by IxD and think that IxDA (which you reference) is only for web interaction designers.

    But I’ll even take this a step further. Let’s say you even changed the title to “Interaction Design for Web Designers”. That in itself would be a GREAT improvement, but also misleading in a way from the other direction in that you’ll be limiting readers to think that the scope of their work in interaction design even in the sphere of ‘web design’. That just isn’t true. It is this myopic viewpoint that will relegate way too many of the folks who read UXBooth to fall under the camp of UXers that Jon Kolko is taking to task (despite Peter Merholz’s protestations). (link here: http://tr.im/GCOO)

    Your definitions and framing of IxD are very old school is I guess what I’m saying. In a recent framing of IxD’s path in this piece–http://davemalouf.com/?p=1720

    You account for steps 1 & 2, but you stop there and don’t account for step 3. By only being about goals and the confines of communicating between user and machine you miss the real opportunity and promise of IxD. Further, as Dan Saffer (I can’t believe you wrote a piece about ixD and not included him, or Verplank, or Kolko or Fabricant or Crampton Smith or, or, or …) that IxD is much more about human to human connection mediated through technology than about human to technology. Your definition is really just UI Design.

    So while this is a solid attempt to frame Interaction Design for the Web, it is actually incredibly short-sighted for THAT medium and does an strong injustice to IxD more generally beyond that medium.

    When is the UX/Web Design community going to end the myopia in this community.

    Andrew, come to IxD10 and really see the breadth and depth of what IxD is all about. For the Web, and MORE!

    Sorry to be so harsh, but this and the reaction to Kolko’s piece have been the piling of some straws on this camel’s back w/ this community. Allowing stuff like this to go uncountered is not OK any longer.

    And this response missed a lot of other points that can be talked about in this piece.

    I suggest better is to just point people to Dan Saffer’s Designing for Interaction, Bill Moggridges Designing Interaction, Bill Buxtons Sketching UX, Todd Zaki Warfel’s Prototyping and Jennifer Tidwell’s Designing Interfaces.

    Would be better!

    BTw, I like the design of your blog (which I normally don’t get to see through my gReader view of the world.)

    • Dave,

      Thanks so much for your detailed response to this article. It’s inspiring to get this kind of a reaction.

      I myself am a student of the community: blogs, videos, websites, meetups, consultants, etc. The messages which I receive I compile into these articles. So in that sense, you’re correct in saying that this article presents a more-or-less myopic view of IxD. Unfortunately, that’s just the nature of writing based on personal experience. I also filter out concepts that I think don’t appeal to our community, etc. There are a lot of compromises that have the be made in generating an article like this in a timely manner. So by no means should anyone take this kind of article as the end-all-be-all of interaction design.

      I left out designers (such as Dan Saffer) not because he isn’t important, but because he wasn’t visible to me. His work most certainly informs my practice, but he’s farther up the “family tree” of interaction design. In fact, I’ve heard the name but I don’t know his work in any literal sense. Just like Don Norman. These people have made many worthwhile contributions to the field, but they are invisible to me on a periodic basis.

      I’ve used the community members/tools/books that I’ve listed as jumping off points for my career, others can benefit from that as well. This article was created to serve as a resource for our community.

      After some thought and schedule juggling, I *do( plan on making it out to Interaction ’10 this year in Savannah, GA. I hope to see you there. If not, would you be interested in chatting about Interaction Design outside of this comment log?

      Thanks for reading and commenting.

  22. Great resource for beginners. Thanks for putting them all together

  23. Great article, thanks for posting!

  24. Liked the bit about IxEdit – new text editor I’ve never heard of before!

  25. Thanks for very informative article!

    I’d like to move my career more towards interaction design, so I’m researching what skills and knowledge should I gain.

    Thanks :)

  26. Great article, I found much inspiration in this. Thanks for sharing ;-)

  27. Thanks! It ‘s good information for me.

  28. Great article for beginners. Thanks a bunch.

  29. Thanks for this post. Great resource for me

  30. Thanks for sharing information.

  31. Great resource for beginners.

  32. You are definitely a skilled writer. You definitely know how to write to keep the audience engaged. Cheers

  33. Very interesting comments. And quite a good article. :)

  34. Great resource for beginners. Thanks for this article.

  35. Great articles, Its really gives a lots of inspiration for us

  36. That’s very useful for me and other beginning. Thanks.

  37. It’s Great resource for beginners. Thanks a lot.

  38. Thanks for your post, info and hard work.

  39. Great article and very useful article. thanks for share this post.

  40. Just wanna say thank you for this article.

    I’m going to recommend this as a mandatory reading to all of my students. For sure!

    Thanks!

  41. tabasum July 29, 2011

    Helpful for beginners..thanks for sharing.

  42. Love the interface magic portion. This is a great intro. One of our blog posts is certainly less detailed, but maybe a good segway for the student who can’t yet keep up with your post..

Related Posts