Using an interaction design framework can speed up your design process and create better solutions to complex UX design problems
Interaction design deals with how users interact with your website or mobile app from first contact to last moment. An interaction design framework can help you create work faster and more efficiently, saving money and rework. Let’s get into what interaction design is and see how an interaction design framework can come in handy during the design process.
Then when you have your framework in place, get ahead of the game and start prototyping your ideas in Justinmind.
What is interaction design?
Interaction design is the discipline of creating products that behave more like people.
Think about going to a supermarket for your weekly grocery shop. Normally, you would walk in, browse the selection, grab what’s on your shopping list, pay and leave. So far, so good.
Now imagine that same experience but before you enter the shop, you’re stopped by a cashier outside. They ask you for your name, your address and whether you want to receive information from the store into your mailbox then you can go in.
We can see that this interaction is strange and unnatural. Yet, many applications on your phone do this – when you download a mobile app one of the first things you’re bombarded with is notifications asking whether the app can access your photos, your location and even if you want push notifications.
What interaction design should attempt to do is transform that experience – to make it more human from the start to finish so it emulates a natural experience as much as possible. Your real-life experience should align with your digital one.
In this way, interaction design is primarily the pursuit of designing products and software that help a user achieve their goals in the best and most natural way possible. You might be asking: doesn’t this sound a lot like UX design?
What is an interaction design framework?
When UX designers embark on a new project, there are several questions that may be asked:
- Who will be using this product?
- How will they be using the product?
- Are they already familiar with other similar products?
- How will the product look?
- What feedback will the user receive?
This list isn’t exhaustive. There are plenty of other questions UX designer ask themselves. Often the answers to the questions will give rise to the type of solution that the designer will need.
For example, if you’re creating a website that has a shop and you want your user to buy something then you’ll research relevant design UI patterns to help them achieve their goal. You will use a whole range of UI patterns from navigation, input, data, onboarding, cognition and so on.
These patterns have come about because of common problems within UX design. UI patterns are repeatable solutions to UI problems.
An interaction design framework is the same. It’s a combination of relevant and repeatable solutions that can be applied to a project.
Individual UI patterns are useful for one stop solutions, but an interaction design framework is more holistic, taking into consideration a whole design system.
Since interaction design frameworks take into consideration a whole system, they’re better at solving problems than individual patterns.
Fancy topping up your interaction design knowledge? Check out these 10 programs.
Creating your interaction design framework
To illustrate, let’s imagine you’ve been asked to design a new website system for a local museum. To create your own interaction design framework, you’ll research other similar websites: local museums, national museums, galleries, libraries, historical websites and so on.
When you’re looking through these websites, note the commonalities found among them. What similarities do they have? Do you find that they all use a hero image and call to action on their homepage? How do they guide the user to purchasing tickets?
How do users get the information and content they need? Are there search functions? Do you find that they all have similar pages – contact, about, visiting hours, etc.? How are the images displayed?
Piece by piece, as you make your way through these websites by answering these pertinent questions, your interaction design framework will start to take shape.
You’ll see these websites using very similar structures – that’s because the information architecture on these museum websites are the best way to provide us the information for those types of websites and they meet our expectations.
Creating your framework is a process of reverse engineering but in the end, it will help you create a more coherent, cohesive and appropriate design. And when it comes to designing a similar website, you’ll already have your framework noted down to use again.
Why use an interaction design framework?
Creating an interaction design framework means you’ll be able to do your work quicker.
If you create a composite of your UX designs, including the elements that crop up time and time again, you can focus your energy and time on creating innovative products instead of repeating work. Interaction design frameworks can improve your efficiency.
Other benefits of a framework are:
- It’s easy to make your own
- You’ll save time and money
- They’re repeatable
Interaction design frameworks and prototyping
When you have your interaction design framework created, you can start to prototype solutions in a tool like Justinmind. This will allow you to test out important dimensions of interactive design:
Do the words make sense? Are they easily understood? Remember to make sure you know who your users are by creating user personas and user flows. The words that your users interact with should be appropriate and language ought to be as simple as possible.
Get up to speed with all things microcopy.
- Visual design
How do your users interact with the images? Are the calls to action well placed? Big enough? Too big? What about typography? Typography can have a big impact on a product. Do the images and the text correspond?
- Physical objects and space
What device are your users using to interact with your service or product? Is it a mobile or a desktop computer? The experience on a mobile will vary from that on a laptop or even computer so understanding this dimension is important.
Time plays a big role in interaction design and using animation and sounds aid the user experience. Are you using appropriate sounds and animation? What about transitions to make the flow of onboarding smoother, for example? Are you managing expectations and waiting times using transitions and animation?
How do your users perform actions on your website? What do they need to do to operate it? Do they have to speak to the device?
Voice UIs are a new dimension to consider in interaction design. Find out how to design your own.
An interaction design framework can help you solve bigger problems in a better way. When you create your own frameworks, you’ll be able to apply those findings to subsequent design problems for a more pleasurable user experience. Start looking for similarities among websites and mobile apps and create your own interaction design framework today.