Interaction design, in its basic form, is designing interactions between customers and products. The end goal is to create products that allow customers to achieve objectives in the best way possible.
But the concept isn’t exactly new.
Product design has always been a matter of exploring consumer behavior. Before product designers create, they explore how people are likely to use their products first, the aim being to improve their experience.
Take the evolution of the computer mouse for example. It had a trackball to move the cursor on the screen. But it couldn’t work as smoothly on all surfaces. You needed a mousepad for it. To solve this problem, someone came up with the optical mouse.
Similarly, in mobile and web app development, interaction design means designing how users engage with software products. In web design for example, this involves creating an interface that engages with logically thought out behaviors and actions.
In the larger context of user experience design (like human centered approach which involves everything from user research to creating user personas and usability testing), interaction design plays a vital role in shaping user experiences.
And in this article, we are going to share 15 interaction design tips to help you create an amazing user experience for your audience. Let’s begin.
1 – Give High Perceived Affordance
Design is not just what it looks and feels like. Design is how it works – Steve Jobs
In reinterpreting the concept of affordances, cognitive scientist Donald Norman says, “it is the properties of objects that determine how they are to be used.” An object with high affordance therefore, would leave no question about its usage once a user lays eyes on it.
Similarly, if you expect users to use interactive elements like buttons or scrollbars in certain ways, these elements need to look and act in a way that indicates their functions too.
Consider an arrow placed on a screen of a mobile app. Would a new user know how to use it? Probably not before you accompany it with something that indicates what it’s for; a clue to make the interaction clear. Should it be tapped? Or should it be swiped?
2 – Remove Obstacles to Smoothen User Flow
The goal of refining interactions within web or app interfaces is to make the user experience free from obstacles. Anything in your interface that may frustrate users is an obstacle. The absence of feedback is one of them.
Users expect a response to their action to assure them it was acknowledged.
The action of hitting play on a video in Facebook, for example, should trigger a reaction, such as the play button turning into pause. Similarly clicking on a search bar should be indicated by a blinking cursor so that the user knows he can start typing.
3 – Keep it User Centric
People ignore design that ignores people – Frank Chimero
Designers can create better apps if they make user centricity a focus in app development processes.
In fact, you may already be doing it. Think of the unique challenges that your audience face and design interactive elements around it.
For example, if you have an international audience, you should consider translating your content and icons in multiple languages. But if that is too expensive, try using universal symbols wherever possible, such as a + sign for the word ‘add’ or an envelope icon for ‘email’.
4 – Keep the Experience Predictable for User Comfort
Bad interactions in design keeps users guessing by leaving no visual clues on where to go next, whereas good interactive design is invisible and keeps users in the know by being predictable.
To illustrate, ask yourself questions that a user normally would when he lands on your application.
- How can I get the most out of this application?
- Where do I need to go from here?
Designing interactive solutions around the answers to these questions gives users a better idea of what to expect from your product and predict the outcomes of their interactions. The answer to the first question can be a walkthrough to educate users on what they can do.
5 – Minimize Cognitive Load to Keep the Experience Intuitive
When you swiped through an image carousel for the first time, did you have any trouble using it again? No, because you had already learned it.
In his TED talk The First Secret of Design is…Noticing, tech entrepreneur Tony Fadell said, “As human, we have limited brain power. And so our brains encode the everyday things we do into habits so we can free up space to learn new things.”
This is why once we learn to do something, there is a high probability that we will be able to do it again. The experience becomes intuitive. And it becomes intuitive because we don’t have to remember how to do it over time.
To keep interactions intuitive, limit them. Show only meaningful and important information that users need to move ahead. This way, they don’t have too much information to process and the experience becomes smoother.
6 – Focus on Microinteractions too
The details are not just the details. They make the design – Charles Eames
The features of your product attract users. But it is the little details that keep them there and coming back for more. These details are known as microinteractions.
Microinteractions can be functional. They can also serve a higher purpose. MailChimp for example, uses light humor to ease tense situations with animated confirmation views for sending email campaigns.
Instead of focusing on these mini interactions till the end, give them their due. They might not be what people are using your product for, but executed well they can be a source of delight.
Consider Facebook’s “Like” button, a microinteraction that was so effective, that people now relate its image with the brand.
7 – Design for Readability
A good web design is readable. Typeface needs to be visible enough to draw the eye. Contrast works best in this case. Use color contrasts, like black text on a simple white background, to make the text stand out.
The Facebook web application uses dark text on a white screen and keeps its signature blue for its logo and header. CTA (call to action) icons like “Post” (white text on a blue background) are also in contrasting colors . You can read the text easily even when viewing the website outdoors under direct sunlight.
8 – Make your Interactions Quick
Good UI design gives users a comprehensible sense of power that consistently helps them feel in control – Jim Nielsen
If you want users to respond or feel as if they control the experience, your interactions need to be instantaneous. In his article “The Power of 10s”, Jakob Nielsen states that if it takes longer than a second for your interface to respond to users, they will feel less in control of the experience.
Giving instant response to an interaction will give users the feeling of their actions causing an effect on the screen. Consider a sliding side menu on a mobile application. Doesn’t it feel as if you are pulling the menu out with the thumb yourself?
9 – Make your Copy Speak
Communication is the foundation of interaction design. Just as interactions like touch screen gestures and finger swipes can accomplish what the written copy could not, words also have a purpose in design.
Consider the copy on AirBnB’s website. It uses minimalistic text on search fields to communicate the convenience of their services for travelers.
Looking for high quality UI designers?
Our award winning design team is experienced, collaborative and agile. Whether it’s for the web, mobile or other, we’ve got you covered.
10 – Don’t Break Mental Models
Don’t make me think – Steve Krug
Users expect interactions to perform in certain ways. Design elements according to what they are already familiar with. They have already developed an understanding of how certain functions work.
A clock application, should only show the time and maybe incorporate an alarm system, but not a calendar. Similarly in a web application, users will usually look for the menu icon at the top left and the logout icon at the top right corner of their screen.
11 – Put your Interactions on Paper
Ideas are pleasant illusions. It isn’t unless you try to flesh them out that you start noticing gaps in their practicality.
The same applies to interaction design. To ideate interactions more effectively, put them down on paper. These can be sticky notes on a board detailing different possible interactions your users may want in your interface.
A design thinking approach works best here. By focusing on how users would naturally browse through interfaces, you can map interactions better.
For example, a possible user flow and interactions of a social networking app that allows people to post recipes might look something like this:
- User signs in: Interaction can be a sign in button
- User looks for posts to share: Interaction can be a scrollable newsfeed
- User wants to share a post: Interaction can be a share option underneath each post
12 – Validate Actions Early by Prototyping
Designers shooting for usable is like a chef shooting for edible – Aarron Walter
Once you have mapped out interactions that must go in your design, the next step is to prototype. Prototyping lets your users explore the network of interactions (like buttons and icons) before you can put in the work to design what happens during engagement.
Prototyping also reduces the chance of major redesign if users find problems during testing.
13 – Keep Interactions Indicative of Actions
Good interactions are easy to identify and invite action. A “scroll to top” button for example, is indicated with an arrow which indicates this action. The call button on your smartphone features a phone symbol.
To keep interactions visible, design them in a way that makes users predict what their results will be. Drag and drop actions, for example, can be indicated by a ghosting effect during movement.
14 – Keep the Platform in Mind
There are several reasons why users select specific platforms. Maybe they like using the customized tools offered by Android phones or the simpler navigation options in iPhones.
To make your interactions work well on all platforms, match them according to the unique interaction and interface guidelines of each.
15 – Aim for Visual Clarity
Good design is a lot like clear thinking made visual – Edward Tufte
Last year, Facebook updated their Like button to six different emotions called ‘Reactions’. With this update, there are six different ways for us to react to a post instead of being confined to one as we were previously. These reactions are effective, and most importantly, they clearly express emotions and intentions.
Interactive elements like icons and images communicate intent more clearly than words or additional lines of code. Consider showing a checkmark to indicate when an action has been completed to explain the function without taking up too much space on the screen.
Need to craft a memorable user experience?
We’ll collaborate with you to build a user experience that addresses the specific needs of your product and its end-user.
Wrapping Up
Designing interactions may seem easy; but a lot of thought and hours of effort go behind everything from a swipe gesture to icons and other interactive elements. Keep these tips in mind to get a head start on designing interactions for your product.
For more inspiration on designing effective user experiences, check out how you can use anticipatory design to create amazing UX.
