The Blank Slate

[MUSIC] 0:00 Well hey everybody, I'm Nick Pettit @nickrp on Twitter and I am a web design 0:04 teacher here at Treehouse, which of course is the best way to learn web design. 0:09 Web development, mobile business and so much more. 0:14 You can check us out at teamtreehouse.com, which I have up on my screen right now. 0:17 So, let's get into today's workshop. 0:23 Today, we're going to be talking about the blank slate. 0:26 Which is also known as the empty state. 0:30 This is basically when your web application 0:33 or your website doesn't have any data yet. 0:35 This could also apply to say, mobile apps. 0:38 So, if you download an iPhone app or an Android app and you don't have 0:41 any data in it yet, it will be in a state called the blank slate. 0:46 So there's no data, there's no. 0:50 Notifications or to-do items or form posts or 0:52 whatever kind of data that your application might have. 0:57 Now, this is a very important part of UX. 1:00 This is basically the first impression of your app. 1:04 So, you want this to be a really really good experience for new people 1:07 because it can basically be what's called the on boarding experience of your app. 1:12 They open it up. 1:16 They wanna start using it. 1:17 They don't want to see a big wall of text and have 1:19 to read like a, a PDF document to learn how to use it. 1:22 They just wanna start using it. 1:25 So, it's very important to create a good blank slate that 1:27 onboard people very smoothy, and gets them up and running very quickly. 1:31 So, it is one of the most important 1:36 parts of the user experience, or the user interface. 1:40 one, there's a couple of big ideas with the blank slate that I, I do want 1:45 to go over before we get into actually 1:49 designing our own blank slate as an example. 1:52 The first big idea is that it should invoke a feeling of self-reliance. 1:55 Like I said, nobody wants to come and read a big wall of 2:00 text or read a ton of instructions before they start using your app. 2:03 They just wanna get going right away. 2:08 If you do that right, it can give people this really 2:12 amazing feeling of self-reliance, like they can do things on their own. 2:15 They don't need anybody else's help and that's 2:20 really one of the wonderful things about the web. 2:22 It's a very empowering medium. 2:24 People can go on there and, accomplish 2:26 whatever it is that they want to accomplish. 2:30 So, that's a important idea to keep in mind. 2:32 Kind of just a, a high level idea. 2:35 Not necessarily something that's super practical. 2:37 but, something to keep in mind as you're designing it. 2:40 So I mentioned once again you don't want a ton of instruction 2:45 upfront, you actually wanna break that 2:49 instruction up into small bite-sized chunks. 2:51 So maybe on the first screen of the app it's maybe like a welcome 2:55 screen or maybe it's a quick tour of the various features of the app. 3:00 And you say you know, here's the first thing 3:05 you wanna do if you want to get started. 3:08 Let's say you have a to do app, you might present 3:10 a screen that says you don't have any to do items yet. 3:12 Create one now and you can have a button there 3:16 that allows people to create a to do item immediately. 3:19 Maybe even if that button is outside the 3:23 context of how they would normally create it. 3:25 If you have, like, an iPhone app for example, and 3:28 you have a button in the upper right corner, that's like 3:30 you know, a plus button, or a pencil icon, or 3:33 something like that, if they want to add a new item. 3:35 You could actually have another button, in that on-boarding experience, in 3:38 that blank slate that just says create a new to do item. 3:43 And that makes it really easy to find. 3:46 As the immediate action, that people should take next. 3:48 So, when they hit that button, what happens next, right? 3:52 Well, you want to take them to the screen that allows them to, create a to do item. 3:56 And, on that screen, you could maybe have 4:01 another little piece of information that helps people along. 4:04 In that process and says something like you know 4:09 here's where you wanna put a description or descriptions 4:12 can look like this or you can tag your 4:15 to do items, maybe that's a feature of the app. 4:18 And as they move through those screens you want to have 4:21 little bits of pieces that explain the app as they move along. 4:24 So as they're moving through the application, you're educating them in 4:29 parallel so you don't have this big block of education up front. 4:33 And then this part of the opera they can actually finally start using it. 4:38 You wanna try to break that up and make it a 4:41 sort of a, a fluid stream of consciousness if you will. 4:44 So, another big idea is to highlight what's unique about your application. 4:48 So, there is a lot of common design patterns 4:54 across many different types of web apps and web applications. 4:56 So for example, you might have seen that little 5:00 three line Menu bar, on a lot of different 5:03 apps such as Facebook, or I mean its, its 5:06 everywhere, I'm kind of blanking on an example right now. 5:11 But it is in the Facebook app, and it's 5:13 in many, many other web applications and mobile apps. 5:16 And you hit this little three-line Menu bar, and the menu pops up. 5:19 That isn't officially documented anywhere, but it's sorta 5:25 become kind of a, a de facto design pattern. 5:28 And 5:32 that's something that you wouldn't want to 5:35 necessarily highlight in the blank slate of an 5:36 application, because people have seen that before, 5:39 people are starting to become familiar with it. 5:42 And if you know that your users are gonna be kind of savvy users like they've 5:44 used other web applications before, this isn't like 5:50 the first time they've ever used the web. 5:52 Then it's totally okay to not really address that, it's just kind of there, 5:54 it is what it is, and they should already know how to use it, hopefully. 5:59 Rather you wanna highlight what's unique about your app, so 6:03 if there's some crazy feature that you know, you custom developed. 6:07 You're totally the pioneer in this particular area then you wanna 6:12 highlight that part of the app and explain how to use it. 6:16 You wanna say, you know this is x, y, z feature. 6:19 And it does this. 6:23 And here's how you can use it. 6:25 And here's an example of the data that you might put into this feature. 6:26 And by doing that, you can educate people and very quickly get them 6:31 up to speed without bogging them down with the stuff that the already know. 6:36 So the next big idea is to use dummy data. 6:41 And for this, I'm actually gonna direct your attention back to my screen. 6:45 I'm gonna go to teamtreehouse.com/features. 6:49 And on this page we basically describe the 6:55 features of treehouse as the url applies there. 6:59 And if I scroll down here, you can see sort of 7:04 a mock up of that dashboard experience I was showing you previously. 7:08 So if I switch back. 7:13 To my Home screen. 7:15 You can see, okay, I'm learning iOS development, and here 7:17 are the parts of iOS development that I've done already. 7:21 If I flip back here, you can see a very similar thing. 7:25 It shows you, okay, this is kinda what 7:28 it's gonna be like, and there's step-by-step guidance. 7:31 And you can see, oops, there we go. 7:34 You can see kind of what that looks like here. 7:38 So I'm learning object, objective C and we have these steps here. 7:40 Here are, here's the last video that I watched and I need to take this quiz next. 7:45 We have the exact same thing here however, it's at a slightly 7:50 different level of abstraction so you'll notice we don't actually have text there. 7:54 We just kind of have a representation that says, 7:59 this is what the experience is going to be like. 8:02 There's a couple of other examples I think, yeah, here we go. 8:05 So here is the Home screen I was showing you 8:08 previously and again, it's at a slightly different level of abstraction. 8:11 There's not a full level of detail there. 8:16 We're only highlighting the important parts, and we're saying, you know, 8:19 you can earn points here, and here's how you track your progress. 8:22 And so on, and the shell of the app is kind of 8:26 greyed out because that's not the important part of this particular example. 8:29 So, this is what's called dummy data. 8:34 I mean, this isn't exactly a perfect example of dummy data, but 8:37 let's say that users log into your app for the first time. 8:42 And again, I'll use the example of a to-do app. 8:46 You might wanna have a couple of to do items there already. 8:48 So for example, you could have maybe one or two to do items 8:52 that people can check off as they complete parts of the application. 8:58 So the first to do might say, create a new to do item. 9:03 And the second one might say you know, tag a couple of to do items to put them in a. 9:07 A group together or category. 9:13 And that gives the users a little bit of an idea of what the 9:15 data might look like once the application is actually populated with information. 9:21 So, typically, like I said, that's called dummy data. 9:26 There's two more things I wanna highlight before we jump into design. 9:33 The next thing is to make the next action obvious. 9:36 So, as I said before, if you are kind of guiding the users through this stream 9:40 of consciousness, you wanna make it very obvious 9:46 what the next thing is they should do. 9:48 So if they hit a page, they don't have any to do items, 9:51 and you have this create new to do item button, it's gonna be 9:54 very obvious that that's the button that they should hit especially if it's 9:58 like the biggest thing on the page or the only button on the page. 10:02 That's the only thing that they can do, or 10:06 it's the most obvious thing that they should do. 10:08 And that will help them go through the application in the 10:10 flow that you want them to, that's going to educate them best. 10:14 The last thing is to create no dead ends, and again, I have an example for this. 10:19 [SOUND]. 10:26 Let me bring it up here. 10:26 So if I go to apple.com, and just kinda put in 10:29 a bunch of junk there to pull up the 404 page, 10:34 you'll see that even though I'm hitting a page that doesn't 10:39 exist on Apple's website, they give me a ton of options. 10:42 And they say you know, did you try searching for this, maybe you 10:47 can use a search feature and find what you're looking for that way. 10:50 And if not you could maybe try one of the links below. 10:55 And they present you with a site map of the entire website. 10:58 And it makes it really easy to jump to. 11:01 Almost any page, at least the major pages on the site. 11:04 Certainly the site is much, much larger than this 11:08 list, but this will bring you to kind of the 11:12 major groupings of content that maybe you're looking for 11:14 and you can find what you were looking for there. 11:18 And there's a number of different ways you might hit a 404 page like this. 11:21 You could just type in a, a junk URL like I did. 11:25 In this case, or maybe you were just 11:28 clicking around the site and something was actually broken. 11:30 I mean, even a company like Apple can make mistakes and can have a 404 page. 11:33 So if you do end up presenting a 404 page like this, try to make sure that it's 11:39 useful and doesn't just create a dead end and 11:45 just says like oh, sorry, couldn't find that page. 11:48 I mean, that's kind of useless and forces the user 11:51 to hit the Back button or type in a new URL. 11:54 Which but, can be a little bit annoying. 11:57 So, that's pretty much, all of my notes here. 12:01 Those are kind of the big ideas I wanted to address in the blank slate. 12:05 Certainly the blank slate is more complex than 12:08 that and you could get very deep into this. 12:11 And, it's going to vary from one application to another. 12:13 So, somethings that I mentioned may not apply at 12:17 all and some things that well, you get the idea. 12:20 Vice-versa. 12:24 Let's get into some design and to do that 12:26 I'm gonna bring up an app called Balsamiq Mockups. 12:30 And, you can use any mock up app that you like. 12:33 I like Balsamiq Mockups just because I've been using it 12:37 for a long time, I'm very comfortable and efficient at using 12:40 it but there's plenty of other apps that you can try 12:43 if you want to create some mockups and some wire frames. 12:48 So, I'm going to go with the example that 12:51 I've been using throughout of creating a to do list. 12:54 So I'm going to drag out an iPhone here, and I'm 12:57 going to make it actually, I'm not going to adjust the size. 13:01 I'll, I'll maybe do that at the end. 13:05 Now let me just save this to my desktop real quick. 13:07 I'll say todo-mockup, just in case something happens there. 13:11 And, let's say that this is 13:16 a to do app, and I'm going to go grab some text here, 13:22 and I'm gonna put it at the top, and I'm going to say you know, My ToDo App. 13:28 We can assume that this is maybe the logo for the app and it appears at the top. 13:35 Let's increase the font size here, there we go, lets center that, 13:41 and that's probably a good size for mobile. 13:48 And let me also create a little container there. 13:53 I just want a, a rectangle in front of 13:58 that, just to kinda separate that content a little. 14:00 We'll say that that's maybe like a, a Menu bar, 14:04 or something like that, that's going to have more stuff later. 14:07 Send that backwards. 14:11 There we go. 14:13 I'll move that up a bit. 14:15 So now we have My ToDo App. 14:18 Certainly not the best name for an app but of course that's 14:20 something you might come up with later and let's create some text. 14:26 And this text will say You don't 14:32 have any todo items yet. 14:38 And, again, we'll center that. 14:43 And we'll put that right, in the middle. 14:46 And then, right below that, I'm going to add a button. 14:51 And. 14:56 Cre, I'm gonna say Create a ToDo Item. 14:58 And that's centered, that's good. 15:06 I wanna make this button a little bit 15:08 larger than I might normally make a button. 15:11 Cuz it's, it should be the call to action or the most important thing on the page 15:16 and this is kind of a little bit of 15:22 bad practice here, but I'm gonna do this anyway. 15:27 I'm actually gonna change the color of this button. 15:29 The reason that's bad practice is, typically you wanna keep 15:33 wire frames, or quick mockups like this, black and white. 15:35 But, I am gonna change the color in this case, just so 15:38 I know later on, that this is a really important thing and it 15:41 should be a different color, or a different shape, or use some sort 15:45 of principle that's going to differentiate it from other things on the page. 15:50 So, what happens when people click Create a ToDo Item. 15:57 Well, let's go ahead and take all this stuff here and I'll just duplicate it. 16:02 [BLANK_AUDIO] 16:09 And, now we'll create this page that says 16:12 something like, you know, Create a ToDo Item. 16:17 This is gonna be the page where, people actually, create this stuff. 16:23 So I'm gonna head over to Forms and let's 16:27 see, do I have like a normal input box here? 16:31 There we go. 16:37 Text Input all the way at the end. 16:37 That's weird. 16:38 And it will say name your to do item. 16:40 So maybe that's where you put in a name. 16:47 And we should have a label there, so let me see if I can find a form label. 16:52 We'll probably just have to use text for that, which is fine. 16:57 So I'll say Item Name, which probably isn't the best 17:02 name for this particular form field, or the best label. 17:08 Might want to come up with a little bit of a better label later on. 17:11 Mockups are definitely something where you want to iterate 17:16 multiple times and come up with a better solution. 17:18 And let's go ahead and continue here with a text area. 17:21 And I'll call this a description. 17:30 Now this is gonna be the description area. 17:34 So let me type in a description for this to-do 17:38 item and I'll say, This is a todo item description. 17:43 Be sure to include any notes about a todo item here. 17:49 Just in case you forget what this name is supposed to mean. 17:58 So we'll, go ahead and add a label right above that. 18:02 Actually I'm just gonna duplicate that. 18:07 There we go. 18:11 And I'll save Description and then I'll take 18:12 my button here and, I'll just say Create. 18:18 And there we go. 18:28 So, now we have two different screens in our ToDo App. 18:30 And you kinda get the idea how one screen should flow into another 18:34 and kind of give an idea as to what should go in each place. 18:38 So when you first hit the app, you don't have 18:43 any todo items, and you need to create a new one. 18:45 And then, when you click that button it takes you to the next screen. 18:47 And it has some more descriptive text that describes 18:50 what you should be putting into those particular data fields. 18:54 Now I do wanna show one other way that we could have designed this. 18:58 So let me take this first screen again. 19:01 And I'm going to duplicate it, and move it over to the right here. 19:06 I'll give it a little bit of separation so we know this 19:11 is actually a different thing, let me make some space over here. 19:15 There we go. 19:20 And let me get these controls out of the way. 19:20 There we go. 19:29 So, I wanna design this differently. 19:33 Let's say that we wanted to create a list. 19:35 Actually, I don't like that list. 19:39 Unless, can I put 19:42 horizontal rules below each one of those? 19:46 No, I don't think so. 19:48 So actually, I might wanna create a menu. 19:51 There we go. 19:54 So we'll pretend that this menu is our todo 19:55 list, and we'll say item one here is first, 20:00 create, we'll make some square brackets here. 20:05 Create your first to do. 20:11 And then, we'll say, categorize your to dos. 20:14 And I'll stretch this out so that it goes 20:27 across the screen, and on the iPhone this could be. 20:31 Table cells so that, you know, you can check 20:36 each one of these off and, you get the idea. 20:39 So this could also be a blank slate. 20:42 Maybe if we add like the Create ToDo Item button there. 20:44 And, let's see, do we have any more buttons? 20:49 Oh, there's checkboxes. 20:53 That probably would have been better for me to use. 20:54 That's okay. 20:57 I'm gonna grab a button here. 20:59 This is actually kind of an iOS 6 and older button, but that's okay. 21:01 I'll say New ToDo, and I don't want an arrow on that. 21:06 I just want that to be a normal button there. 21:14 So maybe we could have an app that looks. 21:19 Something like that, where we have these buttons here 21:23 that allow you to create a new to do. 21:27 And that will always be there. 21:29 But, if you've never created a to do before, or if you don't have any to dos, 21:31 you can click this big button here that's 21:37 very obviously the next action that you should take. 21:40 So, that's kind of a whirlwind tour of the 21:45 blank slate, or the empty state of an application. 21:48 We went over some big ideas that are important to keep 21:52 in mind as you're designing this very important piece of UX. 21:55 And we also did a quick mockup of what a 21:59 blank slate might look like for a todo mobile app. 22:02 And with that, I think we're going to get into some questions. 22:06 First question says. 22:11 Would it be better to use dummy data that is image 22:16 based like tree house rather then actual text to save confusion? 22:20 It's hard to say it really, really 22:27 depends on what type of application you're designing. 22:30 So, if you want to include dummy data. 22:34 You could actually make that real data, like we did in our ToDo app, so you 22:39 might actually create, some, to do items, that 22:43 describe how you would actually use that ToDo app. 22:47 You could just create some text and say, hey, you don't have any todos. 22:50 Here's a button that allows you to create ToDo items. 22:54 But, yes you could actually use an image based solution. 22:58 So for example, those mockups I was showing 23:02 on teamtreehouse.com/features could actually be present on that page. 23:05 Maybe like a, a modal window comes up that people can close. 23:11 Or maybe that's part of a tour. 23:15 Or maybe that's just what you show if there's no data. 23:17 You say hey, this page is really awesome. 23:20 Here's what it looks like when there's data 23:22 in it, but here's a button to go ahead 23:24 and create this data now, or start learning, 23:26 or whatever the context of your application might be. 23:29 That's something that's very important to consider 23:33 when creating a blank slate, is the context. 23:35 You wanna figure out first, where the user is in the application, you 23:38 wanna present something that's relevant to where they are and what page they're on. 23:43 But secondly, you want to try and anticipate their needs. 23:47 So I'll give you an example. 23:51 Maybe it's the first time they're hitting 23:54 the application and they don't have any data 23:55 yet, they've never used it before and they need to learn how to use it. 23:57 Alternatively, again in our ToDo list example. 24:01 Maybe they have been using the application for awhile, and they completed all 24:04 of their to do items and they deleted them all, and they're all done. 24:08 And now they don't have any more todo's, 24:12 and once again we're back into the blank slate. 24:14 You might wanna present a slightly different interface in that particular 24:16 case, because they're already familiar with how to use the application. 24:20 And maybe you don't present the blank slate at all, 24:23 you just say, hey, you don't have any todos, or you 24:25 could present something like Gmail's Gmail's inbox where you say woohoo, 24:28 you've answered all of your emails, or your inbox is clear. 24:34 So, you could congratulate the user for completing all their todos. 24:38 So the larger point being, make sure you keep 24:42 the context in mind when making those types of decisions. 24:45 Maybe an image is right, maybe text is right. 24:48 It's really hard to say. 24:50 It depends on the context and it depends on the application itself. 24:51 So, our next question from, is from Aaron. 24:56 And Aaron asks what would you say Nick, about 24:59 sketching on paper versus using Balsamiq and similar technologies? 25:03 So, I'm actually a big fan of creating mockups on paper. 25:09 I love to just use pencil and paper to draw out 25:13 web apps or websites or mobile apps or whatever the case may be. 25:18 be, I just personally feel like pencil and paper or pen and paper is a much 25:25 faster way to iterate over an application very 25:30 quickly because you can just draw stuff out. 25:33 You can cross it out. 25:35 You can. 25:36 Create a new drawing. 25:37 And it's all very fluid and organic and rapid and it 25:38 doesn't bog you down in the technical details of an actual application. 25:42 If I do want a slightly nicer looking mockup, maybe 25:47 something that you know, I need to present to other people. 25:50 Or in this case if it needs to be digital and I have to 25:54 show it to you somehow, then a tool like Balsamiq Mockups is great for that. 25:59 And many people that maybe don't feel like they're very artistically talented find 26:04 a tool like Balsamiq Mockups to provide them with a more fluid way to work. 26:10 Really, it doesn't matter it just it all depends on what you feel most comfortable 26:15 using because you want to be efficient using whatever tool it is that you choose. 26:20 So, our next question says, do you recommend joyrides or virtual tours. 26:26 To introduce users to a web app. 26:34 So, in other words should you just allow your users to run 26:38 wild and crazy with your app right away or should you give 26:43 them a tour upfront where you kind of point out the various 26:47 features and use that first and then give them access to the application? 26:50 Again I don't really have a personal preference. 26:57 At Treehouse, we do have a couple of tours, just because 27:01 Treehouse is meant to cater to beginners and advance people alike. 27:04 So, we wanna make sure that. 27:09 We don't leave anybody behind and everyone can get up 27:10 to speed with how to use various features of the site. 27:13 So we do have a quick tour on most pages 27:16 where we say, you know, here's this thing, here's this thing. 27:18 Or if you want, you can just go ahead 27:21 and skip the tour altogether and jump right in. 27:22 It really, once again, depends upon the application and the context. 27:25 It's hard to say without a very specific example. 27:29 Whether a joyride or a tour is better and in fact, even with that 27:32 specific context, it could be hard to say which one is better than the other. 27:39 That might actually be a really good thing to maybe test. 27:42 Maybe you have one cohort of users that you test 27:45 with a joyride and another that you test with a tour 27:48 and you see over time how various metrics of each 27:53 group performs and you can kind of make a determination there. 27:57 It sounds kinda crazy to go to that level of testing. 28:00 But it's actually really important because it 28:03 is the on-boarding experience of your app. 28:05 Which is one of the most important parts of the user experience overall. 28:08 You want people to get on board quickly and 28:12 feel comfortable using your application as soon as possible. 28:15 So, next question says, are there other 28:19 mockup applications like Balsamiq that you recommend? 28:22 There's quite a few. 28:27 If you just Google for it, you'll come up with a whole bunch. 28:28 I think one is called called Mockingbird I'm actually, I remember using that 28:30 a long time ago, I'm actually not sure if that's still a thing. 28:36 Maybe it is. 28:38 So that might be a good thing to Google. 28:40 A lot of people like to use OmniGraffle. 28:42 So if you're much more advanced at creating 28:44 mockups and, or maybe you're already familiar with Omni's 28:49 other products, you might want to check out 28:53 OmniGraffle that can help you create very Advanced mock-ups. 28:54 You could actually make more detailed mockups 28:58 in a tool like Photoshop or Illustrator. 29:01 You just have to be very careful to not spend too much time perfecting the pixels. 29:04 And pushing them around before you actually get into code. 29:08 You wanna use a tool that allows you to iterate very quickly. 29:12 So next question is from Caleb. 29:17 And Caleb asks, would you use a blank slate for designing an Android app? 29:18 Absolutely. 29:23 I mean, we we just went through how to design a blank slate for an iPhone app. 29:24 I mean, this could've just as easily been an Android device. 29:29 I mean, just because this particular mock-up looks like 29:34 an iPhone, doesn't mean it has to be an iPhone. 29:36 So yeah, totally. 29:39 If you are designing apps for iPhone, Android desktop or 29:40 a web app, or maybe some sort of other type of mobile device like a 29:45 tablet or maybe even an experience for televisions, whatever it may be. 29:50 This is a totally legitimate way to create 29:56 an onboarding experience to use the blank slate. 29:59 Or empty state. 30:03 So, I think that's all the questions we have. 30:05 Thanks so much for watching. 30:07 Again, we're going to be broadcasting these at teamtreehouse.com/live. 30:10 Treehouse of course is the best way to learn 30:15 web design, web development, mobile business and so much more. 30:17 I'm Nick Pettit, @nickrp on twitter. 30:21 And we will see you at the same time next week. 30:24 Thanks so much for watching, and we'll see you real soon. 30:27