Additional Input Patterns

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