1 00:00:00,550 --> 00:00:01,900 Everyone, and welcome back. 2 00:00:02,290 --> 00:00:05,920 So in this lesson, we're going to be learning about mobile design. 3 00:00:06,870 --> 00:00:12,690 Now, the reason why is because it's so important, especially if you're building a responsive product, 4 00:00:13,090 --> 00:00:17,580 if you're kind of just building a mobile based product similar to what we're doing right now, we're 5 00:00:17,580 --> 00:00:20,140 building a mobile app for our client, habitual. 6 00:00:20,520 --> 00:00:27,330 So I want to take you through the best practices for actually creating mobile design. 7 00:00:28,140 --> 00:00:33,000 Now, we all know one thing, and the difference between a good up in a bad app is the quality of its 8 00:00:33,000 --> 00:00:33,690 experience. 9 00:00:34,680 --> 00:00:39,030 Now, if we think about it, many of us choose our phone for a large portion of the day. 10 00:00:39,030 --> 00:00:43,530 I know like my phone is kind of, you know, replaced my laptop in many ways. 11 00:00:43,950 --> 00:00:47,550 And it's never been more important to design a very good mobile experience. 12 00:00:48,720 --> 00:00:55,380 Mobile users expect a lot from an app, whether that be like delite from, you know, interactions like 13 00:00:55,380 --> 00:01:01,980 this or, you know, fast loading times like how this kind of loaded as well to just general ease of 14 00:01:01,980 --> 00:01:07,880 use, you know, just the clarity of like this mobile design over here and just how easy it is just 15 00:01:08,160 --> 00:01:08,700 to use. 16 00:01:08,700 --> 00:01:12,330 I mean, all these different things make a great user experience. 17 00:01:13,110 --> 00:01:16,530 So let me jump right into those best practices. 18 00:01:18,170 --> 00:01:24,350 You know, no one practices don't make users think I mean, that seems pretty standard. 19 00:01:24,350 --> 00:01:28,630 By mean, a lot of people kind of forget that we don't want to make users think too much. 20 00:01:28,660 --> 00:01:32,640 Your product should really strive to be easy to understand and use. 21 00:01:32,930 --> 00:01:38,210 If your app is too hard to use or understand, you really risk users walking away from your product. 22 00:01:39,230 --> 00:01:45,470 So step one would be to declare I mean, cut away all the unnecessary content is kind of like that one 23 00:01:45,470 --> 00:01:46,910 way to create good design. 24 00:01:47,210 --> 00:01:50,100 I mean, this doesn't necessarily mean it's just for mobile. 25 00:01:50,120 --> 00:01:52,070 I mean, you can do this for desktop as well. 26 00:01:52,340 --> 00:01:53,870 But keep things really simple. 27 00:01:53,870 --> 00:01:56,600 Don't just smack a whole bunch of copy on the screen. 28 00:01:56,600 --> 00:01:59,150 I mean, find ways to hide that or show that. 29 00:01:59,570 --> 00:02:02,960 But don't just make your screen incredibly cluttered. 30 00:02:03,740 --> 00:02:08,450 You know, every extra button or image or paragraph makes your interface seem cluttered. 31 00:02:08,870 --> 00:02:13,820 And because we don't have the screen real estate, I mean, we also need to keep interface elements 32 00:02:13,820 --> 00:02:14,440 to a minimum. 33 00:02:14,690 --> 00:02:16,190 We want to keep our design simple. 34 00:02:16,730 --> 00:02:21,380 You can also practice actually hiding different things under interactions like this. 35 00:02:22,780 --> 00:02:25,180 So that content is hidden. 36 00:02:26,210 --> 00:02:29,360 And it's kind of not cluttering the main home page. 37 00:02:30,810 --> 00:02:36,030 Well, you also want to do is to break tasks up, I mean, if you have, like a form similar to this, 38 00:02:36,540 --> 00:02:41,620 you want to kind of break that process up, especially for mobile, because I mean, we just don't have 39 00:02:41,620 --> 00:02:42,570 the screen real estate. 40 00:02:43,410 --> 00:02:49,380 This is really important, especially because if a flow consists of some sort of logically connected 41 00:02:49,380 --> 00:02:51,320 step, the user can easily use it. 42 00:02:51,940 --> 00:02:55,410 Another best practice practices just to stick to the patterns. 43 00:02:55,440 --> 00:03:00,900 I mean, think about the types of patterns that we normally see on mobile when being something like 44 00:03:01,170 --> 00:03:02,670 onboarding screens. 45 00:03:03,090 --> 00:03:04,340 Stick to those patterns. 46 00:03:04,340 --> 00:03:09,780 And I've kind of been proven and just keep on using them similar to what we covered in design patterns. 47 00:03:10,200 --> 00:03:16,230 Also reuse the elements and screens that users are used to that really decreases the learning curve. 48 00:03:16,240 --> 00:03:21,840 So like home screens are an example setting screens and those are different types of screens that we 49 00:03:21,840 --> 00:03:23,580 all kind of see in a lot of different apps. 50 00:03:23,580 --> 00:03:28,020 And it really helps us understand how to use apps if we see similar screens over and over again. 51 00:03:29,040 --> 00:03:35,040 Over here, we kind of have like a product description screen for a product and just kind of a very 52 00:03:35,040 --> 00:03:38,580 simple e-commerce layout, and this is kind of all very standard. 53 00:03:39,510 --> 00:03:41,710 You want to minimize your users input. 54 00:03:41,730 --> 00:03:43,950 So, I mean, no long forms like over here. 55 00:03:43,950 --> 00:03:45,300 We don't have a very long form. 56 00:03:45,540 --> 00:03:46,680 There's just a couple of options. 57 00:03:46,680 --> 00:03:49,680 And they've also broken it up, it looks like in different steps. 58 00:03:50,070 --> 00:03:52,950 You know, typing on mobile is never really a fun experience. 59 00:03:52,950 --> 00:03:59,280 And, you know, we're often prone to errors and we can really make this process easy by creating forums 60 00:03:59,280 --> 00:04:01,290 as short as possible, like I mentioned before. 61 00:04:01,290 --> 00:04:06,180 But also removing unnecessary fields are very key pre format. 62 00:04:06,930 --> 00:04:12,840 Certain fields like this is a phone number and it really helps to see a pre formatted just because I 63 00:04:12,840 --> 00:04:18,480 mean, if I want to review that content, I can notice the errors right away, especially for things 64 00:04:18,480 --> 00:04:19,610 like even credit cards. 65 00:04:20,220 --> 00:04:24,030 This is an example of like a credit card that is pre formatted as well. 66 00:04:24,360 --> 00:04:28,800 And another thing to do is like, you know, autocomplete were necessary. 67 00:04:28,800 --> 00:04:32,190 I mean, this could be applicable to things like addresses like over here. 68 00:04:33,480 --> 00:04:39,050 This really allows users to enter their address without necessarily having to enter the entire address, 69 00:04:39,990 --> 00:04:43,500 and you should also think about validating your inputs dynamically. 70 00:04:43,510 --> 00:04:48,090 So when users do create an error, they don't necessarily need to go back and go through that interaction 71 00:04:48,090 --> 00:04:48,910 all over again. 72 00:04:49,320 --> 00:04:52,170 They can just correct it while they're actually focused on the input. 73 00:04:53,070 --> 00:04:54,450 Next is consistency. 74 00:04:55,230 --> 00:05:01,020 Now, this is a fundamental principle of design, and it really eliminates a lot of confusion. 75 00:05:01,260 --> 00:05:07,310 It is essential like visual consistency, like typeface, buttons, labels, color. 76 00:05:07,530 --> 00:05:12,500 It can mean like functional consistency, interactive elements across the app works similarly. 77 00:05:12,750 --> 00:05:18,720 So that could be like buttons a will move you in a certain way, are swiping can move you to a new page 78 00:05:18,720 --> 00:05:21,780 or the navigation is very consistent. 79 00:05:22,300 --> 00:05:27,870 I mean, we're thinking about all these different things, even platform guidelines like iOS and Android 80 00:05:27,870 --> 00:05:29,730 design systems like using that. 81 00:05:29,730 --> 00:05:33,360 Like if you have two separate apps for both, I mean, you don't need to do that. 82 00:05:33,360 --> 00:05:39,090 But say if you're creating an application for Android phones, you kind of want to stick to Google's 83 00:05:39,090 --> 00:05:44,730 material design for a lot of those different types of design parents, because usually users are more 84 00:05:44,730 --> 00:05:50,610 familiar with that in comparison to something like on iOS, where those design systems are really different. 85 00:05:51,900 --> 00:05:56,910 Next, you want to give users as much control or the illusion of control. 86 00:05:57,880 --> 00:06:02,260 So this can mean like just understanding where things are going. 87 00:06:02,320 --> 00:06:08,110 Understanding how things work and that's this overall predictability, you know, all interactive elements 88 00:06:08,110 --> 00:06:12,910 should be familiar and predictable when things work in the way you just predict and the kind of sense 89 00:06:12,910 --> 00:06:13,780 that feeling of control. 90 00:06:13,810 --> 00:06:18,610 So on mobile, we don't necessarily only have one way of interacting with an element to understand the 91 00:06:18,610 --> 00:06:19,940 type of feedback they'll introduce. 92 00:06:19,940 --> 00:06:24,790 So if we stick to familiar patterns, our users will really understand how our system works already. 93 00:06:25,790 --> 00:06:32,000 So, I mean, if we notice, like we have cards, that's a big example of like a pattern, just cards 94 00:06:32,000 --> 00:06:36,590 in general, we we know we can kind of tap them, like in this case to their very faint. 95 00:06:36,590 --> 00:06:38,900 But we know that I can probably just tap on that. 96 00:06:38,900 --> 00:06:41,780 And it's very familiar to me in the way that input is. 97 00:06:42,470 --> 00:06:46,630 I know that this is like a menu of some sort. 98 00:06:46,640 --> 00:06:52,280 So, I mean, introducing that sense of predictability really makes your application much more easier 99 00:06:52,280 --> 00:06:52,730 to use. 100 00:06:53,330 --> 00:06:57,320 Now, we're going to stop here and we're going to pick up on navigation when we come back.