Tutorialization Patterns4:24 with Nick Pettit
When a user jumps into a phone app or a web application for the first time, they need to be given some guidance. Using familiar design patterns and iconography can help, but hardly ever is a user interface self-explanatory.
- 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.
When a user jumps into a phone app or a web application for 0:00 the first time, they need to be given some guidance. 0:03 Using familiar design patterns in iconography can help but 0:06 hardly ever is a user interface self explanatory. 0:10 And if you do think your app is intuitive and 0:14 obvious, I recommend doing some user testing and 0:17 putting it in front of real people without providing your own explanation. 0:20 Chances are people will get lost pretty quickly, and 0:24 you'll realize that you need some kind of tutorialization. 0:27 In app tutorials, which are sometimes called on boarding, 0:32 should guide the users through their first steps and 0:36 help elevate them to intermediate users as quickly as possible. 0:39 Let's take a look at few patterns that can help. 0:43 When you first log in to an application for the first time, what do users see? 0:46 Here, I've created a simple mock-up for 0:51 a web application where users can upload photos to a gallery. 0:54 But there's one thing missing, 0:59 users haven't put in any of their data yet and there's no photos here. 1:01 So what do they see instead? 1:06 When an application doesn't have any user data yet, 1:08 this is often referred to as the blank slate. 1:10 Here we want to do two things. 1:14 First, we want to give users and 1:17 idea of what the app might look like once it's populated with data. 1:18 So let's add some placeholder photos along with some text that says just that. 1:23 So I'll add some text, and it'll say 1:29 Here's what your gallery will look 1:34 like after you've uploaded photos. 1:39 And we'll mix this a little bit, larger, 1:46 that's good and then let's add a couple 1:52 of image placeholders here, and 1:57 I'll just sort of paste these right along, 2:01 center them, let's make another row and that's good. 2:06 This is a good start but 2:14 the second thing we need to do is guide the user toward the first action. 2:17 This gets into other patterns that are sometimes called a walk-through or 2:22 a guided tour. 2:27 As they go through each step for the first time, 2:28 we can provide some additional helper text that calls out the action and 2:31 intentionally looks incongruent with the design. 2:36 So let's add some text here and we'll say, 2:39 Upload your first photo. 2:44 And we don't want the text to be kind of straight with the rest of the design. 2:50 We'll put it on a bit of an angle, maybe make it bold and 2:54 a little larger in size so that it stands out a bit more as some 2:59 meta instructions that are not necessarily part of the interface normally. 3:06 Next, I will type in arrow into a search box up there. 3:11 And we want this arrow to be pointing at the Upload button from 3:18 this instructional text. 3:23 So in the inspector here, 3:25 I can remove the arrow head on the left side, so it's just pointing. 3:26 And then I can just drag these handles here and 3:32 I'll even pull this middle handle to make it a little bit curvy there. 3:36 Again, to make it with the rest of the design. 3:41 So again, in this case, notice how the text and the arrow are curvy and organic. 3:46 They don't follow the straight geometric lines of the app. 3:54 This helps draw attention to them, and it also informs the user 3:56 that these are meta elements that are not normally present. 4:00 That about wraps things up for tutorialization patterns and for 4:05 UI patterns. 4:09 There are dozens and even hundreds more, but 4:10 that should help get you started thinking in the right direction. 4:13 In the next several videos, we're going to shift our focus away from UI patterns and 4:17 take a look at persuasive patterns. 4:21
You need to sign up for Treehouse in order to download course files.Sign up