Form Patterns

[MUSIC] Earlier we explored the difference between 0:00 UI patterns and persuasive patterns. 0:04 Now we're going to look closer at some examples and 0:09 we'll start by focusing on UI patterns. 0:13 For the rest of these lessons, we're going to look at specific problems and 0:16 apply design patterns to fix them. 0:20 First, UI patterns, and then later persuasive patterns. 0:22 I want to warn you, many of these patterns may seem like obvious advice, 0:26 because you've probably seen them before in web apps and 0:31 mobile apps that you've used in the past. 0:33 The thing you should learn to identify is the initial problem 0:36 because the solution will follow. 0:40 Oftentimes when creating apps, it's easy to build things a little too quickly and 0:42 create user experience issues. 0:47 But, if you can spot these problems early, and 0:50 fix them with a pattern, your users will have a smoother experience. 0:54 The other caveat that I would like to point out now 0:59 is that this will not be an exhaustive look at every design pattern out there. 1:03 There is simply way to many to give each one it's own example. 1:08 Instead, we will break down patterns into broad categories and 1:13 take a look at a few select examples to give you an idea 1:17 of the types of problems that design patterns can solve. 1:21 On the web and in mobile apps, it's common for 1:25 the user to input information in a web form. 1:28 And if the user doesn't put in data in the way the system expects, 1:32 we need to provide the user with feedback so they can make corrections. 1:37 This is called form validation. 1:42 Let's take a look at a few UI examples and try to improve them. 1:45 In these lessons i'm going to use Balsamiq mockups, 1:51 which is available for Windows and Mac OS. 1:55 Check out the notes associated with this video for 1:58 a link to Balsamiq, if you don't have it already. 2:01 You don't have to use Balsamiq for these lessons because really any drawing app or 2:04 mockup program will do. 2:09 Even a pen and paper will work fine. 2:11 I'm just using Balsamiq because I find it's one of the easiest tools for 2:14 me to use when demonstrating UI concepts on video. 2:17 First, let's quickly draw out a typical registration form. 2:22 The fields we want are an email address, password, 2:27 password confirmation, and a phone number. 2:31 And lastly a submit button 2:34 that says register to indicate the action we're taking. 2:37 So here in Balsamiq there's a couple of ways we can create UI elements. 2:41 I'm going to go up to Common here. 2:47 And I just need some text or a label. 2:50 And I'll call this email and then we're gonna need a button. 2:55 So let's just that grab that now. 3:00 We'll put that down at the bottom and rename it later. 3:01 And then we're also going to need an input box. 3:05 So I'll jump over to forms here, 3:09 scroll over to the right and grab this text input. 3:12 So let's drag that out for Email. 3:20 And I can select these. 3:25 And just Command+C and Command+V. 3:27 To copy them and paste. 3:32 And, I'll rename Email to Password. 3:36 And then we'll just paste again, 3:38 and say Confirm Password. 3:43 And paste one more time And 3:46 double-click to rename this to Phone. 3:50 And then we change the label on this button by double clicking and 3:56 we'll call this Register. 4:01 Hit enter to confirm. 4:04 So this form is okay on its own but pause the video and 4:07 think about what might make this better. 4:11 The first thing I notice about this form is that I don't know what's required and 4:17 what's optional. 4:22 Let's say this service doesn't require a phone number and it's optional. 4:24 That's great, because personally, I don't like putting in my phone number into 4:29 services, because I want to avoid spam calls. 4:32 It's great that it's optional here, 4:36 but how do I know that it's optional without submitting the form first? 4:38 There's two ways we could approach this. 4:44 We could mark all the required fields with a red asterisk or 4:46 text that says it's required, since that's a common pattern across many web forms. 4:51 But in this case, all of the fields are required, except for the phone. 4:56 So, the second way to approach this, is to only mark what's optional. 5:02 A typical way to do that is to include the term 5:08 optional in parenthesis next to a form field. 5:12 So let's do that now. 5:16 I'll double click on Phone and I'll add a space and 5:17 in parenthesis I will say it's optional. 5:21 Great, now what happens if the user puts in a bad email address or 5:26 an invalid phone number? 5:32 And what if they type in a weak password? 5:33 We should always have server side validation to check the input. 5:36 So if they hit enter to submit the form, even if they've hacked the JavaScript, 5:41 or have JavaScript disabled, 5:46 the server will still return them to the same page with the errors highlighted. 5:48 However, that's kind of a clunky way to find out 5:54 after the fact that your input was no good. 5:57 Instead, let's add some real-time form validation. 6:00 Real time form validation is advice that will pop up when the user moves 6:04 from one form field to the next. 6:09 There are lots of ways you could display this information. 6:12 But I'll put them in yellow bubbles to the right of each field. 6:15 A check mark will note a good input and 6:20 an X will show where corrections need to be made. 6:24 So I'm going to go to containers here and 6:29 I will draw out a rectangle. 6:34 Next to email here. 6:40 That should be good. 6:43 And I want the style to be rounded, so I'll change that in the inspector, 6:45 and then next I want to add a text label. 6:50 And let's say that this email address was invalid. 6:57 We'll say in, 7:00 valid email address. 7:03 And let's make that a little bit larger here. 7:07 That's good. 7:12 And then i'm looking for the X icon. 7:14 So we can just come up to the search in the upper right here, and 7:18 I think we can find that. 7:23 That's called Times, in this case. 7:24 I actually think I want this Times Circle. 7:27 So we'll put that there. 7:32 And let's change the color on this to red. 7:34 And on this rectangle, we'll change the background color to a light yellow. 7:39 And I think that looks good so far. 7:47 Let's actually double-click on the input here to change this to an invalid 7:52 email address. 7:56 We'll see nick@example@com. 7:56 Of course that is wrong. 8:00 And then let's have a password mismatch here. 8:03 So I'll type in a password first and I'll just type in a bunch of asterisks here. 8:07 And then I'll only type in a few here. 8:15 And let's copy this, actually let's make this a little smaller first. 8:18 And then we'll copy all of this stuff. 8:24 Paste it a few times here, because we're going to need it, for these other two. 8:28 And here we'll say passwords don't match. 8:35 And here it will say that this is actually a strong password and 8:44 we need to change this to a check mark. 8:49 So let's search icons here for the check. 8:52 There it is and we'll change that to green and I think that looks okay. 8:56 Contrasting colors and 9:03 shapes can be used to call attention to information like this. 9:05 And if the user happens to have a valid response and 9:09 changes it to something that's invalid, or 9:13 if they make a correction these bubbles can update as the user types input. 9:17 Updating after each character is particularly useful on the password field, 9:22 we can tell the user if they have weak password, or a strong password but 9:28 still accept weak passwords, if they choose to submit them. 9:33 This is actually one form of another pattern called a password strength meter. 9:38 If you wanted to take this idea a step further, you could include a set of 9:44 bars below the password box to indicate the strength of the password. 9:48 This is much better than where we started. 9:54 Now users can get feedback before they submit the form, which can encourage 9:57 good security practices with stronger passwords, and it saves some time 10:02 because they don't have to submit the form to see if their input is valid. 10:07 And if the user happens to submit the form anyway, these same bubble can 10:11 appear after a page reload once the data is validated on the server side. 10:16 As you can imagine there are many more design patterns, 10:23 in the notes associated with these videos you can find resources that list 10:26 examples of many other types of design patterns. 10:31 Don't worry about trying to memorize all of these, 10:34 what's important is learning to recognize UX problems. 10:37 Then, you can search these resources, or 10:42 search the web, see if there's a pattern that matches the problem. 10:45 Now, let's move on and look at some more UI patterns. 10:50