Everyone, and welcome back, so we're going to talk about a couple of different things just to start
off, we're going to talk about smaller interactions and we can even go into creating interactions like
off of your mobile screen.
So let's jump right in.
So right now, we have the home page over here.
And if you look over at the bottom of the nav, we have it linked to this wish-List page.
And essentially that's just going to pop over here.
But I want to show the interaction of removing an item from your wish list.
So in this kind of wire frame, my intention would be that a user clicks on one of these little heart's.
Over here.
And once they click their heart, they it will get removed from the actual list.
I mean, we can probably clean this up a little bit more, but I want for the sake of this prototype,
I want that to happen.
I want them to click this heart and remove it directly from the list.
So I'll show you how to do that.
We'll get a sneak preview of something called Smart Enemy, which we'll get into later.
OK, so the great thing with stigma is you can kind of make these small little animations and you probably
want to start doing them or exploring them a little bit more now.
So when I click on here, I'm just going to link directly to them right now on top.
I just want to navigate to wishlists.
Over here.
I really would only start fiddling with animations, if you want to start doing some quick interaction,
prototyping, I wouldn't really dive right into it like right right now because that type of fidelity
doesn't matter.
But I'll show you certain things that could really help your prototype if you just add a little bit
of motion to it, because certain instant animations are a bit jarring for users.
So, yeah, we're going to show you something that's really smooth and I'll show you what it looks like
without it.
So, OK, what we're going to do here is we're going to click on this button.
This top layer is going to be removed and the rest of the content is going to shift up.
So I'm just going to remove this as a culture group 20 when we do actually start animation.
The key is to make sure that your names are the same.
So this is the same group 20.
We'll call this remove.
So it's not so arbitrary and we'll call this one remove as well, perfect, so I know that I need to
just delete this.
You can do whatever you want with it.
You can spin it around, you can rotate it.
So let's just keep up there.
So we just have a point of reference.
So I'm going to just deselect that, let's go into our design.
Perfect.
So we're just going to move that up and to oops.
OK, let's move up.
That's good.
We're going to get remove and we're just going to do it.
Perfect.
We're going to shift this frame up, you'll notice that the navigation actually moves with it and that's
based off of like constraints.
So this is kind of the constraints are set to bottom.
So whenever I shift the entire frame, though, it's within, it's going to kind of attach itself to
the bottom.
If I had it to the top, you'll see what happens here.
It's just going to stay put.
So let's just keep that to the bottom and let's go right into this animation.
Let's just make sure we have everything set up perfectly.
So when I do click here.
Let's make that an instant.
And let's take a look.
So let's go over here, see, even that is jarring in its own way.
When you click the wish list, maybe we should have something like just in, you know, at this stage.
I mean, if you have the time, it makes you look a little nicer and makes it less jarring.
So here it is, my wish list, if I click it, it just goes away really quickly.
OK, let's go back.
That is weird.
OK, so what we're going to do is we are just going to make sure that all our groups have product names.
I am not sure why that.
OK, and we're actually just going to.
Copy that again, and we're going to make that same animation, so we're going to prototype it on tap,
navigate to wish list.
OK, and we're going to make this a smart enemy.
And we're just going to leave that for now because we are definitely going to get into this at a later
date.
But I just want to give you a little bit of a sneak preview of the different types of things you can
do, because, you know, at this stage, you want to start prototyping some animations a bit.
You want to start thinking about how things move on your screen just because, I mean, like I said,
you saw that instant animation was just kind of jarring.
So let's go back to wish-List and we're just going to do this.
And that's a little bit better.
So you'll notice that if you just click, it goes away and the items move up.
Now, in the actual case of a user interacting with that little element, I would probably have like
a warning come up that says, are you sure you want to delete this?
Or maybe if we don't have a warning that prevents them from doing that right away or a confirmation
we have maybe like a little toaster, a banner that says, do you want to undo that?
So let's actually prototype that.
So we're going to you notice how like we have similar screens repeated over and over again.
Well.
That really kind of.
Is the point, I mean, you're trying to create these little interactions that are actually quite complex,
there's so many moving pieces that we don't necessarily take into account.
So let's just create that as a point of reference.
And what we can do is.
Let's just create a little toast.
We can just have it at the bottom, which should be pretty cool.
Let's just set the film to why we can even give it a little shadow so we have a little bit more.
You know, just contrast.
We are going to fix this position into the bottom.
Let's just position it.
Above the nav bar, perfect, we can just give it like.
A little bit of a border radius and.
Let's just fix that shadow because it's a really hard shadow, so that's fine, we can give the blur
like a 20.
We bring down the opacity on that.
I think that's totally cool for now.
Let's just draw some text in there.
Are you sure you want to remove that so I mean, like even when you write copy, you should actually
think about it from the user's experience.
Don't just fill everything with, like, a lorem ipsum.
You have to start thinking about this kind of stuff really early.
So that's a little bit big.
We can actually just bump that down a bit, give regular.
OK, and we can probably have, like some more Texan, the side here that just says a new.
And let's just underline it to make it look like it's actually clickable or make it bold.
OK, all right, alignment's.
I like.
Very nice.
OK.
OK, so it's.
Very.
Very good, it is definitely easy to see and easy to tap, and if the user does tap that, we need to
think about them going all the way back here.
And we're going to smart enemy again, because what that will do is it will essentially bring that product
back in the same way it was removed, or at least it should be.
So after delay.
We can do after delay, so after that happens a hundred milliseconds, let's actually go to here and
let's see what happens.
So actually, let's see how this works out.
Because there's a couple of ways we can do this.
So let's start again, we're going to remove this.
Oh, nice.
Let's take a look so we could have that toast as an overlay, so like if a user clicks out of it, I
mean, we can hide it.
But I think it's nice this way because it's kind of like right in the user's face.
This is a pretty big thing, especially if they remove something from a list that they created.
You know, people can easily do that sometimes.
Maybe we hide this within like some sort of, like, menu button like that's like that delete.
But this is really cool.
So.
It removes and then after the delay, this pops up and it goes back cool, so that's how you create
some pretty small micro interactions and not using much of your time to create something like that.
But it can easily illustrate like what you're trying to get across.
So we have a little toast that pops up and it comes back perfectly.
So go out there.
I mean, have some fun.
Think about those little interactions, like let's go back together and I can show you a couple that
I'm already thinking about.
So maybe when they click this product, you know, maybe the image expands to this section and it goes
straight to the home page.
Like, you can already start kind of like prototyping that animation if you want.
I'm going to teach you how to do something like that when we get back into actually discussing motion
and micro interactions.
There's a couple of little things like what happens when you click plus and minus, like it doesn't
actually need to be an animation or anything, but I just need to know, like a feedback change.
So start thinking about these little things like that.
Maybe like if you remove everything from your cart, does like the notification go away or do you and
have the notification.
So those are all small little micro interactions that you can start thinking about.
So that's it for the absolute prototyping basics and figure like these are the absolute basics that
you'll need to know at least to just prototype quickly.
And yeah, you can just go out there really fast and put together a quick prototype like we did here
in terms of like an interaction or if you really wanted to, you can link together the NAV to just show
people just the entire overview of the application.
I wouldn't necessarily do that.
And I have all these built in.
You could, but it would be like a massive file that it would be so easy to kind of get lost in.
So take it easy, go out there, validate things that you want to validate, like the small interactions
or just like certain user flows and get that feedback that you definitely need to just iterate on your
product.