Hey, everyone, and welcome back.
So I'm going to be talking about something really interesting, and that is motion now motion is something
I love to use and designs, and I think everyone should be using them in design.
And it doesn't necessarily mean that you need to incorporate some complex animations or complex micro
interactions and stuff like that.
But motion can really, really help add that level of Polish, but also just overall create a great
user experience for your users.
So I want to start right off and talk about the importance of motion because it is incredibly important.
Just look at this screen.
Beautiful swipes, beautiful state changes, moving to a detailed screen, seen the little micro interaction
when something is added to a car.
Let's take a look at that right there.
Little subtleties like just really improve the user experience and, you know, users are easily able
to follow along.
It's such a crucial element in making those interactions with a brand's digital product more streamlined
and intuitive.
Now, this is a quote.
I really love motion.
Tell stories.
Everything in an app is a sequence.
And motion is your guide.
For every budding collect and screen transition, there is a story that follows.
Now, this is by Craig Dessner.
He's part of the former human interface team at Apple.
And this is so true.
I mean, your motion should help you tell your story, whether that be moving from one screen to the
next or just adding something and getting some sort of visual cue, it could really help not only tell
that story, but just heighten that brand's experience for the user.
But the truth is, it's often an afterthought.
So although it's very, very important and designers who try to incorporate motion usually do it based
off of gut feeling or they do it way too late in the process and it comes off looking kind of amateurish.
And, you know, there's just not a lot of thought put into it.
And that's just a wrong way to go about it sometimes.
You know, I understand there's tight budgets, tight deadlines, and we can't always put that level
of polish into our designs.
But motion is incredibly important and we should strive to incorporate that earlier in our design process.
Although motion is very important, it should be used with a light.
Use it as a tool for providing users with easily noticeable smooth feedback.
So let's take this, for example.
This is really beautiful.
I'm not saying this is bad or anything.
This really suits the type of website and the brand's tone I can see right off the bat.
So this fits perfectly.
But could you imagine if somebody did this for, like a financial institution, a just a different type
of brand?
I don't think that would be something that fits and, you know, too much motion, especially maybe
on a smaller screen like mobile that has this much motion, it just may not fit and it may just degrade
that user experience if it isn't really relevant to the task.
So this is a nice kind of like an intro screen animation, but if something like this happened, every
single time I click something that would get really old fast.
So really think about the user's experience and that user flow.
Think about the type of brand you're designing for as well.
Now, when you are Animation's are subtle like this, you know, that's really unobtrusive and it's
brief and they can improve the user experience and can really communicate feedback and stage changes
and stuff like that.
I mean, this is a nice little animation and we don't necessarily need to do this, but this is really
nice and thoughtful and it really kind of probably fits into what this designer is using it for.
So little unobtrusive animations like that are really nice for the user experience.
They create delight, but that's not all what motion is used for.
Let's take a look at things for motion, for state changes and, you know, just preventing any type
of disorientation.
When a user clicks into a card in this app over here.
You can tell easily where you're going and there isn't any disorientation.
I mean, it's not instantaneous.
There's a nice flow in terms of going from that card to the screen.
So even going back when the user clicks back on the back button at the top left, it just smoothly goes
back up to the card.
So, I mean, that's just really great use of motion there.
It's not too much.
It's just the right amount and it's totally unobtrusive.
It just adds to that user experience.
And overall, I feel like it just adds that level of fidelity that I think we all kind of strive for.
So this is a great example of just using it for the just purpose of state change and just visual cue
as well.
This is another great example.
I mean, motion should not be overused and it could be really overwhelming, like I mentioned before,
and it could distract users.
If you can tell when they swipe that card and they go into this card machine here is very subtle.
And the user knows exactly which page they're on.
See, there's personal, there's work, and then we're going right into the work screen.
So this is really, really subtle.
And it's a great example to show the different types of state changes when the users clicking on things
are swiping through things.
Just generally interacting with the app, so remember, good motion is really invisible.
Users shouldn't notice that they're looking at like animations or motion or like too much motion.
They shouldn't be distracting.
They should just notice the great experience that you have provided.
Now, this is an example of maybe too much motion.
Now, these are great, great types of animations we have going on here.
I think they're pretty interesting and I think this is a great visual exploration because over time
we can fine tune these types of things, you know, to swipe through.
Like, I can imagine this could be like a record cards and you just swiping through.
You click like a music record and listen to music.
Same with something like this, that you can just be swiping through different cards, you may not show
all the information, but it really depends what the content is there.
But the reason why I have this example is because, you know, if this isn't fine tuned and it's just
provided for the user just like this, this is a lot of motion.
Like, let's take this, for example.
So many things are flickering on and off the screen, so many shadows.
The contrast is really high.
And when the user actually clicks on something, things start to flicker.
So you'll see it right about now.
And yeah, it's just it's a lot of motion.
So over time, we should just fine tune those little things and get that right.
So in our next video, we're actually going to jump right into Fidelma and we're going to talk about
like the purpose of animations and how we can make our animations much more purposeful.
So I can't wait to teach you that.
And I'm super excited.
Let's jump right in.