Interaction Design
Welcome to the interaction design section of my portfolio website. Here everything moves... for an enhanced experience.
I dedicate this section of my portfolio website to sharing and demonstrating my interaction design skills and why it is crucial in any digital product.
What is Interaction Design?
Interaction Design (IxD) is the design of interactive products and services in which a designer’s focus goes beyond the item in development to include the way users will interact with it.
“Interaction Design is the creation of a dialogue between a person and a product, system, or service. This dialogue is both physical and emotional in nature and is manifested in the interplay between form, function, and technology as experienced over time.”
- John Kolko, Author of Thoughts on Interaction Design
It is important to note that the design of interaction between a user and a product often involves elements like aesthetics, motion, sound, space, and many more. UX design is about shaping the experience of using a product, and most part of that experience involves some interaction between the user and the product.
Getting started in Interaction Design
In interaction design, motion is animation for usability and likes to enhance users' delight. In order to create a complete user experience, it is important to note that when users interact with UI elements, motions can help to create this awesome experience. Motion provides cues, it helps make UI expressive and easy to use.
"Motion tells stories. Everything in an app is a sequence, and motion is your guide. For every button interaction and any screen transition, there is a story that follows"
- Craig Dehner
In interaction design, motion is animation for usability and likes to enhance users' delight. In order to create a complete user experience, it is important to note that when users interact with UI elements, motions can help to create this awesome experience.
Motion provides cues, it helps make UI expressive and easy to use. For starter, consider the flow and interaction in the two UI's below.
Diving deep into Interaction Design
Motion's primary job is to help users navigate a digital product (an app or a website), by illustrating the relationship between the UI elements. While at this, it is important to note that simplicity and consistency are key. In the world of user experience design, motion help to enhance human psychology.
When we incorporate motion in designs, it helps to direct users to what they should read first, and what they should be looking at next. In addition to hierarchy and color, incorporating motion in designs will help to create better visual guides. The overall effect goes beyond delight because it now helps to make the product more usable.
Keeping users informed
-
Motion serves as an explanation to users of how to get to-and-from various places on the interface. In order words, motion help to improve the navigation experience of the user while interacting with a digital product.
-
Motion plays a significant role in how users perceive what objects in the interface are and what they do, or should do.
-
User interaction with any element on the UI triggers state change, this can be to another screen or even on the same screen. What happens when the user performs these actions can help to shape their experience of the product.
-
An easy animation on the screen will help keep the user informed of changes in state, while a smooth transition can enhance the user experience while moving to another screen.
"Motion has the potential to connect with user mental models and drive the wow experience on a product"
Interaction designs surround us whether we want to acknowledge it or not.
Interaction design is a key part of any great user experience of the product, and it should always be considered in the design process.
Best practice when adding interaction to designs
Keep it simple
It is important that transitions targeted at enhancing user experience should always favor usability. Eye-catching motion is best reserved for elements like icons, logos, and loaders.
Choose the right duration and easing
Now, this is the tricky part, the duration of transition should enhance functionality. Not too quick that it is missed and not too slow that it bores users. The duration should be based on how much of the screen the animation occupies.
Easing is the rate at which change of state (transition) occurs. Following Material design guidelines, elements quickly speed up and then gently slow down to focus attention on the end of the transition. This help to give the animation a natural quality.
The right combination of duration and easing is what produces smooth and clear transitions.
Below are more comprehensive prototype interactions of the designs used on this page. I have also added links to the prototypes for you to test and experience the interactions for yourself.
