Delivery Information screen14:25 with Anwar Montasir
Let’s take a look at the mockup of the form we’ll be building–a mobile food delivery checkout form for a restaurant called Tacos By Roscoe. I’m concentrating on getting just the first screen right, for gathering the user’s delivery information. I’ve included an error reporting screen as well.
Using the Project Files
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
You need to sign up for Treehouse in order to download course files.Sign up