When users open a website or app, they first notice the obvious design elements: logo, colors, icons, illustrations, and imagery. While these elements do contribute to the overall user experience, they are actually pieces of a larger puzzle: interaction design. This concept can be more subtle to end-users than a flashy, new homepage, but it is essential in creating an engaging, intuitive digital experience.
What is interaction design?
Interaction design is about facilitating interactions between users and products (most often, those products are apps or websites). According to the Interaction Design Foundation, “the goal of interaction design is to create products that enable the user to achieve their objective(s) in the best way possible.” In other words, interaction designers are responsible for creating every element on a screen that a user might interact with, whether through clicking, swiping, tapping, or some sort of action.
The five dimensions of interaction design serve as a helpful model to understand what it involves. First introduced by Gillian Crampton Smith, an interaction design academic, the model only included four dimensions. Kevin Silver, a senior interaction designer at IDEXX Laboratories added the fifth.
1D: Words should be simple to understand and should communicate the right amount of information to the user (too much detail can overwhelm, while too little information can cause confusion).
2D: Visual representations, like images, typography, and icons, should supplement the words to communicate information to the user.
3D: Physical objects or space refers to the actual hardware and objects that a user interacts with. For example, are they using a smartphone or a laptop with a mouse? And where are they, at their desk or on a crowded subway?
4D: Time refers to how users might measure progress, with sound and animation for example, as well as how long they spend interacting with the first three dimensions.
5D: Behavior was added by Kevin Silver and includes how the previous dimensions define the interactions of a product. It also includes the reactions of users and the product.
Related: 6 reasons why UX designers should explore gestural interaction
10 examples of interaction design
What does design interaction look like in real life? Here are some of our favorite examples found on Dribbble.
By Jony vino. Splitting the bill with your friends isn’t always as easy as it seems, especially if you’re more of a visual person than a numbers person. This app concept lets you input the total bill, select the tip percentage, and then see how much each person will pay. The best part? Instead of manually adjusting each person’s part and having to constantly update everyone’s share, you can simply resize each person’s section in the app and the numbers will automatically recalculate for everyone.
By Prem Gurusamy. On most e-commerce sites, you have to navigate to a completely different part of the website or app to view your cart. With this interaction, you can instantly see your items “fly” into your cart as soon as you click the “Add to cart” button. The cart continues to visually surface your items, even as you explore other parts of the site.
By Igor Pavlinski. Social media apps are notorious for information overload, showing you all the top stories, trending videos or articles, and breaking news at once. This concept for a new social media app puts the control back in the user’s hands, organizing content by source (like YouTube, Vimeo, Twitter, or Reddit) and letting you choose which channel to explore. This card-like layout also eliminates the need to jump between apps to consume your favorite content. Instead, it’s easy to alternate between sources within the same experience.
By tubik. There are a million and one ways to customize your burger. And when you’re ordering on your smartphone, selecting each individual ingredient on a small screen can be an exercise in dexterity. This UI concept for the Tasty Burger app simplifies the ordering experience by bucketing ingredients by type. Instead of displaying a long list of every possible variation of cheese, produce, meat, or bun, you first click the category of ingredient (like cheese) and then you are presented with the different types, like gouda or comte.
By Rahul.Design. If you’re house hunting and can’t see the property in person, the next best option is to get a virtual tour. This concept for real estate app, Spec, leverages our natural behavior when looking at a new space. You can click into any room, like the kitchen or living room, and move your phone to get a 360-degree view. It’s easy to switch between rooms with just a single tap.
By Forest Plasencia. Filters offer a powerful, easy way to surface different slices of information. But, the problem with a lot of filter interactions is that they open a popup or new page in the app, hiding the very information you want to filter. This micro-interactions keeps everything in the same view, even when you do filter. This way, you can see the data change instantly when you select different filtering criteria.
By Dmitro Petrenko. It’s easier than ever to arm and monitor your house thanks to smartphone apps, but between 94%-99%
Related: Creating a tool that records user interactions
By Gil. This simple page interaction improves the user experience on-site and helps the company keep visitors on their pages, longer. The main purpose of the site is to showcase how these properties can be used in nature, as an office, and as extensions. Instead of creating separate experiences for each purpose, this page mimics the user flow of comparing and contrasting the different uses, and seamlessly bouncing between them.
By Dominik Martin. Interactions don’t need to be bold and noticeable to make an impact. This app concept simplifies a behavior that we all despise — picking our country of residence from a long list. Instead of having users scroll through the list and find their country, this micro-interaction first has you pick the first letter of your country and then find it from a much smaller, focused list of countries.
By Mykolas Puodziunas. More and more retail sites are making it easier for you to “quick view” an item, rather than clicking into every detail page and then having to back out to the search results to browse more items. This concept takes it one step further and lets you view each product in its different available colors, without having to leave the category page.
Did we miss your favorite interaction design example? Share it with us on Twitter: @InVisionApp.
Emily has written for some of the top tech companies, covering everything from creative copywriting to UX design. When she's not writing, she's traveling the world (next stop: Japan!), brewing kombucha, and biking through the Pacific Northwest.
