Delivery Information screen

Let's take a look at the mockup of the form we'll be building, 0:00 a mobile food delivery checkout form for a restaurant called Tacos by Roscoe. 0:04 I'm concentrating on getting just the first screen right for 0:11 gathering the user's delivery information. 0:15 I've included an error reporting screen as well. 0:19 Now, let's take a look at the project files included with this video. 0:22 I've provided a logo icon to work with, as well as color swatches. 0:27 Our initial design frame labeled delivery information is 320 pixels wide. 0:33 Many modern phones have wider viewports, but 0:40 I want to make sure my form is legible at the smallest possible screen size. 0:43 To get started, I'll create a header bar and add my logo. 0:50 I'll start with an instance of my linear gradient component 0:55 from the Design Assets frame. 0:59 I'm resizing the gradient to 320 pixels by 70 pixels, 1:02 adding an instance of my taco emoji logo, and 1:08 typing the name of the restaurant in a Google Font called Nunito Black. 1:12 I'll convert the header into a component just to keep my content organized. 1:45 And I'll call that logo header. 1:54 Next, I'll create one of my three navigation buttons for 2:01 my checkout process. 2:05 It's important to give users context clues 2:21 to let them know exactly where they are and 2:24 how many steps remain. 2:26 Once I've created one button, 2:44 I'll make it a component which I'll name nav button and 2:47 use Command+D to duplicate twice more to create two more button instances. 2:53 Now I'll change the color and text of the billing and the review buttons. 3:04 I could leave these buttons white, but I'd like to suggest that they're inactive. 3:33 Users can't visit these upcoming stages without completing the current stage. 3:39 I'll choose a grey color for 3:46 the inactive button, while keeping an eye on the contrast ratio. 3:48 I want to make sure users with low vision can still read 3:53 the labels of the upcoming steps. 3:57 I'd like to give users a brief summary of their order. 4:16 On a desktop screen, I'd have space for a separate column of order details. 4:31 But on mobile, a brief summary will do until users reach the review order screen. 4:37 People don't like filling out credit card details without knowing 4:55 exactly how much they'll be charged. 5:00 To create the fork and knife icon, I'll head over to fontawesome.com and 5:03 choose Copy Unicode Glyph on an icon called utensils. 5:09 Font Awesome Free is already available for use in Figma, so 5:16 I just need to paste in the glyph using the solid version of that typeface. 5:21 You might notice that as I've been making components, such as my newest 5:35 component labeled order summary, 5:39 that I've been rearranging them so that they appear from top to bottom 5:45 in my layers panel, to reflect their order in my design frame. 5:50 This is completely optional, but I find it helps me locate design 5:56 components quicker later as I add more and more layers to my document. 6:00 I'd like to make the form heading, "Delivery Information", pretty obvious, 6:07 as well as distinguish between required and optional fields. 6:14 This is something you'll want to test on users. 6:33 Are they clear which fields are optional and mandatory? 6:36 Now I'm ready to create some form inputs. 6:51 I'll make them at least 44 pixels high to respect the target size guideline. 7:03 I'm choosing my form labels carefully to try to be as clear as 7:28 possible about what information is needed in each blank. 7:32 By choosing "Your Name" and "Email Address" 7:46 over just plain "Name" and "Email", I'm aiming for clarity, not concision. 7:55 Users with cognitive disabilities might struggle with a shorter label. 8:02 Some form fields may need more than just a label. 8:08 Even if users understand what belongs in the input labeled email address, 8:12 they may still wonder why an email address is required. 8:18 I'm creating an explanatory note. 8:23 Receipt will be sent to this address. 8:31 I'm making the text a little lighter, so 8:42 let me double check my background against my foreground, 8:45 still receives higher than 4.5 to 1 contrast ratio. 8:50 Before I move on, I'll add an additional rectangle to the name field, 9:08 which I'll call focus indicator. 9:13 I'm using a three pixel stroke rather than a single pixel and 9:36 a blue color that doesn't appear elsewhere in my design. 9:38 If the user were to tab to the next field, 9:41 this blue border would shift to indicate 9:47 the email address input is now selected. 9:53 I'm creating blanks for Street Address which will be required, 9:59 and Apartment or Office Number which won't. 10:09 You'll notice I'm placing labels above the form inputs as there isn't 10:21 room to place them side by side on a mobile screen. 10:26 I'm also not using placeholder text. 10:30 It's tempting to save space by using placeholder text instead of form labels. 10:33 But then it's up to the user to remember the purpose of the input 10:39 once they begin typing and the placeholder disappears. 10:43 Placeholder text also creates a tricky color contrast problem. 10:48 Make the text too light and users with low vision can't read it. 10:54 Make it too dark and users might confuse the placeholder 10:59 with a pre-filled form input. 11:03 I'm assuming this particular food delivery service is limited to the United States, 11:08 so I'll reduce the number of form inputs 11:13 by providing instructions indicating that the user's city and 11:18 state can be looked up based on the user's zip code. 11:22 I've included an article on the benefits of this technique in the teacher's notes. 11:33 I'm not requiring a phone number for reasons covered in the previous video. 11:41 I'm also not using placeholder text here because I'm not 11:57 requiring the phone number to be formatted in a particular way. 12:00 If you need to require a particular format, 12:05 you could use placeholder text to suggest the desired formatting. 12:08 But many users struggle to recall that format once they begin typing. 12:13 A better solution is a technique called Input Masks. 12:19 I've included an article from Baymard Institute in the teacher's notes to learn 12:23 more about converting the user's text to the proper format as they type. 12:28 To allow the user to include delivery instructions, 12:35 I'll create a taller text area input. 12:40 And finally, I'll duplicate and detach an instance 13:16 of my linear gradient asset to create a Submit button with rounded corners. 13:21 I'll label this button carefully. Labeling it Continue to Billing 13:42 should make it clear what step the user will see next upon submit, 13:52 provided they haven't made any errors. 13:56 Since all users do make errors from time to time, 14:12 we'll need to provide clear instructions on how to fix them. 14:16 We'll create error messaging in the next video. 14:21