All language subtitles for 17 - Sketching User Flows 4

Hey and welcome back.

We're going to be talking about sketching screen states now.

I love sketching screen states.

This focus is on drawing the entire screen or different interactions.

An example is a user comes to a search page, clicks on a search bar, an overlay pops up.

They type get suggested searches.

You get the point.

We start thinking about those little micro interactions as well.

That's the fun part, too.

I spend a lot of my time actually drawing these, so let's go back to our client.

Let's think about something that we can work on.

I kind of gave a little example about searching for a product, and I think that's a good way to kind

of start.

Let's think about our home screen just a little bit more.

So let's just title that.

And what I'm going to do is, well, you'll notice that I'm not really writing any annotations because

they're kind of illegible.

But since we're doing this together, get out your sketchpad.

Keep on going.

You know what I'm drawing?

And we don't really need them in this case.

So if I start to think about this in a little bit more detail, I start to think about what are the

kind of the different types of features and different types of elements that this page should have.

You know, we talked about a profile image.

We have a search here as well.

And we could start thinking about, well, we created a saved page.

How does a user save an item?

So we have our item here.

Maybe it's a little heart on each image.

Oh, no.

I kind of like that.

You know, I start to think about different things like the user can see in relation to that image,

that type of content.

That's really important.

So if we zoom in, I start thinking about the product name.

Start thinking about maybe there is the price.

Maybe there's some.

Product information, if that's useful?

I'm not sure.

Is there a button?

Can users click this whole section?

Is it like a card that's really going to be up to you and what you think is best for users?

Typically, I don't like placing like little buttons over here and just limiting a user because like

on mobile, you know, you want to tap larger surface areas, you got to make your buttons much larger

to.

In this case, I probably will use a card.

I'm not sure just yet, but something to start thinking about.

So this probably like this interaction when I'm thinking about it, maybe it's a carousel.

So when the user kind of swipes left.

What will happen is this will go there and we'll kind of start getting images that go left to right,

which is pretty cool.

So those will go left to right.

But let's think a little bit more about this homescreen I mentioned, like thinking about interest,

we can start thinking about like ways that fits into the app.

Maybe there's like an interest title and like a C all.

Thing where they can go find more interest or maybe edit their current interest.

Maybe they'll see items in relation to certain categories.

And.

They can click on them and put them into a different funnel.

So I'm starting to think a little bit more detail in terms of like what's on the page, what I need

to account for when I'm building a product.

And that's really helpful, especially with screen states.

So we did talk about search.

So what happens if you actually click this search over here?

Let's draw a state.

When somebody clicks a search, I'm thinking like an overlay will pop up.

What does that interaction look like?

So let's just start ground zero.

Number one, we'll just name it overlay.

Maybe an overlay pops from top to bottom.

There's a little X with the search.

We're on mobile, so we have to remember that there's a keyboard here.

It's a lot of rectangles.

We also need to remember that these keyboards have some sort of large button that can be used as an

enter.

So it's an alternate way for them to select something.

So if they're writing something in there, if they're typing something in there, we need to start thinking

about what happens.

So once they start typing.

We'll stay in the same screen.

Everything up here will stay the same, but now we'll start getting some type of head result here.

Let's zoom in so we can write a little bit more neatly.

So if I start typing in something like book.

We're going to change your pen, wait just a little bit more, and we can bold it and say something

like books for.

Eight plus.

And that's a great way just to kind of like make the user's life a little bit easier.

Maybe they're looking for a bookshelf so we can do the same there where we just bring that down and

it will be like shelf.

It'll just finish off the rest.

So it's just kind of auto suggesting, auto completing for them.

So we start thinking about those types of elements that we're going to need.

Obviously, this kind of stays persistent and we'll start thinking about, Well, what happens then?

Maybe it's like a 1.1, but the next step.

Is that they would go straight to search results.

Now, what do search results look like?

Maybe there's, like, a back button.

Maybe we got our search at the top, whatever we wrote.

Maybe we have some information about the amount of results.

Now, maybe there's a filter up here.

This draw little filter icon, not the best, but, you know, it works and they get the results here.

Now here we start thinking about, well, what do they see?

What can they interact with?

I know that they could be if we split these up, maybe they seem more like cards like before, so they

can tap the whole thing and go straight into a product page that we've been sketching a bunch lately.

But, you know, there's probably a couple of other things that we can pull out here.

Maybe we have that heart.

And users can go straight.

To.

Our saved page, whatever that may look like.

I started off with understanding that I'm going to be creating an interaction for this certain flow,

searching for some sort of product.

And I asked myself the question, well, what comes next?

And now I'm asking the question of, well, what alternate scenarios are there?

So there's a couple of different scenarios here.

Users can from here we have different flows.

Users can go see a product.

Users can save their products to a saved page.

Users also can enter a new search.

It can go all the way back.

And users could even filter.

You just could also kind of like just abandon the search if they want to.

Maybe we have a persistent navigation at the bottom.

So there's so many different scenarios like what happens with filters.

Maybe it's like another overlay.

It comes down from the top.

Nice little animation, and I'm starting to think about these animations a little bit more, these micro

interactions, because if I leave them all the way to the end of the project, they're not going to

look good.

They're going to look amateur.

And you should really incorporate motion early on.

They really help a lot with different types of things, like feedback and understanding the state of

a screen.

And we're going to do a whole lesson on motion later, but it's great to just start thinking about it

right now.

So this is like our filters.

We're just going to call it Phil.

And now I could start thinking about the content here.

I mean, now we're branching out and that's totally fine.

Sometimes I don't branch out.

Sometimes I just kind of stop here and I start refining this kind of flow.

But it's pretty cool to start thinking about all the different types of things that you're going to

need to account for, like the different types of UI elements, different types of content.

So if I think about filtering for a product like this, if there's a title, maybe you're going to want

to filter for something like price.

So that may be an option.

You know, maybe it's by customer review or maybe it's by, like, newest items.

Maybe there's another section where it's by review, solely by review, so we can start thinking about

what we're going to need to actually implement.

Moving forward, it's going to really help us in the future.

And this is why we actually just kind of sketch and just do it quickly.

So take some time to really go through that.

Like I said, don't get bogged down by the details.

Like you could tell that we just went through it really quickly and we learned a lot about what possibly

could be in our application.

We created a bunch of screens and we have a really good jumping off point.

But now we can take these, use them for like user flows, use them for site maps and even start building

wireframes like ASAP.

The whole point of sketching is to just be lean, be agile, and don't get bogged down by the details.

Ignore things like dribble or where you see like really high definition, like sketches.

Just go for it.

Jump right in.

And that's it for sketching screen states.