Additional Input Patterns7:49 with Nick Pettit
In addition to form validation, there are several other design patterns that can be applied to user input.
- 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.
In addition to form validation, 0:00 there are several other design patterns that can be applied to user input. 0:02 When I schedule appointments at my veterinarian for 0:06 my cats, the form asks for three different dates that might work for me, 0:09 and they can be prioritized from most desirable to least desirable. 0:14 Let's see how a problem like picking prioritized dates 0:18 can be resolved with some design patterns. 0:22 We want the user to be able to add appointment dates to a list, and 0:26 then reorganize that list according to their most desired date and least desired. 0:31 The first thing we need to add is a way to add these dates. 0:37 We could do this with say a text input, so 0:41 I could go to Forms here, and I could drag out a Text Input like this. 0:46 But it would be very challenging to get the user to format 0:52 the date in the way that the form is expecting, so let's get rid of that. 0:57 Instead, when there's a limited set of possibilities, 1:03 it's best to provide specialized input. 1:06 Many forms take dates using drop down menus of days, months, and years. 1:09 That's probably best when there's a wide number of possible dates such as when 1:15 you're asking the user for their date of birth. 1:19 But if we just need a day that's in the near future like within a few weeks. 1:22 It's best to use a design pattern called a calendar picker. 1:27 Balsamiq has a field element just for that in the forms section, 1:32 and they call it a Date Chooser. 1:37 So I'm going to scroll over here to the Date Chooser and 1:42 drag that into the canvas area. 1:46 And when a user clicks this form element, a calendar will pop up, 1:50 so let's add that calendar with a small arrow to the left. 1:56 In Balsamiq, you can find interface elements quickly 2:01 by typing in the search box up in the right, so let's do that. 2:04 We'll type in Calendar, and there it is, and 2:08 I'll drag that over here and make it a little larger. 2:12 And then I want a little arrow on the left side. 2:19 Believe they call it a Caret, so we'll do a Caret Left, 2:23 and I'll just drag that so it's flush with the calendar there. 2:29 And let's line that up a little better, there we go. 2:36 So in the calendar picker pattern, 2:39 the user can use the arrows in the top left and 2:41 right to change months, and then click on a date to select it. 2:46 Sometimes if a range of dates needs to be selected, 2:53 such as in the case of booking a hotel for several days. 2:56 The user can click on the first day in the range and then select the end date. 3:00 In this case, where we're adding dates to a prioritized list, 3:04 we should add a button so the user can confirm the selected date. 3:09 Once a user has picked a date, they'll need to add it to the list. 3:14 So let's go back to Forms here, and find the Button. 3:18 And I'm gonna put that just below this calendar picker here, 3:24 and we'll change this to say Add Date. 3:31 That finishes the date picker, and now we need to add the list of dates. 3:35 Each date should have the ability to be deleted, so let's do that. 3:40 I'm going to use just some rectangles for that, so I'll go to Common here, 3:46 and there is a rectangle. 3:51 And I'll make it roughly the same size as the calendar 3:53 picker there, maybe a little thinner. 3:59 Change the Border Style, and 4:05 then I want to add some text to this so I'll drag out a label here. 4:07 And let's just pick some dates here, 4:14 so here's my most desired date. 4:20 I will make this a little larger. 4:25 There we go, and we want to be able to delete this too, so let's. 4:29 Add that times icon there, and let's actually change this to maybe red. 4:42 So it looks like a delete button, and maybe let's put a circle behind it too. 4:50 So we'll right-click on that, send it backward, and 4:57 let's actually make that red, and we'll make the times icon white. 5:02 There we go, this looks a little better. 5:10 So we'll do that, and now we'll just select all this, and copy and paste it. 5:17 So let's say we've added three dates here, and we'll just change the days on these. 5:23 And now we have some dates added there. 5:35 However, these dates need to be prioritized, so 5:37 we can't just add them to a static list. 5:41 It would be really annoying if the user had to delete items, 5:43 and re-add them just to rearrange the list. 5:48 We can fix this with a UI pattern called Drag and Drop. 5:52 In this pattern, the user can click and drag a handle, 5:56 usually represented by a few lines that are together. 6:00 And as I drag an item to another place on the list, the list will rearrange itself. 6:04 So let's add those three lines, usually this is called a hamburger menu. 6:10 And it looks like Balsamiq calls the Bars, but 6:16 has thankfully also tagged it with hamburger. 6:19 So this is a little large, I'll make this smaller. 6:24 Put this here, the date over a little bit, and then we'll just copy and paste. 6:28 Those bars and move these dates over as well, just like that. 6:36 The handles on the left indicate to the user 6:42 that these items can be rearranged using drag and drop. 6:46 On a touchscreen, they can tap and drag with their finger, 6:51 and on a computer they can click and drag with their mouse cursor. 6:55 Once we're finished with a design pattern, the solution might seem obvious. 7:00 But remember where we started with this, we needed to choose dates and 7:04 prioritize those dates. 7:08 We avoided a lot of annoying UI problems like badly formatted dates, 7:11 or deleting and re-adding dates just to rearrange them. 7:15 While you're designing, try to imagine yourself as a user 7:20 going through the process, and think about the potential problems that might come up. 7:24 Chances are you're not the only one that's had this problem before, and 7:29 there's a design pattern that can fix it. 7:33 As I mentioned previously, 7:37 we're only reviewing a few design patterns here to get you started on the right path. 7:38 Be sure to check the notes associated with these videos for 7:44 more design pattern resources. 7:46
You need to sign up for Treehouse in order to download course files.Sign up