Perception and Memory9:59 with Nick Pettit
The way a user perceives and remembers information can dramatically change how they interact with your software. Providing helpful hints so they don't have to make all the decisions themselves can simultaneously influence the outcomes.
- UI Patterns - UI Patterns is one of the most comprehensive resources for both UI patterns and behavioral patterns.
- Balsamiq Mockups - Balsamiq Mockups is the drawing tool used in these lessons. If you'd like to follow along using the same tool, download and install it. However, any other drawing tool (including pencil and paper) will work fine.
- Project Files - This is the Balsamiq Mockup file that was created during these lessons (as it appears at the end of the course). It's not necessary to download it, it's just here for your review.
[MUSIC] 0:00 UI patterns are often the most visible solutions to user experience problems, 0:04 but what about what we can't see? 0:10 How can we drive a user's behavior toward a goal? 0:13 This is where persuasive patterns can help. 0:16 A persuasive pattern, sometimes called a behavioral pattern, is a type of 0:20 design pattern that can be used to influence a user's decision-making and 0:25 increase their engagement with the product. 0:29 Just like UI patterns, there are many different types of persuasive patterns. 0:32 So we're only going to look at a few. 0:37 Again, I encourage you to check out the notes associated with this video for 0:39 more exhaustive resources. 0:44 We'll start with a category of patterns that can change a user's perception and 0:47 influence how they process information. 0:52 Let's go back to the earlier example of a blank slate, only this time we're creating 0:56 a web app for people that want to save and share recipes for making food. 1:01 Before we present them with recipes to save, 1:07 it would be helpful if we knew a little bit more about their preferences. 1:10 What kind of cuisine they like, dietary restrictions, and so forth. 1:14 That can be a lot of information for someone to just remember. 1:18 And the words they use to describe these things 1:22 might be different than what's in the database already. 1:25 Instead, we can use a design pattern called recognition over recall, where 1:29 they choose from a preset list of item rather than creating the list themselves. 1:35 So let's draw this out. 1:42 I'm going to drag out an image here, and using the text on the image, 1:45 I will type, gluten free. 1:50 So this is one dietary restriction, and 1:55 we're gonna create a whole bunch more of these boxes. 1:58 So I'm going to copy and paste. 2:02 I'll put Enter here to edit this, and 2:05 we'll call this, launch and, say, breakfast, 2:09 and maybe another dietary restriction might be dairy free. 2:15 So let's copy this whole row. 2:23 And we're gonna do four rows of these in total, so here's the second one. 2:25 Let's say maybe there are meals they want to quick prep, 2:31 maybe they like Indian cuisine, maybe they like Tex Mex, or 2:35 Asian cuisine. 2:40 And let's paste another row in here. 2:43 Maybe they want food that is spicy or food for dessert. 2:49 Another dietary restriction is vegan and, of course, there's also vegetarian. 2:55 And let's add one more row here, maybe another meal is snacks. 3:04 And some food might be salty. 3:12 Maybe they want food that's good for when they're on the go. 3:17 And let's add another category for seasonal food. 3:22 So here we're presenting the user with a grid of photos, 3:26 and each one of them has a label for different types of food. 3:32 Obviously, there are many more we could add, and 3:37 we could get more specific with these, but you get the idea. 3:40 The users can click on each one of these photos and 3:44 add them to their interests, building a profile of their tastes. 3:48 It's much easier to recognize things we already know rather than come up with 3:52 things from our memory. 3:56 This is a good start, but it can be kind of overwhelming. 3:58 There is a lot of different types of food and 4:02 a lot of ways we could categorize food. 4:04 This list might be really long, longer than the list we have here. 4:07 We don't want to overwhelm the user, but we can break down this information into 4:12 more manageable pieces using a persuasive pattern called chunking. 4:16 Some of these preferences are dietary, some are based on taste, 4:22 some are a type of cuisine, and some are a mealtime. 4:27 Let's chunk these into categories that will help the user make selections now. 4:31 And also help them remember the breakdown of these classifications in the future 4:36 if they want to explore other options and change their preferences. 4:40 So I'm going to add a label, and let's call this diets. 4:45 And I'm going to increase this font size and make it bold, there we go. 4:53 And let's just move everything down a little bit here and 5:01 add diets up at the top. 5:06 And then we need a few more labels for prep, and 5:11 I'll rearrange these in a second. 5:15 Meal times, and then one for just taste. 5:21 And let's change that to title casing, there we go. 5:28 So I'm going to, 5:33 Make different categories just like this, and 5:38 then we'll rearrange these boxes to match these labels. 5:43 So under diets, we have gluten free and dairy free, that's a good start. 5:50 But these are actually meal times. 5:55 Here are two other diets, vegan and vegetarian. 6:00 We could also argue that desserts and snacks are a meal time. 6:07 And then spicy and salty are tastes, so let's move those down. 6:13 And we'll move these meal times over, 6:20 Just like that. 6:27 And then we'll add on the go, seasonal, 6:31 and quick prep, Up here. 6:36 And then let's add one more category for types of cuisine. 6:44 So we'll say cuisines and we'll add these last three down here. 6:53 This is an improvement, but we still do better. 7:05 Imagine that on the screen before this we were presented with 7:08 a registration from where we filled out our names, email address, 7:12 password, and so forth to create an account. 7:17 Then we're hit with this page where we have to pick our taste preferences. 7:21 That can make the user start to wonder just how many 7:25 steps are left in this process, how long is it going to take me to complete this? 7:28 Well, by keeping the registration form on a separate screen, 7:33 we've actually already implemented a persuasive pattern called sequencing. 7:37 Sequencing is when large tasks are broken down into smaller tasks 7:41 that are easier to focus on one at a time. 7:46 However, a good follow-up to this breakdown is to provide the user with 7:49 an indication of how many steps they've completed in a sequence and 7:53 how many they have left to go. 7:58 A shopping cart and check out process, 8:00 such as what you might find on Amazon, is a good example of sequencing. 8:03 So let's add an indicator at the top here 8:08 to indicate the sequence to the user. 8:13 So to do that, I'm going to type in shape and 8:20 add some of these circles here. 8:25 So i'm just gonna copy and paste these, just like that. 8:29 So let's say that there's three steps, and we're already done with the first step, 8:33 so we'll change the background here. 8:37 And we're actually on the second step, so 8:41 we'll change that background as well to indicate that this is the current step. 8:44 And then I wanna add a line or a horizontal rule that will 8:50 work just to kinda link these together and show their steps. 8:55 And I'll send that to the back, so it's behind all of the circles. 9:00 And then I want to label these. 9:06 So i'm going to drag out a label, and the first one will say Register. 9:09 And then we'll copy and paste that, next one will say Tastes. 9:16 And then the last one, 9:21 maybe they're filling out some additional profile information. 9:24 So again, the filled in circles show what we've already completed 9:29 along with the current item. 9:33 And the empty circle shows steps that we still need to complete. 9:35 This persuasive pattern encourages the user to finish, and let's them know 9:40 that this process is manageable and they just have a few more steps to go. 9:46 These are just a few perceptive patterns, but if you want to see more, 9:52 be sure to check out the notes associated with these videos. 9:56
You need to sign up for Treehouse in order to download course files.Sign up