Welcome back.
So before we talked about just motion in general and how important it is in the design process, but
I really want to talk about like how to make purposeful animations, how to make motion in general purposeful
in your design.
And what I've done here is I've created this really cool prototype in terms of it's like a photo exploration
application.
It's going to help us figure out different types of ways we can make motion much more purposeful in
our designs.
What I'm going to do is I'm going to actually launch this in prototype.
I have it here.
So I'm going to press play.
It's going to bring me over here.
And this is what we're going to kind of play today just for now.
And I'm going to show you some more advanced stuff in a second.
But what I really want to talk about is when we use, like motion in a subtle way, it helps build,
like, these mental models about how our system works and how users can interact with it instead of
creating like animations or things like that for the purpose of just delay.
Don't worry.
That's OK, too.
Like a confetti pop when something really good happens.
Instead, we can use these animations or just motion in general for usability.
Think of clues for what is happening within your product or maybe signifiers for how certain UI elements
will behave.
Now, the first thing I really want to talk about is state transitions.
Now, this is huge within design and especially like when we're moving across a mobile app or just a
Web app in terms of different transitions between screens and changes in your user interface can involve
really hard cuts.
I mean, that's a change from one screen to another without any transition whatsoever.
And that's kind of like a big no no.
Now, this makes things really difficult to follow.
So think about it.
If you open a door, you start to push the door open.
And when you're in a new room, the same rules apply to digital products.
So, I mean, you open the door slowly and you can see you're going into a new room.
Can you imagine if you just, like, tap the door and you're like immediately in the room that you want
it to be in?
It'd be kind of weird and disorienting.
So let's take a look at this example, when something has two or more states, it's easier for users
to understand if things are animated rather than, like, instantaneous.
If I were to click just like nature over here, you can see, like the hot spots.
If I click that, I can see, like, it's a very gradual change, even with the navigation moving right
to left.
And this is all built in figment.
Hey, you want to stress that because Sigma is awesome and I can also see the images.
Let's do it again.
Architecture is clickable.
It makes that really, really smooth about if we click an image, so we have one over here.
Look, I know as a user, if I'm clicking an image, I'm going gradually into a new detail screen,
I can easily kind of come back out of that was click that again so I can see what's clickable here.
And there you go, I'm back to my home page, and that's just me creating this simple animation in Fidelma,
and that motion really helps smooth that state transition.
The next thing I like to think about is visual feedback, so users really want to know their current
context within a system at any given time, and you should really keep them guessing.
So that could mean like the visual feedback of it being an active like element within your navigation
over here.
That's good feedback.
That's one way to do it.
Using just animation or just motion to tell the user what is happening with feedback really makes the
user feel like they're interacting with the visual elements on the screen.
Pressing buttons is like one way to do it.
Let's use the example of pressing like a like button over here.
So I have feedback over here that that's been pressed.
And it's just a gradual motion and there's some more feedback at the bottom.
So that's one way or a couple of ways that you can actually just showcase visual feedback or just easily
giving feedback to your users if something were to happen where like you click something and a feedback
shows somewhere else, that's just jarring.
But it's, like I said, are a great way to show different types of visual feedback when there's some
sort of interaction happening.
And we'll get into that a little deeper later.
Now, the last thing I really like to talk about is visual cues.
So when your user starts using a product, it may be unclear for them on how to do something or where
to look.
That's totally normal.
I mean, if you're products and you and a user hasn't used it before, are users in general haven't
used it before.
That's going to happen in just about making that experience as delightful and just easy to use as possible.
So animation, I feel, can really help guide users attention and certain areas.
It really directs their focus to the right spot at the right time.
So this is especially true in like onboarding features you can think about, like when a user first
comes to an app.
Let's just jump back here.
When a user first comes to an app, everything could be great.
Oh, and this area can be like highlighted just to showcase that, hey, this is our navigation.
And then it could switch gradually to something else.
And just showcasing features like that, not necessarily like a swiping onboarding, but this is more
like an onboarding for learning how to use an app.
Another thing is like when we actually interact with elements, think about like Cartes, think about
like little notifications.
Sometimes they aren't as prominent as we like them to be and users may not necessarily know where to
go.
So let's look through another example.
So I'm over here and we see this nice little click and then there's a feedback and there's should be
like a little animation right there that we've created once again within Sigma.
So we have a little kind of notification bouncing over and over again in my little navigation at the
bottom.
So this little ball notification kind of ball or ping, wherever you want to call it, is not obtrusive.
It's just kind of in the corner.
It's very subtle, but there is some movement there that should redirect the user's attention to something
you want them to click.
Now, it may not be this, but I can see it really being used for like a car or for our application.
So we may go ahead and do something like that in the future.
So that's one way to like have a visual cue.
And those are different ways you can use animations and motion in your product to just make your product
a much better experience for users and make your motion animations much more purposeful.
See, like everything that's been incorporated within this little app that we've built.
This little prototype, everything is very useful if we didn't have these different types of animations
and I'll show you what it will look like, so if we just go to our prototype.
And over here, I have a thing called smart anime.
Now, if it was just instant, let's take a look at what that could look like.
Like, that's just really jarring right off the bat and.
That's nice, that's Jurien, so just subtle things like that really improve a user's experience and
this type of thing should really be thought about way ahead of time.
Don't leave this to the end, because by that time it may be too late.
So think about ways to incorporate motion.
Think about like state transitions, think about visual cues, think about visual feedback.
That's going to make your app so much more better.
And I guarantee it'll have people talking.
So that's it for creating purposeful animations.