UI Animation, Motion Design & Micro Interaction Basics

[Music] what's up guys welcome back to the channel my name is Jake and I do somewhat weekly product design tutorials I know I've been slacking a bit of weight but I have been working very hard in this video today we're gonna be talking about UI animation motion design and interaction design and how you can leverage some of these techniques that I talked about to become a better designer so for this presentation I actually built the entire thing in Flint Oh for those of you don't know if windows have really awesome interactive prototyping tool it's one that I've been using for a long time but the reason I'm using Flint Oh for this presentation and not like a PowerPoint or keynote is because I wanted to not only demo things live inside of Quinto but I also wanted to share work from other designers and Flynn to allows me to drag-and-drop gifts and videos of other designers work who by the way I'm going to be crediting throughout this presentation as best as I can I'm also going to link their work below if I can find like the dribble page or something similar also like I mentioned my last video I am gonna come out with a UI animation course this year so if there are any topics you guys specifically want to learn in this area I'm gonna include a survey below that you guys can fill out also whoever fills out the survey is most likely gonna get a discount when this course actually drops hopefully soon so yeah I'd really appreciate if you guys fill that out again I worked very hard in this video so a thumbs up would be greatly appreciated if you guys take any value away from this oh and last thing this video is a bit longer than most of my videos so I did include timestamps in both the description in the comment section if you guys want to use those to sort of jump around and navigate between topics I think that might be helpful for you guys oh yeah without further ado let's get right into it so really quickly I just want to touch on some of the benefits of using motion and interactive prototyping and there's four main benefits first being to better communicate your ideas to both developers and stakeholders I found from personal experience it's just a lot easier for me to design the entire experience with all the motion and interaction built in when I'm trying to explain something to a developer stakeholder rather than me just trying to walk them through a static visual comp and sort of walk them through the user journey it's a lot easier for me to just hand off an interactive prototype that they can click through and really understand the experience and doing it this way there's less of a chance that a developer is going to poorly implement your design vision you also just make sure that stakeholders really understand the vision motion and interactive prototyping can also help your work stand out and this is true at both the personal and agency level if a hiring manager is looking through your portfolio and see some really nice motion and interaction work it tells them that you're able to own more of the ui/ux process and this makes you a more valuable designer also at the agency level oftentimes you're pitching a client to win work from them so if you can sort of paint the entire design vision and provide an interactive prototype with a lot of really nice motion design and animations built in there's more of a chance you can win that work because there's more of a chance you can wow them with really nice interactions and motion and if you can give them an entire high fidelity prototype that closely mimics the end result they can really picture themselves using that product or website even if it's not fully developed yet also another big part of motion and interaction design is it helps you delight users think about your favorite digital products there's probably a reason you keep coming back to them I know me personally my favorite products usually have a bunch of really nice interactions it's usually just a bunch of little things that are done really well that lead to a great experience that keep me coming back lastly in my opinion this is the most important that motion and interactive prototyping really helps push design forward nowadays everything seems to be super templatized and everyone's coming out with UI kids which generally have the same UI patterns which is great that we're all sort of developing a global design language that is understood by everyone and you know we have quote unquote best practices but in my opinion best practices are only best practices until we come up with better ways to solve the same issues and in my opinion the only way to push design forward is to explore new ways to interact with these digital products the other thing to note is that devices are gonna be changing in the future right right now we're used to flat displays everything's flat flat flat whether it's a computer monitor or laptop you know tablet phone the way we interact with these products isn't gonna change all that much but as we move to VR and AR and these other mediums of communication design is going to change so we're gonna have to start thinking about new ways to interact with products for these different mediums so when we talk about motion within the context of UI design there's really three main types of motion there's functional motion there's structural motion and emotional motion and functional motion really helps improve the usability and user experience think like drag-and-drop interactions or anything that really helps you accomplish a goal quicker or more easily also animated hover and click States could be examples of functional motion here's an example that I really like and actually made this animated component right here inside of Flint oh I can hover over this button we get some indication that you know once we press this button something's gonna happen so once we press it we get this little loading indication and then we get some confirmation that our message was sent so this could definitely be leveraged in some sort of messaging app or some email app and when you think about it we're really combining three different components into one and one thing I really like about this is all I'm doing is clicking the send button and my I doesn't have to move away from this I hit Send I get some loading indication that something's being sent and then I get confirmation that it's sent all just by clicking this one CTA so I think this is a really good example of functional motion at the component level then begin to structural motion and this was really made popular by Google's material design they use animation really effectively to help illustrate an app or digital products structure so I'll show you some examples but basically elements moving on and off the screen items growing into detailed views modal's dropdowns tooltips and then you get into emotional motion and there's sort of two schools of thought when it comes to emotional motion which is more or less just designing to delight users and one school of thought is actually shared by myself and other designers mostly who are always putting experience first right we're always thinking user experience first how can we make this experience that our user is going through the most memorable experience possible and then there's the other school of thought which is usually held by developers and even the business right where it's a little harder for them to see the value in terms of dollars of adding this extra layer of emotional motion on top of you know the more functional UX work and it's really about finding the balance obviously you don't want to overdo it with these moments of delight you don't want every single interaction in your product to be like an animated experience that like it's really trying to Wow to use it right sometimes you have to think performance first you have to take into account time and budget constraints generally it's about finding the balance right between these three elements here and my opinion good motion can combine elements right we can combine emotional and functional motion here's an example here's like a day-to-night toggle right a lot of apps these days have dark or light mode and sometimes there's just a simple toggle switch right but in this case there's actually a little illustration here so when I toggle between day and night you know it's a little more memorable right whereas if it was just a regular toggle you know that doesn't really leave the user with a lasting impression but doing something like this just ensures that we can impact our users on more of an emotional level and you know it's fun like this is actually enjoyable to do so here are some examples of functional motion to the left we have a drag to reorder interaction and I actually made a tutorial on how to do this inside of principle if you guys wanted to go check that out I'll link that on the screen here we have a drag and drop add to playlists interaction which i think is pretty cool but notice like yes these are delightful but they're at the same time they're helping the user accomplish a goal so they're really functional at their core here we have a dashboard design looks like an activity feed of some sort and the user is dragging to rearrange their activities and changing their status from in progress to done which i think is a really cool use of functional motion here so here we have some structural motion examples and notice these guys here on the left even at this very low fidelity stage we already understand how this app is sort of structured like this guy here on the right we have some sort of tab style navigation where we can either tab between these two sections or we can swipe between these two sections so it's already giving a sense of how this app is structured we're here we have some list items that are expanding right we have some expanded States we're already getting a sense of the structure as well as the key interactions that will occur on these screens so I would encourage you guys to actually try starting here right like start with motion and interaction first before you even dive into the visual design of your products and just see how it impacts your final design output I've noticed for myself it's made a huge difference and I'm starting to create a lot better products when I'm thinking motion and interaction first here's an example from Google's material design where we have a ListView expanding into a detailed view and it's it's all happening very soon lessly right like like we don't even notice really that there's a change in elevation here there's a slight change in the structure of these layers I think good structural design should be very seamless it shouldn't be very jarring it should feel natural and I think this is a really good example and here's a higher fidelity example right we have a user drilling down into these detailed views of these cards and everything's happening very seamlessly you would almost expect this to be the case right when you click on this card you would expect it to sort of fill the viewport but it's all happening very seamlessly so I think this is a good example here we have some examples of emotional motion and here on the Left we have a very human onboarding experience right we've all had some sort of onboarding experience when we're signing up for a product or service and we're being asked to input some information about ourselves well this experience it's particularly enjoyable because it's not just like formfields asking us to input text right using your thumbs there's some really cool interactions here as well as some some really nice illustrations that just make this feel a little more relatable a little more human just memorable altogether this is a simple way to you know add some flavor to an otherwise cookie-cutter onboarding experience and here on the right we have a character illustration from Google's material design where they're really just making the most of an error state here that's just these little things that tend to add up to create a really enjoyable experience now let's talk a bit about the anatomy of an interaction so all interactions will have four main parts they'll have a trigger a response they'll have timing and it'll have easing applied to them the trigger is what actually causes the animation whether that's a mouse over a tap a swipe a scroll even page-load can be an interaction trigger then we have the response which is what actually happens to the element or elements once they're triggered so do they move do they flip to the decrease in opacity change color grow or shrink to name a few then we have the timing which is comprised of two parts we have the duration and the delay the duration is how long the animation takes and then we have the delay which is how long after the trigger the animation will begin then we get an easing which is pretty much the physics of the animation I'm gonna show you some examples of using but this is more or less the smoothness of the animation and we use easing generally to help our digital products replicate the real world as much as we can so a quick note on timing and these are not hard and fast rules by any means these are more like guiding principles so like when in doubt right if you have something like a micro interaction like a hover or click state of a button or like a radio button selection you don't want to use very long durations for these right or else your product is start feeling very slow and laggy you want these things to be very quick and I recommend 300 milliseconds max for these types of interaction or else your perceived performance might suffer notice how I said perceived performance because you can sort of use timing to hack your product into feeling faster or more performant and I'll show you an example of how to do this but on the flip side you want to use longer durations for things that are a little more dramatic in nature like screen the screen transitions or elements that traverse larger parts of the screen these would be good things to use longer durations on so here we have some examples that really illustrate how timing can influence the way your brand is perceived here we have sort of an elegant and dramatic theme notice this designer chose to use a bit slower timings like even on these hover states here right like typically hover stitch shouldn't take this long but he's almost using these hover States stylistically to create drama in this design even that like screen wipe there it wasn't very snappy but it was very dramatic and elegant which sort of speaks to this Patagonia brand they're all about exploring and getting outside and living your life to the max like it's very dramatic well here on the right we have something that feels very snappy and performant all because the timing is a lot quicker and a lot of snappier here we have some examples of stager timing which is essentially adding slight time delays to elements to create this more organic and flowing fuel so we have staggered timing applied here in this wipe and reveal effect which i think is done really well and here we have some list items loading in a staggered fashion so they're not all entering and exiting at the same time which creates a more realistic feel so let's talk a bit about easing and remember from before using a sort of the physics of our interaction and it can really help influence in interactions smoothness and there's five main easing curves that you guys will come across regardless of the UI animation software you guys are using there's linear using there's ease in which is also known as accelerate there's ease both which might also be referred to as ease in ease out there's ease out which is also known as decelerate and then there's elastic easing which might also be referred to as spring easing now using is super important in digital product design and web design because applying easing to our interactions can really help our digital products emulate the physical world which is one of the markers of good product design in my opinion right we want everything we're doing on the web or on our phones to feel very natural and very familiar and a proper understanding of easing and a proper application of easing to our interactions can really help accomplish this each of these easing graphs helps show the relationship between an object's position over time so if you would imagine the y axis is an object's position and the x axis is the time of that interaction we can adjust the easing curve to help influence how an object moves over time now here's an example that'll help you understand the relationship between an object's total duration and the easing curve that is applied to that object so here we have five different squares and the total duration it takes all of these squares to move from one end of the screen to the other end of the screen as two seconds as indicated up here but the only difference between these squares is the easing that is applied to them so in this first row this first square is moving at a linear constant rate it's not speeding up or slowing down at any point over the course of its duration it's moving at a constant rate now in the real world objects don't really move in a linear fashion almost ever because we have physics right we have things like gravity and friction that either speed up or slow down our elements now if you look below we have an example of ease in or acceleration where the object reaches its fastest point as it gets closer and closer to the edge of the screen so it starts slow and ends fast it's accelerating over time now below that we have an example of ease out which is just the opposite it's actually slowing down or decelerating over time so it's fastest point is initially and then it ultimately slows down to a dead stop now the one below that it actually reaches its fastest point in the very middle because it's easing in then easing out so it's accelerating then decelerating now this bottom square is an example of spring or elastic easy and one thing to note about elastic easing is that the duration is a byproduct of both the tension and the friction that you set on the spring easing curve this is if it's a true spring now it's really fun to make these really springy bouncy animations but you got to be careful not to overdo it because they tend to go on a bit longer than it actually seems right like it seems like the square reaches the end way before everything else but it's actually slightly moving back and forth taking a bit more time so be careful not to overuse spring animation in your product design and I'm going to show you some practical examples of one it would be a good idea to use spring for some of these other ones so here's an example of linear easing and like I said before you rarely use linear easing in product design but here's an example where it actually would make sense to use linear because we have a song playing and songs play one second of time at a constant rate so this filling animation of this music player here is actually moving at a constant rate and I made a separate tutorial on how I animated this music app inside of envision studio if you guys are interested I will leave that on the screen somewhere now I'm going to use an example to help illustrate the difference between ease out ease in and ease both so in the context of product design generally objects that enter a viewport or enter the screen will decelerate we want to slow them down as they arrive so in this case we have an avocado that is moving from outside the screen to on the screen we don't really care about what's happening while it's off the screen because we can't see it we only want it to arrive smoothly once it enters the viewport so we apply a deceleration which looks something like this it's slowing down over time now the opposite is true for when an object exits the screen we want to accelerate off the screen so just remember accelerate exit they sound very similar so that's a good way to remember this if you're ever stuck so enter decelerate exit accelerate now ease both is probably your safest bet for applying easing to objects that always remain on the screen so they're always within the users view it's just a more natural way of moving elements so I know that avocado example is kind of stupid and it might be hard to actually apply this to your actual product design so here's maybe a more practical example what you're looking at here is like your standard bar for some sort of e-commerce company just pretend this is like Amazon or Walmart very standard EECOM top navigation with a hamburger menu so when we open the menu we have this fly-in so something's entering the screen so we actually want to decelerate it so we apply an ease out easing to decelerate now you can probably guess what happens when we close the menu we want to accelerate it off the screen so this is sort of how we apply easing in the context of real-world product design so in this next example I'm gonna demo spring or elastic easing so we have some sort of social media feed in this case looks very similar to Twitter and we have a floating action button here and when the user taps on this floating action button some sub actions are revealed so we can either write a post we can share we can add a photo but notice the very subtle bounce that was applied to each of these sub sub actions here and there's also a slight time delay so the share icon is delayed slightly after this post icon and this photo icon is delayed slightly after the share icon so there is a slight stagger and together with that subtle bounce we're just giving this interaction a bit more personality a bit more character and it's subtle enough where performance isn't taking a hit right like we still want to be able to accomplish our goals as quickly as possible whereas if I applied a lot of bounce to this I might not be able to write a post as quickly which would actually detract from the user experience so it's all about finding that balance between performance usability and personality here's an example of good versus bad easing and I pull this directly from Google's material design guidelines but this one on the left here notice that elements are speeding up and slowing down together everything synchronized and feels very cohesive it's very smooth there's no jarring animation here whereas here on the left is the exact opposite right we have elements easing out that should be easing in the timing is all off like on these icons they're kind of fading out at different rates it just doesn't feel smooth doesn't feel natural it's very jarring so here's a good side-by-side of good versus bad easing now I'm going to talk about creating depth using motion which is one of my favorite parts of UI design so the first way to create depth in these digital product environments is to play with the relative scale so when I say relative scale we mean the scale of one object relative to another object this is honors use scale very effectively basically as a card increases in scale relative to the other cards that card appears closest to the user and vice versa as they scale down they appear further away it's a really simple way to create depth just by increasing relative scale now here's another example where we're swiping from one photo to another within a gallery this was an interaction I actually pulled directly from the ubereats app but I made a tutorial on it I'll link on the screen somewhere but basically has one photo enters the screen the one leaving the screen is scaling down and fading out and the one entering the screen looks like it's moving over top of it and notice there's no drop shadows here or anything all we're doing is messing with the relative scale to create that depth another way we can create depth within our digital products is using parallax motion and you've probably seen parallax motion all over sites like dribble but essentially parallax motion is defined as a depth cue that causes objects that are closer to you to appear to move faster than objects that are further away and the further away something is the slower it appears to move parallax motion influences how we judge relative distance so before we talked about relative scale parallax motion has more to do with relative distance so to illustrate the parallax effect in the more traditional animation sense I'm going to use this awesome illustration by Pablo Stanley I actually pull this directly from a tutorial he made on the matter on his channel so I'm gonna link you guys out to that if you're interested but essentially we have some foreground elements some mid-ground elements and some background elements so we have elements that sort of sit in different ranges of our field of view and as these elements animate we get the sense that the elements closest to us are moving the fastest relative to the elements that are set further back in the field of view so in this case these clouds are like the furthest back and then we have this mountain layer that's moving really quickly it's almost whipping by us it's almost like you're looking out the window of a car right say you're on the highway and you have some trees right off to your right those are going to appear to almost whip by you relative to say the in the Sun and the moon that's set further back from those trees so I'm sure you guys have experienced that while riding in a car very similar we just tried to recreate it with vector shapes here but this isn't as applicable to your everyday product design some of you guys might see more often in your everyday web browsing experiences is something called parallax scrolling where as we scroll down the page different elements on the screen appear to move at different rates and I've made videos on how to accomplish this effect and a few different design tools so maybe I'll link that on the screen somewhere but this is a bit more of a practical example of how to use the parallax effect and web design and product design I've also been seeing the parallax effect used a bit more stylistically of late in these examples layer masks are used to create these sort of depth containers so basically we have a foreground element which is the front of the card and then the background element which in this case is the photo within these cards and basically as the user swipes the photo within the card is moving at a slightly different rate than the rate at which you are swiping which is creating a subtle parallax effect and in this case it's the same idea the only difference is the image within the card is actually fixed it's not moving but the card and the image is still moving at a slightly different rate creating this parallax effect I think this one's really cool in particular it's a really cool play on card swiping usually everything kind of moves together but in this case this designer has chosen to fix the element within the depth container so really cool stylistic application of parallax one thing I really love using these interactive prototyping tools for is leveling up my design systems and testing out all the different states of all the components within the design system and as you see here we have some we have like a sample component library which includes buttons form elements and little card component but they all have all of the states of these components built in they're all designed right inside this tool so we can really test them in high fidelity and say for example right now I'm using Flint dough but what I could do is I could build a really simple card layout right and I could test this card component in context so we can get a sense of how these interactions actually look and feel in the context of an actual rather than just at the component level and we can get a feel for this digital product this way I like you know maybe there's you know maybe this hover effect is a little too much and that's what I'm realizing right now so in context it's a lot easier to tell you know if these states should be adjusted or not maybe we want to maybe let's get rid of these guys and we could build like a sample a sample login screen right so just pretend this says user name maybe this one says password and maybe this switch here is like the you know remember me or something and you get feel for your form layouts this way it's a really cool way to quickly test components before you go into build and just overall you know you can port your entire design system over to a tool like flint o or principle which has all the states of your entire design system built in so if you want to test with the users you can test in high fidelity and you can test things in context really easily now here are some common motion design tools that you guys can use you guys might be wondering where's After Effects on this list I actually didn't include After Effects because you cannot create anything interactive with After Effects yes you can create videos and really awesome motion work inside of After Effects and do some really cool 3d stuff it's a professional motion design tool essentially but the drawback is you can't actually create something interactive that you can test on your device or put in the hands of users or test with the actual intended gestures and in your application whether that's a swipe gesture or scroll gesture you can't do that with a video but you can do that in some of these interactive prototyping tools like envision studio Flint o principle and I also use web flow a lot but I only actually detail it out these three I'm not going to read all these you have some kind of do your own research I've made plenty of videos outlining sort of the pros and cons of all these videos and I'm actually gonna make a separate video probably on my favorite design tools so look out for that you guys can kind of read through this if you want but these are some popular interactive prototyping tools on the market I know proto pi is another popular one I don't have much experience with it so I'm not gonna speak to it one thing I will say anything drag based or scroll based that I want to prototype validate really quickly I'll usually use principal I just think it's the best suited tool for anything drag or scroll based it's really easy with the driver window frame Rex is another popular one that allows you to work with react components but again the tool you choose is going to depend on your specific needs and the specific needs of your design team me personally like I rarely have to do anything react based I pretty much choose the tools that make it as simple as possible for me to validate ideas quickly and then I can show my ideas to a developer it will actually code the thing I don't want to worry about code at all as a designer one exception is what I'm doing responsive web design maybe I'm designing some sort of like marketing website that doesn't really have an intricate back-end at all I can pretty much design and code the whole thing in web flow and my output will be completely responsive which is really nice I'm not gonna get into all the details of web flow you guys should do your own research these are just some tools that I found myself using in my everyday workflow that I've worked pretty well for me here's an example of some things you can make inside a principle this one on the left here I actually made a tutorial on how to do this this drag-and-drop add to gallery interaction I'll lick that on the screen some way if you guys are interested but like I said I tend to use principle for these drag and drop or scroll based interactions it just seems to be the tool best suited for these types of things this one in the middle there's a really awesome tinder style card swiping interaction so pretty detailed interaction that you can do natively inside a principle same with this guy the fact that this designer was able to do this all inside of principle is pretty mind-blowing these are really intricate interactions and the benefit of this is it's not just a video I can actually put this in the hands of users or I can test the look and feel my products on a device before it goes into development I can share this with a developer just to make sure they get the look and feel completely right they can test it themselves on their device it's a pretty powerful stuff that you can do inside of principle here's some stuff that you can make inside studio this one on the left I actually made a two part video series on how to make this player stats dashboard if you guys want to go check that out some pretty intricate animations here one thing I really enjoy about studio is that their default easing values seem to be the smoothest for whatever reason I've just experienced that personally which means less time I have to spend adjusting the easing of each individual layer I could be completely wrong about that I just have noticed that the feel of the easing seems to be better out of the box not a huge deal not a deal-breaker but something I noticed one other great thing about studio is as a standalone design tool it's pretty damn good it is still missing some things like sketch and figma have like background blurs and I know they're all working on this stuff but it's a pretty complete design tool as well I probably would use it to build out like a design system or anything I'd still use sketch or figma to do something like that but it's pretty complete in terms of being able to design from low to very high fidelity all on the same tool here on the right we have a really awesome photography portfolio it looks like with some really intricate animations really smooth animations by this designer so just gives you an idea of some of the stuff you guys can do inside of Studio and I have a whole studio playlist if you guys really want to learn studio so I wanted to just wrap up this video with a bunch of really good motion studies that I found I kind of organized them by navigation and data visualization so you'll see how I sort of organized these but I found some really great use of motion to create some new navigation constructs that maybe we otherwise wouldn't have thought of you know as design gets like super templatized these days there's a lot of like cookie cutter templates out there that designers are leveraging and UI kits but it's really the motion design that really helps you create new and interesting navigation patterns and UI patterns so I just thought some of these were really awesome here we have like this interactive tab bar I've actually made a tutorial on how to make this inside of Studio you see like a lot of this navigation is swipe-based and scroll based which is not something you can really get from just a static design template see like this is not a navigation pattern that we're gonna just find in a random UI kit right like this is something you really have to think about from a motion and interactive perspective to be able to prototype and some of these tools allow you to do this really easily so stuff these were some cool navigation explorations you can also use motion to really up your data visualization I really like this example again it's a very low fidelity motion study here but like you already get the point of how you're using motion to bring your data to life this one here on the left is probably not something you can do in an interactive prototyping tool you'll definitely need like After Effects or some 3d animation software to do that 3d transition but you can kind of stitch together stuff from After Effects and a tool like principle and Flint OH to create these really awesome data visualizations here's another one that I thought was super interesting some really cool data visualization studies that really leveraged good motion design I'm also a really big fan of using motion to make our digital products really feel like physical products in a way I thought these are really good motion studies like this one on the left is a very lifelike ticket-buying experience where this designer literally like takes you inside of a movie theater to pick your CD and buy a ticket for a movie here's a really cool navigation experience that's very immersive feels like real life here's a really awesome flight purchasing experience it makes you actually feel like you're on a plane flying which is pretty cool and here are just some really cool micro interactions that I saw in Tribble I really liked the swipe to delete bike uber toe design I've actually seen this tutorial on how they do this in After Effects they've actually been able to implement this in code so you know I am a big proponent of just always trying to design the best most interactive experience and let the developers figure it out because when there's a will there's a way we shouldn't have to box ourselves in and you know put limits on herself this is how we push designed for it we got to start thinking out of the box and you know good motion design really helps us do this here's another really cool interaction I don't know how practical this one is or how possible this one is to implement but yeah pretty cool how this how these cards sort of shrink down to the top navigation here just thought that was a really interesting micro interaction that I hadn't really seen before so I'm gonna stop the video here hopefully you guys learned a lot of valuable techniques and tips and tricks that you guys can leverage throughout your product design journey if you have any questions or feedback around this video I'd really love to hear what you have to say in the comment section and I'll make sure I read an or every one of you guys so definitely drop any questions or feedback below thanks so much for watching and I will talk to you guys in the next one

Channel: JP Design Academy

Views: 45,663

Keywords:

Id: -L_MwLVYWDs

Length: 33min 5sec (1985 seconds)

Published: Sun Jan 26 2020