Today’s question comes from S. Mitra, one of the 10,000+ students taking my User Experience Design Fundamentals course on Udemy.
Q: In principle, I understand why Interaction and Interface design may be worded differently, but am having a bit of a difficulty getting head around the difference between them. For example: when I have an entire wireframe complete with planned functionality waiting for the visual design to sit on top of it, is that interface or interaction?
A: This is an excellent (and very common) question. Here’s my quick take on the difference between the two:
Interaction design is concerned about how the person interacts with what they see on the screen – whether they know what to tap, swipe or click, and whether what happens meets their expectation and moves them closer to their goals. Interaction Design is all about figuring out how people need to use what you’re designing, and what cues (cause & effect) you can give them so they know how to take action. The bulk of interaction design efforts have nothing to do with final colors, fonts, styling, etc. The focus is on the flow of tasks, sequences of events and making sure there are appropriate visual cues that direct and guide the user in those activities.
Interface Design is the visual styling on the screen. What things look like, how they’re arranged and how they relate to each other visually in terms of hierarchy. Font choices, color schemes, graphic elements, button and menu styling all fall under the umbrella of interface design. It’s worth noting that even though the heavy lifting of how all of this gets used has already been decided, visual/interface design decisions can often prompt design teams to reconsider those things that seemed finalized.
Put another way:
- Interaction design determines what’s on the screen and how people use those elements.
- Interface design determines what those elements look like.
The thing that connects the two is this: the visual decisions you make in Interface Design — fonts, colors, button styles, page layout — either support your Interaction Design decisions or work against them. Visual design can make it easier for people to understand what things on the screen can be clicked or tapped or swiped. And used improperly, it can also hide those same opportunities to interact and leave people not knowing what to do.
Let’s belabor this a little further (because that’s how I roll). Assume there are three actions a user can take on a screen. But only one of them is the primary action, the main thing they are there to do. So in this case, the battle of interaction design vs. interface design plays out like this:
- Interaction design means you decided there are three possible actions.
- Interface design tells the user which one is the most important, or most likely to be the one they need.
In your example, the wireframe you have demonstrates interaction, and is the result of your thinking through how you want the interaction to happen. That’s interaction design. The visual design you’re waiting for in that same example, maybe a flat Photoshop PSD file, is the visual interface design. The relationship between the two is proof that while these may be two different things, they are absolutely dependent on one another in order to produce a successful outcome.
. . . . . . . . . . . . . . . .
If you’d like to get more advice from me every month on UX, UI and Product Design + Development topics — in the form of training videos, full-length courses, e-books, downloadable templates and more — check out my NEW online school, the UX 365 Academy. Every month I publish new content, and you also have access to every course, book and training video I’ve ever created — some of which have never been published online before now.
