Using Motion and Interaction to effectively engage and drive user Experience — AdobeXD Nigeria Community AMA (Ask Me Anything) session with Felix Obinna.

Ifehan
AdobeXD Nigeria Community

--

The fifth edition of AdobeXD Nigeria community AMA ( Ask me anything) with Felix Obinna discussing Motion, Interaction and its effectiveness in driving user experience and conversion in User Interface Designs.

Felix Obinna is a product designer with over five years of experience in graphics, User interface, User experience, and motion graphics. Felix currently works at the Nigerian fin-tech company — flutterwave driving User experience at the top flight of the African financial consumer market.

Thanks, everyone. It’s nice to be here! Interaction and motion help shape our experience and improve user engagement and conversion.

Motion tells stories — it shows how an app is organized and what it can do. Motion drives the entire UI — it redefines navigation and creates a more natural experience by adding a new level of depth to the design.

So, motion/interaction design is not just adding a moving element to your design, it has to play a role in improving the overall user experience while helping users to achieve their goals while using a product.

Just like every other aspect of design, you have to properly plan every bit of motion in your design, You don’t just add motion for the sake of having something move around, it has to add value. And for that to happen, it’s necessary to understand why you need motion and where you need it.

It is said to keep your designs simple, the same thing applies to motion and interaction. Don’t exaggerate anything. If you have to, be mindful of what, why and how far you can go.

A regular user already has an expectation of how things are supposed to move from their everyday experience with real-life scenarios and you shouldn’t move too far away from those expectations.

If for any reason you have to, don’t overstep the bounds. There are 12 principles of animation put together by the folks at Disney. The principles itemize how to go about starting motion design and core principles to consider when looking to improve your motion design skills.

I would say that you must understand the dos and don’ts before jumping into motion, interaction or animation. Motion, unlike UX, is guided by the basic principles of Physics. And it is very important to know the basics and the why before animating.

Simple file upload animation by Felix Obinna

Question: In scenarios where the client has little or no knowledge of motion design and what they want, how do we create a design that’s appropriate and delivers value to the users?

Felix: Most times, clients have little knowledge of how the animation/interaction on their projects should look or what direction it should take and that’s what tricky and sort of stressful about it. However, if you’re able to put data together for the project, that’ll advice on the approach to take when bringing in motion to the product.

For me, I work with the lead designer for every project and see what their preferences would be. And, like every other thing, you’ll iterate and test to find what works.

But, it’s very important to understand the supposed users of the product.

Question: As a designer, When working on a project, what time is best to decide the direction for motion & interaction, right from the preliminary stages of planning my design or when the design is completed?

Felix: Thank you, It’s always best if you can get in when the project is still fresh. For me, there are times when I prefer to see the design layout before proceeding with the animations. And there are times I get in after everything is done.

Either way, it is important to understand what goal users are expected to achieve in each phase so as not to introduce something off or totally distracting.

Transition Animation by Felix Obinna

Question: I do believe one thing that drives any interaction is the creativity behind it. What advice would you give to newbies on getting inspiration to create these experiences?

Felix: I’ll advise to take the time and check out some websites that use interactions properly. That’s usually the first step. You could also check Dribbble and Behance, but, most times there are more designs that are done for the sake of aesthetics than for functions or value.

But, having an understanding of what makes a good interaction and how best to fit it into user flows and products is the first thing I’ll advise to spend time on.

Question: What’s the best approach to designing for non-mobile and non-web interfaces like apple watch, TV displays, and virtual reality?

Felix: Designing for wearables is not so different from designing for mobile. The one very different thing is that users can’t type on wearables but would still need to complete actions. And you need to keep in mind that the screen is small and strapped to the individual’s wrist, so, you should strip the product of every not-so-important feature. And make your elements easily identifiable from some distance.

Designing for TVs is somewhat similar to that of wearables. You just don’t add any feature that is not important because your users will most likely interact with your devices from their seats while your design is hanging on the wall with the TV. Also, try to keep your elements easily identifiable. and accessible. Nobody wants to stand up every time they want to select a new movie or reduce the brightness.

Simple wearable Interface design by Maciej Dyjak

Question: For an intermediate designer, what tutorials would you suggest? Also, what is your favorite tool for interaction and why?

Felix: There are a couple of Youtube Channels that teach interaction designs. And, there are some paid courses too. Though some of them are expensive, but you should give them a shot if you can pay for them. I use Flinto, Principle and After Effects. Though I use After Effects more often recently because it allows me to create and export animation to Lottie that can be directly integrated into websites and mobile apps. It also allows for more flexibility and manipulations.

Here are some resources you may check out,

Question: How do you get a project’s stakeholders on board with your interaction/motion design decisions and suggestions?

Felix: I try to keep it simple and make sure it conforms with the product direction and business goals.

Question: How important is motion in design? Case studies of Microsoft — whose designs have very little motion and google — who make use of motion heavily in their design systems. Also, when can motion be considered unnecessary in a design project?

Felix: The motion does not define the experience, it improves it. So, you can have a good product that doesn’t have motion. But adding motion to it is very likely to improve the overall user experience and user retention.

It can be considered unnecessary when it’s just not necessary. Don’t make a button pulsate for the sake of motion, Or hide your forms just to animate its appearance. If you think it’s not necessary, then it’s not.

Question: How do you handle motion design handoff for both mobile and web?

Felix: I use Bodymovin to export them to JSON format that can be used across any platform Mobile or Web. Check out Uxinmotion for paid courses, and Sketch together on Youtube for free Flinto and Principle courses.

Question: What’s your approach in dealing with a client who’d rather have extravagant implementations of motion on a design project especially when motion is not deemed necessary.

Felix: I don’t have any different approach. If I don’t find the need to add motion, I won’t. And I try to get the client to see the reasons why. I also try to back it up with data.

Image source — Digital Synopsis

Question: Is it enough to be a motion designer only?

Felix: It depends on where you find yourself 😂. But, if you’ll be working on digital products, it’s necessary to understand UX.

Question: Which products do you feel has some of the best motion design?

Felix: I can’t exactly point at anyone, but Stripe does it well.

Question: How do you make a case for motion design in a regular Nigerian startup, in-terms of selling its benefits to stakeholders to warrant the effort?

Felix: It’s said that the best way to explain anything is to show it. I had a case where my boss was not getting the need for it. I started adding to my projects, and after seeing it during a presentation, he was sold.

Most startups are driven by numbers and speed. If you can get them to see reasons why usually better with data it’ll be easier to get them on board.

Question: How do you work under pressure for numerous projects and effectively deliver over time?

Felix: I break them down into sprints and deliverables. I think that you get better with time management as you go. But, having them in sprints makes it easier to focus on features and deliver them in bits.

Big thanks to Felix for taking the time to share with us, you can also be part of the next AMA by joining the community on Slack — http://bit.ly/AdobeXD-Nigeria

--

--

Ifehan
AdobeXD Nigeria Community

Designin' | Documentin' | Physicist | Earthling now, Martian Soon