Interaction Design – Defined
Tatiana Knies-Smith | User Experience & Design
Tatiana Knies-Smith | User Experience & Design
BrainDo Interactive Designer, Tatiana Knies-Smith, shares with us her interpretation of quality interactive design, the process, and how it’s a value on multiple levels for marketing agencies.
The goal of interaction design is to create a more engaging user experience with strategic and thoughtful use of animation as well as bridge the gap between static User Interface (UI) designs and the fully developed interactive website or mobile app end result.
This can lead to saving money on development time, improved credibility, and increased engagement, and keep users exploring the site consuming content longer.
Much like the familiar click of a pen or the push of a button, a site needs to provide a similar indication that it is working and reacting. Since there is no tangible way to feel it, motion is a great tool to provide that feedback. Interaction Design helps indicate functionality to users by responding with visual feedback that the site is working.
Use of motion can also direct the user’s focus, helping create a visual hierarchy. It tells the user where to look. That is important on a page because it reduces the user’s cognitive load and decision fatigue.
There is only so much you can pay attention to at once, if there are not strong visual cues on a page, the user may not take in the information you want. They may experience change blindness and not continue on the path whether that be to sales transaction or using a tool on the page.
If you have a lot of information to get across, the use of a scroll animation can be helpful. In our case studies, we utilized a fade in because it breaks the information up from one long article to shorter, more digestible chunks. It allows the user to focus on what is newly presented in front of them, rewarded for every interaction (the scroll in this case) further into the article, with a satisfying new set of information.
With the increasing popularity of animation elements in websites, apps, and ads; thoughtful Interaction Design helps your user experience compete with the rising standards. An exciting animation when you first get to a site can hold your audience’s attention and encourage them to stay on the site longer, reducing your bounce rate.
A well-designed website increases your credibility. First impressions are important when there’s a million options to choose from on Google and they’re a back button away from checking them out. Good website functionality and visibility shows that you are making the users’ experience a priority and will encourage them to stay and explore what you have to offer.
Interaction Design locks down specific values developers need to efficiently render. The motion envisioned by the design team such as the speed, easing, path, and the order components move in when animated is defined. In this example, you will see how different the story is between two styles of design mockups.
Before Interaction Design, we started with a static design and ideas for motion. We sat in a room with a member of our dev team trying different speeds for the hover overlay to change at, 1 sec? 0.5 sec? After rounds of exchanging feedback without the imagined results, we took a new approach: animating the static mockup through design means.
Static Mockup: Inactive State
Static Mockup: Hoover State
Video Mockup: Shows both states and transition
With Interactive Design it took a couple hours to animate the interaction with design software and then use the information we gleaned from the process and apply it to the code.
By providing quantitative values, it removes the trial and error of development teams having to guess properties for movement based off qualitative descriptions from designers in other areas of the site.
Identify opportunities to bolster user engagement with user-initiated animated experiences
Identify potential pitfalls where motion could be confusing or distracting and recalibrate with strategic planning that prioritizes user experience
Research competitors and relevant techniques that apply to the design
Elevate standard components and everyday interactions such as buttons, hovers, and form elements with tactile movement
Increase brand recognition through animation that aids in communicating their personality with flavorful touches
Provide animated videos that detail the user experience as they interact with the website
Provide animation guide to accompany videos with specific quantitative information for developers to reference
If you are a business owner and do not infuse Interactive Design into your latest marketing deliverables, we hope the above gave you a better idea on why you should utilize this service!
Drop us a line at info@brain.do to learn more about how we can add more personality to your services.