[MUSIC]

Well hey everybody, I'm Nick Pettit @nickrp on Twitter and I am a web design

teacher here at Treehouse, which of course is the best way to learn web design.

Web development, mobile business and so much more.

You can check us out at teamtreehouse.com, which I have up on my screen right now.

So, let's get into today's workshop.

Today, we're going to be talking about the blank slate.

Which is also known as the empty state.

This is basically when your web application

or your website doesn't have any data yet.

This could also apply to say, mobile apps.

So, if you download an iPhone app or an Android app and you don't have

any data in it yet, it will be in a state called the blank slate.

So there's no data, there's no.

Notifications or to-do items or form posts or

whatever kind of data that your application might have.

Now, this is a very important part of UX.

This is basically the first impression of your app.

So, you want this to be a really really good experience for new people

because it can basically be what's called the on boarding experience of your app.

They open it up.

They wanna start using it.

They don't want to see a big wall of text and have

to read like a, a PDF document to learn how to use it.

They just wanna start using it.

So, it's very important to create a good blank slate that

onboard people very smoothy, and gets them up and running very quickly.

So, it is one of the most important

parts of the user experience, or the user interface.

one, there's a couple of big ideas with the blank slate that I, I do want

to go over before we get into actually

designing our own blank slate as an example.

The first big idea is that it should invoke a feeling of self-reliance.

Like I said, nobody wants to come and read a big wall of

text or read a ton of instructions before they start using your app.

They just wanna get going right away.

If you do that right, it can give people this really

amazing feeling of self-reliance, like they can do things on their own.

They don't need anybody else's help and that's

really one of the wonderful things about the web.

It's a very empowering medium.

People can go on there and, accomplish

whatever it is that they want to accomplish.

So, that's a important idea to keep in mind.

Kind of just a, a high level idea.

Not necessarily something that's super practical.

but, something to keep in mind as you're designing it.

So I mentioned once again you don't want a ton of instruction

upfront, you actually wanna break that

instruction up into small bite-sized chunks.

So maybe on the first screen of the app it's maybe like a welcome

screen or maybe it's a quick tour of the various features of the app.

And you say you know, here's the first thing

you wanna do if you want to get started.

Let's say you have a to do app, you might present

a screen that says you don't have any to do items yet.

Create one now and you can have a button there

that allows people to create a to do item immediately.

Maybe even if that button is outside the

context of how they would normally create it.

If you have, like, an iPhone app for example, and

you have a button in the upper right corner, that's like

you know, a plus button, or a pencil icon, or

something like that, if they want to add a new item.

You could actually have another button, in that on-boarding experience, in

that blank slate that just says create a new to do item.

And that makes it really easy to find.

As the immediate action, that people should take next.

So, when they hit that button, what happens next, right?

Well, you want to take them to the screen that allows them to, create a to do item.

And, on that screen, you could maybe have

another little piece of information that helps people along.

In that process and says something like you know

here's where you wanna put a description or descriptions

can look like this or you can tag your

to do items, maybe that's a feature of the app.

And as they move through those screens you want to have

little bits of pieces that explain the app as they move along.

So as they're moving through the application, you're educating them in

parallel so you don't have this big block of education up front.

And then this part of the opera they can actually finally start using it.

You wanna try to break that up and make it a

sort of a, a fluid stream of consciousness if you will.

So, another big idea is to highlight what's unique about your application.

So, there is a lot of common design patterns

across many different types of web apps and web applications.

So for example, you might have seen that little

three line Menu bar, on a lot of different

apps such as Facebook, or I mean its, its

everywhere, I'm kind of blanking on an example right now.

But it is in the Facebook app, and it's

in many, many other web applications and mobile apps.

And you hit this little three-line Menu bar, and the menu pops up.

That isn't officially documented anywhere, but it's sorta

become kind of a, a de facto design pattern.

And

that's something that you wouldn't want to

necessarily highlight in the blank slate of an

application, because people have seen that before,

people are starting to become familiar with it.

And if you know that your users are gonna be kind of savvy users like they've

used other web applications before, this isn't like

the first time they've ever used the web.

Then it's totally okay to not really address that, it's just kind of there,

it is what it is, and they should already know how to use it, hopefully.

Rather you wanna highlight what's unique about your app, so

if there's some crazy feature that you know, you custom developed.

You're totally the pioneer in this particular area then you wanna

highlight that part of the app and explain how to use it.

You wanna say, you know this is x, y, z feature.

And it does this.

And here's how you can use it.

And here's an example of the data that you might put into this feature.

And by doing that, you can educate people and very quickly get them

up to speed without bogging them down with the stuff that the already know.

So the next big idea is to use dummy data.

And for this, I'm actually gonna direct your attention back to my screen.

I'm gonna go to teamtreehouse.com/features.

And on this page we basically describe the

features of treehouse as the url applies there.

And if I scroll down here, you can see sort of

a mock up of that dashboard experience I was showing you previously.

So if I switch back.

To my Home screen.

You can see, okay, I'm learning iOS development, and here

are the parts of iOS development that I've done already.

If I flip back here, you can see a very similar thing.

It shows you, okay, this is kinda what

it's gonna be like, and there's step-by-step guidance.

And you can see, oops, there we go.

You can see kind of what that looks like here.

So I'm learning object, objective C and we have these steps here.

Here are, here's the last video that I watched and I need to take this quiz next.

We have the exact same thing here however, it's at a slightly

different level of abstraction so you'll notice we don't actually have text there.

We just kind of have a representation that says,

this is what the experience is going to be like.

There's a couple of other examples I think, yeah, here we go.

So here is the Home screen I was showing you

previously and again, it's at a slightly different level of abstraction.

There's not a full level of detail there.

We're only highlighting the important parts, and we're saying, you know,

you can earn points here, and here's how you track your progress.

And so on, and the shell of the app is kind of

greyed out because that's not the important part of this particular example.

So, this is what's called dummy data.

I mean, this isn't exactly a perfect example of dummy data, but

let's say that users log into your app for the first time.

And again, I'll use the example of a to-do app.

You might wanna have a couple of to do items there already.

So for example, you could have maybe one or two to do items

that people can check off as they complete parts of the application.

So the first to do might say, create a new to do item.

And the second one might say you know, tag a couple of to do items to put them in a.

A group together or category.

And that gives the users a little bit of an idea of what the

data might look like once the application is actually populated with information.

So, typically, like I said, that's called dummy data.

There's two more things I wanna highlight before we jump into design.

The next thing is to make the next action obvious.

So, as I said before, if you are kind of guiding the users through this stream

of consciousness, you wanna make it very obvious

what the next thing is they should do.

So if they hit a page, they don't have any to do items,

and you have this create new to do item button, it's gonna be

very obvious that that's the button that they should hit especially if it's

like the biggest thing on the page or the only button on the page.

That's the only thing that they can do, or

it's the most obvious thing that they should do.

And that will help them go through the application in the

flow that you want them to, that's going to educate them best.

The last thing is to create no dead ends, and again, I have an example for this.

[SOUND].

Let me bring it up here.

So if I go to apple.com, and just kinda put in

a bunch of junk there to pull up the 404 page,

you'll see that even though I'm hitting a page that doesn't

exist on Apple's website, they give me a ton of options.

And they say you know, did you try searching for this, maybe you

can use a search feature and find what you're looking for that way.

And if not you could maybe try one of the links below.

And they present you with a site map of the entire website.

And it makes it really easy to jump to.

Almost any page, at least the major pages on the site.

Certainly the site is much, much larger than this

list, but this will bring you to kind of the

major groupings of content that maybe you're looking for

and you can find what you were looking for there.

And there's a number of different ways you might hit a 404 page like this.

You could just type in a, a junk URL like I did.

In this case, or maybe you were just

clicking around the site and something was actually broken.

I mean, even a company like Apple can make mistakes and can have a 404 page.

So if you do end up presenting a 404 page like this, try to make sure that it's

useful and doesn't just create a dead end and

just says like oh, sorry, couldn't find that page.

I mean, that's kind of useless and forces the user

to hit the Back button or type in a new URL.

Which but, can be a little bit annoying.

So, that's pretty much, all of my notes here.

Those are kind of the big ideas I wanted to address in the blank slate.

Certainly the blank slate is more complex than

that and you could get very deep into this.

And, it's going to vary from one application to another.

So, somethings that I mentioned may not apply at

all and some things that well, you get the idea.

Vice-versa.

Let's get into some design and to do that

I'm gonna bring up an app called Balsamiq Mockups.

And, you can use any mock up app that you like.

I like Balsamiq Mockups just because I've been using it

for a long time, I'm very comfortable and efficient at using

it but there's plenty of other apps that you can try

if you want to create some mockups and some wire frames.

So, I'm going to go with the example that

I've been using throughout of creating a to do list.

So I'm going to drag out an iPhone here, and I'm

going to make it actually, I'm not going to adjust the size.

I'll, I'll maybe do that at the end.

Now let me just save this to my desktop real quick.

I'll say todo-mockup, just in case something happens there.

And, let's say that this is

a to do app, and I'm going to go grab some text here,

and I'm gonna put it at the top, and I'm going to say you know, My ToDo App.

We can assume that this is maybe the logo for the app and it appears at the top.

Let's increase the font size here, there we go, lets center that,

and that's probably a good size for mobile.

And let me also create a little container there.

I just want a, a rectangle in front of

that, just to kinda separate that content a little.

We'll say that that's maybe like a, a Menu bar,

or something like that, that's going to have more stuff later.

Send that backwards.

There we go.

I'll move that up a bit.

So now we have My ToDo App.

Certainly not the best name for an app but of course that's

something you might come up with later and let's create some text.

And this text will say You don't

have any todo items yet.

And, again, we'll center that.

And we'll put that right, in the middle.

And then, right below that, I'm going to add a button.

And.

Cre, I'm gonna say Create a ToDo Item.

And that's centered, that's good.

I wanna make this button a little bit

larger than I might normally make a button.

Cuz it's, it should be the call to action or the most important thing on the page

and this is kind of a little bit of

bad practice here, but I'm gonna do this anyway.

I'm actually gonna change the color of this button.

The reason that's bad practice is, typically you wanna keep

wire frames, or quick mockups like this, black and white.

But, I am gonna change the color in this case, just so

I know later on, that this is a really important thing and it

should be a different color, or a different shape, or use some sort

of principle that's going to differentiate it from other things on the page.

So, what happens when people click Create a ToDo Item.

Well, let's go ahead and take all this stuff here and I'll just duplicate it.

[BLANK_AUDIO]

And, now we'll create this page that says

something like, you know, Create a ToDo Item.

This is gonna be the page where, people actually, create this stuff.

So I'm gonna head over to Forms and let's

see, do I have like a normal input box here?

There we go.

Text Input all the way at the end.

That's weird.

And it will say name your to do item.

So maybe that's where you put in a name.

And we should have a label there, so let me see if I can find a form label.

We'll probably just have to use text for that, which is fine.

So I'll say Item Name, which probably isn't the best

name for this particular form field, or the best label.

Might want to come up with a little bit of a better label later on.

Mockups are definitely something where you want to iterate

multiple times and come up with a better solution.

And let's go ahead and continue here with a text area.

And I'll call this a description.

Now this is gonna be the description area.

So let me type in a description for this to-do

item and I'll say, This is a todo item description.

Be sure to include any notes about a todo item here.

Just in case you forget what this name is supposed to mean.

So we'll, go ahead and add a label right above that.

Actually I'm just gonna duplicate that.

There we go.

And I'll save Description and then I'll take

my button here and, I'll just say Create.

And there we go.

So, now we have two different screens in our ToDo App.

And you kinda get the idea how one screen should flow into another

and kind of give an idea as to what should go in each place.

So when you first hit the app, you don't have

any todo items, and you need to create a new one.

And then, when you click that button it takes you to the next screen.

And it has some more descriptive text that describes

what you should be putting into those particular data fields.

Now I do wanna show one other way that we could have designed this.

So let me take this first screen again.

And I'm going to duplicate it, and move it over to the right here.

I'll give it a little bit of separation so we know this

is actually a different thing, let me make some space over here.

There we go.

And let me get these controls out of the way.

There we go.

So, I wanna design this differently.

Let's say that we wanted to create a list.

Actually, I don't like that list.

Unless, can I put

horizontal rules below each one of those?

No, I don't think so.

So actually, I might wanna create a menu.

There we go.

So we'll pretend that this menu is our todo

list, and we'll say item one here is first,

create, we'll make some square brackets here.

Create your first to do.

And then, we'll say, categorize your to dos.

And I'll stretch this out so that it goes

across the screen, and on the iPhone this could be.

Table cells so that, you know, you can check

each one of these off and, you get the idea.

So this could also be a blank slate.

Maybe if we add like the Create ToDo Item button there.

And, let's see, do we have any more buttons?

Oh, there's checkboxes.

That probably would have been better for me to use.

That's okay.

I'm gonna grab a button here.

This is actually kind of an iOS 6 and older button, but that's okay.

I'll say New ToDo, and I don't want an arrow on that.

I just want that to be a normal button there.

So maybe we could have an app that looks.

Something like that, where we have these buttons here

that allow you to create a new to do.

And that will always be there.

But, if you've never created a to do before, or if you don't have any to dos,

you can click this big button here that's

very obviously the next action that you should take.

So, that's kind of a whirlwind tour of the

blank slate, or the empty state of an application.

We went over some big ideas that are important to keep

in mind as you're designing this very important piece of UX.

And we also did a quick mockup of what a

blank slate might look like for a todo mobile app.

And with that, I think we're going to get into some questions.

First question says.

Would it be better to use dummy data that is image

based like tree house rather then actual text to save confusion?

It's hard to say it really, really

depends on what type of application you're designing.

So, if you want to include dummy data.

You could actually make that real data, like we did in our ToDo app, so you

might actually create, some, to do items, that

describe how you would actually use that ToDo app.

You could just create some text and say, hey, you don't have any todos.

Here's a button that allows you to create ToDo items.

But, yes you could actually use an image based solution.

So for example, those mockups I was showing

on teamtreehouse.com/features could actually be present on that page.

Maybe like a, a modal window comes up that people can close.

Or maybe that's part of a tour.

Or maybe that's just what you show if there's no data.

You say hey, this page is really awesome.

Here's what it looks like when there's data

in it, but here's a button to go ahead

and create this data now, or start learning,

or whatever the context of your application might be.

That's something that's very important to consider

when creating a blank slate, is the context.

You wanna figure out first, where the user is in the application, you

wanna present something that's relevant to where they are and what page they're on.

But secondly, you want to try and anticipate their needs.

So I'll give you an example.

Maybe it's the first time they're hitting

the application and they don't have any data

yet, they've never used it before and they need to learn how to use it.

Alternatively, again in our ToDo list example.

Maybe they have been using the application for awhile, and they completed all

of their to do items and they deleted them all, and they're all done.

And now they don't have any more todo's,

and once again we're back into the blank slate.

You might wanna present a slightly different interface in that particular

case, because they're already familiar with how to use the application.

And maybe you don't present the blank slate at all,

you just say, hey, you don't have any todos, or you

could present something like Gmail's Gmail's inbox where you say woohoo,

you've answered all of your emails, or your inbox is clear.

So, you could congratulate the user for completing all their todos.

So the larger point being, make sure you keep

the context in mind when making those types of decisions.

Maybe an image is right, maybe text is right.

It's really hard to say.

It depends on the context and it depends on the application itself.

So, our next question from, is from Aaron.

And Aaron asks what would you say Nick, about

sketching on paper versus using Balsamiq and similar technologies?

So, I'm actually a big fan of creating mockups on paper.

I love to just use pencil and paper to draw out

web apps or websites or mobile apps or whatever the case may be.

be, I just personally feel like pencil and paper or pen and paper is a much

faster way to iterate over an application very

quickly because you can just draw stuff out.

You can cross it out.

You can.

Create a new drawing.

And it's all very fluid and organic and rapid and it

doesn't bog you down in the technical details of an actual application.

If I do want a slightly nicer looking mockup, maybe

something that you know, I need to present to other people.

Or in this case if it needs to be digital and I have to

show it to you somehow, then a tool like Balsamiq Mockups is great for that.

And many people that maybe don't feel like they're very artistically talented find

a tool like Balsamiq Mockups to provide them with a more fluid way to work.

Really, it doesn't matter it just it all depends on what you feel most comfortable

using because you want to be efficient using whatever tool it is that you choose.

So, our next question says, do you recommend joyrides or virtual tours.

To introduce users to a web app.

So, in other words should you just allow your users to run

wild and crazy with your app right away or should you give

them a tour upfront where you kind of point out the various

features and use that first and then give them access to the application?

Again I don't really have a personal preference.

At Treehouse, we do have a couple of tours, just because

Treehouse is meant to cater to beginners and advance people alike.

So, we wanna make sure that.

We don't leave anybody behind and everyone can get up

to speed with how to use various features of the site.

So we do have a quick tour on most pages

where we say, you know, here's this thing, here's this thing.

Or if you want, you can just go ahead

and skip the tour altogether and jump right in.

It really, once again, depends upon the application and the context.

It's hard to say without a very specific example.

Whether a joyride or a tour is better and in fact, even with that

specific context, it could be hard to say which one is better than the other.

That might actually be a really good thing to maybe test.

Maybe you have one cohort of users that you test

with a joyride and another that you test with a tour

and you see over time how various metrics of each

group performs and you can kind of make a determination there.

It sounds kinda crazy to go to that level of testing.

But it's actually really important because it

is the on-boarding experience of your app.

Which is one of the most important parts of the user experience overall.

You want people to get on board quickly and

feel comfortable using your application as soon as possible.

So, next question says, are there other

mockup applications like Balsamiq that you recommend?

There's quite a few.

If you just Google for it, you'll come up with a whole bunch.

I think one is called called Mockingbird I'm actually, I remember using that

a long time ago, I'm actually not sure if that's still a thing.

Maybe it is.

So that might be a good thing to Google.

A lot of people like to use OmniGraffle.

So if you're much more advanced at creating

mockups and, or maybe you're already familiar with Omni's

other products, you might want to check out

OmniGraffle that can help you create very Advanced mock-ups.

You could actually make more detailed mockups

in a tool like Photoshop or Illustrator.

You just have to be very careful to not spend too much time perfecting the pixels.

And pushing them around before you actually get into code.

You wanna use a tool that allows you to iterate very quickly.

So next question is from Caleb.

And Caleb asks, would you use a blank slate for designing an Android app?

Absolutely.

I mean, we we just went through how to design a blank slate for an iPhone app.

I mean, this could've just as easily been an Android device.

I mean, just because this particular mock-up looks like

an iPhone, doesn't mean it has to be an iPhone.

So yeah, totally.

If you are designing apps for iPhone, Android desktop or

a web app, or maybe some sort of other type of mobile device like a

tablet or maybe even an experience for televisions, whatever it may be.

This is a totally legitimate way to create

an onboarding experience to use the blank slate.

Or empty state.

So, I think that's all the questions we have.

Thanks so much for watching.

Again, we're going to be broadcasting these at teamtreehouse.com/live.

Treehouse of course is the best way to learn

web design, web development, mobile business and so much more.

I'm Nick Pettit, @nickrp on twitter.

And we will see you at the same time next week.

Thanks so much for watching, and we'll see you real soon.