Home > Prototyping and wireframing > Interaction design: a guide for beginners

Interaction design makes it possible for users to communicate with your product via the interface. It’s crucial – and tough, but not impossible!

Here at Justinmind we love interaction design, but we know that it isn’t the easiest field to get into. There are so many different things to consider when designing any given interaction, how can a beginner designer hope to hit all the boxes that dictate what makes a good interaction design?

We decided to put together a guide on all the top best practices so you can offer your users the best possible experience. Give this a read, and get ready to create a product your users can understand, enjoy and love!

What is interaction design?

Put in simple terms, interaction design aims to orchestrate how humans interact with machines – or how your users will interact with your product. The product or machine could be a website, an app or the machine that makes your much-needed coffee during your break.

Use experience design diagram with interaction design - explanation
From Sohaj Sing Brar.

Here is a definition we love, from IxDA:

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

Is interaction design the same as UX design?

Not quite. Like information architecture, interaction design is a part of a bigger and broader thing – that thing is UX design. Finding concrete definitions of both terms is tricky, as they are relatively new concepts. Interaction design, for example, only became a thing in the mid 80s, when Bill Moggridge and Bill Verplank coined the term. In broad terms, UX design involves a bigger picture of the product while interaction design focuses on how people can interact with the product via the interface.

As a UX designer, you’ll worry about the look and feel of the buttons, user research and scenarios, and plan the actual user testing. In contrast, as an interaction designer, you’ll focus on the specific actions and reactions between user and product.

The ultimate goal of interaction design should always be to help users do what they want as easily and as quickly as possible – which can be surprisingly tough to do.

The 5 dimensions of Interaction design

First brought to you by interaction expert Gillian Crampton Smith, and later expanded by Kevin Silver, a senior interaction designer. These are a great point of reference so we can all understand how your product can communicate and interact with the user, in simple terms.

01. Words

The words and copy in your interaction design are a potent way to communicate with the user – as long as your user understands you. The tricky part about the words inside your product, is that you can’t guess what your users know. Are they familiar with the terms you use on a regular basis?


Design meaningful interactions with Justinmind

Download free


The safe and recommended option is to drop all the tech vocabulary and focus on words that your users are already familiar with. This is important, because it makes it possible for the user to use your product enough to explore it, as well as making your product easier to learn how to use. But we’ll get to learnability in a few moments.

02. Visual representations

The other visual elements in your product are just as important as the words you use. Even more so than words, visual elements are something we can see, register and understand in a split second. These representations can include icons, shapes, backgrounds and etc.

GIF explaining composition of 5 dimensions of interaction design
From the Interaction Design Foundation.

The cool thing about the visual representations in your product is that people already have many visual representations embedded in their long term memory. This is the case for widely used icons, such as the notification icon. That means your product will have an easier time being understood by its users, as you won’t need to explain what that icon does.

03. Physical objects or space

These are the tangible things your user can use to manage and use your product. These could include the actual hardware of any computer, the mouse, screen (mobile or computer), game controller or keypad.

Along with words and visual representations, these 3 dimensions are the building bricks of your product’s interactions with any user. They are the tools the user and the product need in order to engage and complete the goal – which is always to get the user to achieve their goal.

04. Time

This is a dimension that many designers struggle to grasp at first. This dimension relates not just to the time users spend on your product, but also any effects the user can detect. This includes any sounds, vibrations and animations – all the other roads of communication you can take while the user interacts with your product.

05. Behavior

This last dimension was later added to the 5 dimension model by Kevin Silver, and is often confused with the 4th dimension. That is understandable, as the two overlap in a few characteristics. This dimension regards the form in which interaction design takes place, the flow with which any action unleashes a reaction.

Principles for interaction design: the usability classics

These principles are the base on which all interaction and user experience design have their foundations. They are classical, because they relate to how humans act and understand digital products, be they web products, mobile apps or the dishwasher. This is about man vs machine – or rather, how humans can cooperate and work with machines, to our benefit.

Interaction design for good discoverability - navigation bar
Design by Aaron Iker.

Discoverability

Discoverability refers to how easily someone who has never used your product can find the different features it offers. This is a major aspect of good usability and interaction design in general, because the first impression your user has will be the most important one.

Having an overly complicated interface or poor information architecture will confuse new users, increasing the risk of them abandoning your product – and wasting all the time and effort you put into it.

One of the reasons why improving discoverability in your product is challenging is that as the designer, you’re closely familiar with the product in all its glory. It can be difficult to imagine meeting that product for the first time, to try and use it while knowing nothing about how it works.

Homepage with good navigation - interaction design example
Design by Johny Vino.

The best way to ensure your product has a good level of discoverability, is to dedicate time to creating an interface that users can turn to for guidance. Create navigation routes that are logical and easy to find, rather with buttons the user can press to go straight to the main features or an action bar.

Make sure all the most important buttons that are necessary for the user to use the product are within reach – even if they aren’t always visible on the screen. A simple touch on a blank area of the screen could be enough to bring those buttons and icons into full view.

We also recommend you analyse your discoverability in user testing sessions.You can do this by creating early prototypes and conducting user testing at several stages of the prototype.

Consistency

People’s brains are wired to dislike change. Your product needs to deliver a uniform experience to the user, ensuring the interaction design is consistent – this means that all icons should follow the same lines in terms of both design and behaviour. Your interface needs to be the same across all features, so that the user can get familiar with it as a whole.

Interaction design consistency example - coherent icons
From Aleksandar Savic.

Users will make assumptions about your interface, and you need to make sure their assumptions are proven right the more they use the product. This is important for making your product more discoverable, increase learnability, reliability and overall user experience. You want users to grow so familiar with the interface, they can predict how it will behave even if they have never used that certain feature before. Your interaction design must follow in the same lines throughout the entire product.

There’s no need for all your icons to be the same. Your creativity can still have fun with the design, as long as you make sure that once you pick an icon for an interaction that all of the same interactions work with the same icon and in the same fashion. This way, you’ll end up with a product that is logical and altogether easier to use. Your users will appreciate it!

Learnability

This one is closely related to the concept of discoverability. Learnability refers to how easily users can learn to use your product to its full potential. Together, these two will dictate how fast and easily users can get familiar with and use your product.

When it comes to interaction design, your main concern is how to get the user through the initial learning curve that comes with any new product. Making your product easy to learn (and discover) becomes more challenging when designing products for mobile screens – so much to explain, so little real estate!

You should try to analyse how much effort users are willing to put into that learning curve, how long they are willing to try before they put down your product and move on to something easier. There are several factors that influence that effort users are willing to make – such as how much users invested to get your product, how much they need it or how often they plan on using it.

Readability

This principle regards how your content is displayed and how easily your users can read it. Having your content organized properly is a way to allow your users to scan the screen looking for the piece of content they want.

That includes considering everything – from how many lines each paragraph ought to have, use of negative space or proper line spacing. The goal here is to allow every user to run their eyes through your page or screen and understand what the general message is, without actually reading the content. A study carried out by the Nielsen Group found that users tend read only about 20-28% of all the written text on your webpage – that number is enough to give any writer goosebumps.

This may have a slightly dimmer relevance to interaction design in comparison to its big brother, UX design. Regardless, it’s still worth knowing that you can’t really rely on the written content in your product to get the message across – which makes the need for coherent and logical interactions so much greater.

readability example within interaction design - text component
Readability study by Michael Ciarlo.

Contemporary principles of interaction design

Aesthetics

It’s only natural that you’d want your product to look and feel as good as possible to please both users and the designers. That’s fine. But we do have a few recommendations regarding how you plan the visual aspect of your product.

Test your visual design like you test your interactions and behavioral design. When you make changes to how the product looks, you want to make sure that the classic principles have not changed. You want the new interaction design to be just as learnable, discoverable, readable and consistent. It’s no good having the world’s most beautiful product, if users can’t make sense of it.

Another thing to consider in the aesthetics of your design is the degree of simplicity. In a fever that Apple helped spread across the globe, minimalism in UX design is all the hype – which is great. But a lot of companies apparently thought it was enough to make their designs look like they were simple, as opposed to actually making their design simple to understand and use. That trap goes by the name of Illusion of Simplicity.

Example of good interaction design - simplistic aesthetics, simple design
Screen from gift-giving app, Token.

The problem arose when companies started to hide important buttons and controls from the main interface in the quest for a minimalist design, which often resulted in confused and frustrated users. While this could pay off in the short term, you risk having users never enjoy your product to its full glory. Instead, aim to make your design complete, providing the user with all the controls they need at hand. A bigger challenge in interaction design terms – but you’re ensured a product with an overall better quality in the long haul.

Accessibility

Accessibility should always be in your mind at all stages of the interaction design process. Accounting for accessibility doesn´t necessarily mean your design needs to be ugly or watered-down. When it comes to interaction design, your biggest concern should be users with sight and hearing disabilities.

As a general rule, the visual aspect of your product will likely have its own palette of colors that relate closely to your brand identity. It’s recommendable that you prepare for users that can’t see those colors, by adding in an alternate set of cues that will help colorblind users navigate and understand the product. Don’t forget to invest some time into the ALT text of any images you might have.

In order to truly design for usability for all your users, you must consider that some of them might have conditions such as epilepsy – which means you should avoid bright flashing and intense color alternating in order to make it impossible for your product to induce seizures in any user.

User-centered design is key

Making the user the center of your universe has many different consequences. This could relate to having a consistent design that the user can understand quickly and anticipate with ease. Or ensuring your product is discoverable and can be learned in a timely fashion – but all of those are a given. Here is the most important concept when ensuring your interaction design is user-oriented.

Put the users needs above all else. The main upside of any product is to solve the user’s problem or to meet their needs. In order to hit this crucial mark, you´ll want to make sure you can fulfill these wants and needs during your user testing, and careful planning to make sure your interface and information architecture allow the user to benefit from all the features in your product – failing to do so is usually rewarded with a swift and ruthless bleeding of users.

Making sure that your users is the top priority will manifest itself in many ways across your design. For one, you can look for every opportunity to help the user understand where in your product they are or what is happening behind the scenes, such as making the most of your error pages. Another way to show the user you care is to make sure their work isn’t lost whenever an issue with the product or internet connection takes place. A classic situation in which loss of data can take place is whenever the user is filling out any type of form.

Imagine you filled out 10 blank spaces in a form only to get an error message – and find that all 10 spaces have been erased. Would you describe yourself a happy user? How many times are you going to start over before you gave up completely on the product? Is the product even making it clear to you what exactly is going wrong?

Small interaction design example - action bar
Created by Hoang Nguyen.

Being able to offer a truly incredible interaction design is all about thinking of every possible way you could help the user. That means creating the right features for that particular user, and making sure you tell the user what is happening at all times – a concept that is supported by Nielsen’s heuristics of usability. A nice way to insert these little windows of communication between product and user is create thoughtful microinteractions in necessary places.

Give the user their freedom, but not too much. Humans will do very well in situations where we have some degree of control, but not so much control that our options become infinite. We’ve explored this concept on our Information Architecture Guide – the paradox of choice dictates that people can become overwhelmed if they are faced with too many decisions. It is important, however, to allow users determine how things look, or what kind of keyboard they wish to use.

Remember that everything humans do requires a certain degree of cognitive power. You want the usage of your product to feel like a breeze, natural and easy. You don’t want users feeling like they are in a world chess competition, about to lose the match to an overly complicated navigation system.


Download Justinmind and bring your ideas to life

Download free


Another way you can empower the user is to give them enough control to undo their actions. Instead of focusing your interaction design on confirming that your users are sure they want to send in data or make changes to the product, simply make it easy for them to go back on their decision.

Make the interface explorable

This is all about navigation. When creating the interface, the middleman between human and machine, you need to create something that users can understand, interact with and predict. This touches discoverability, learnability and information architecture – they all play a part in helping the user move around your product.

You want to give users a sense of what the homepage or home screen is while still allowing them to explore. Consistency in interaction design also works to give the user known landmarks that can point them towards their home or to any destination they look for. Generally speaking, the interface should always provide a quick access to the homepage from every single screen.

Side bar navigation for great interaction design
Design by Olia Gozha.

Similarly, users should never feel lost or trapped inside the product. Be it a webpage or mobile app, giving users an easy way back to the homepage or back to another part of the product they are more familiar with is a must. For most users, getting lost or feeling trapped will result in the abandonment of your product and the start of the search for something better. Instead of trying to trap your users inside the product, try to make it as easy as possible for them to move around.

Invest on creating an attractive experience that draws them in, lets them explore. If you have an e-commerce website design, displaying different tabs for each step in the checkout process makes it easy for people to go back and make changes, and lets them know exactly where they are in the purchase journey. A win-win in interaction design and usability!

Here’s a cool trick to improve your navigation. When designing complex mobile apps, try to keep the number of screens down. In order to chop off those extra screens that only have a small interaction or function, try to have an overlay with which the user can still see the previous screen (darkened, in the back). This will help the user remember only the path to the previous, more important, screen while quickly forgetting about the overlay. A quick way to place less burden on the user’s memory!

System defaults

Having certain default settings seems like a natural option to most professionals in interaction design – but like many design concepts, default settings is a debatable principle.

For one, your defaults should be easy to be set aside so the user can customize the product however they see fit. By now, you’ve noticed that great interaction design is all about finding balance between what users want and what you can do – which means there’s nothing wrong with defaults, as long as you give users the chance to eliminate them easily.

Interaction design for default settings - apple example of resetting
Apple gives users choices to reset parts of the product, or all of it.

A second aspect to consider, is that people’s vocabulary may only include the default which makes us all fear losing our house and other assets to banks. Remember that you need to anticipate what the user wants, their needs and capabilities. Consider using something more descriptive and simple, such as “Initial settings”. This is important in case your users ever decide to restore the product to its default settings – especially if your users aren’t millennials.

And speaking of restoring… people can have a hard time understand what restoring means exactly. After all, if I restore your product does that mean that some of the changes I made are reversed? Does it mean that I lose any information or data I have placed in there? What about all my previous usage?

That’s why it’s important that both your language and your interaction design make it clear just what is about to go down when restoration of the product takes place. Consider having a menu display of what people will lose should they restore the product, or some way for them to dictate what can be wiped from the product or not.

Latency Reduction: don’t keep users waiting

Nobody likes waiting. By now, we’ve already established that it’s important to let your users know exactly what is happening behind their screens, also known as visibility of system status. It’s normal that your product or the device on which it’s being used may need a few moments, especially whenever large sums of data are involved.

You should try to let this ongoing task fade into the background, so the user isn’t stuck waiting for the system to catch up. Aside from that, you should acknowledge any clicks within 50 milliseconds, so that the user knows the product has detected the action, and so that people resist the urge to click several times in a row – which is likely to make progress even slower. That way, the user clicks on the button and is free to come back whenever the task is done. This can be done with some interaction design broken into microinteractions.

Progress bar of download for better interaction design
Design by Oleg Frolov.

Another way of not losing the users during the waiting time, is pondering on how to display the estimated time to completion. Bruce Tognazzini, a partner in the Nielsen Group, lays down these guidelines:

  • 1-2 seconds: use an animated icon or other type of microinteraction to demonstrate the system is acting
  • Over 2 seconds: Just tell them an estimate of the waiting time.
  • Over 5 seconds: Use a progress bar. The thing about the progress bar, is that it should be accurate, meaning that the task must be over when the progress bar reaches its completion – or risk having confused or disappointed users.
  • Over 10 seconds: Keep users informed of progress (with an animated bar or other indicator) and entertained.
  • Over 15 seconds: Keep users informed and entertained – but add a noticeable sound and visual aid so the user can leave your product and know when to come back once task is done.

Aim for quick prototyping

We recommend you start prototyping your product as early as possible. Here’s why: no matter what your first draft looks like, it’s wrong. Like all others, you too will find things you hadn’t considered, issues you weren’t aware of. Coming up with a product is not easy, but coming up with the perfect product on the first try is downright impossible.


Prototype today. No ugly surprises tomorrow.

Download free


Instead of leaving all your ideas in the theoretical, it’s better to materialize them early. Nobody likes to have a nasty surprise at the end of a tough and long project. Aside from the element of frustration, there is the element of money. Making any sort of changes to a finished design will bring unforeseen costs and require extra time your team may not have.

It doesn’t matter if you go for a full working high-fidelity prototype or a bunch of post-its on your bedroom wall – as long as you have something tangible that lays down the bones of your design in plain sight. Start on it early, and keep improving on the organization and flow of your interactions.

There’s no reason why you have to keep your workflow linear. Make several prototypes and keep coming back to the latest one, spotting mistakes or areas for improvement. Using some type of creative framework for your project might also help you in structuring your ideas, and keeping you focused on the things that matter at that moment. Check out our Double Diamond Model post to know more about it.

The wrap-up

Ultimately, interaction design is a topic that keeps on changing. We listed out some classic and some modern principles to help guide you on your journey in search of the perfect product – now it’s up to you. Remember that most interaction design is simply a way to get humans to have meaningful relationships with the machine, and the product you invested so much hard work to create.

Just try to make sure your interactions have actual value to the user, and help the user understand how to make the most of your product. These are the building bricks that pave the way for great interaction design. Now, you just need some accurate research data and lots of creativity. Have fun!

Download free