1 00:00:00,180 --> 00:00:00,840 Welcome back. 2 00:00:00,990 --> 00:00:06,160 So we are here with part two of mobile design best practices. 3 00:00:06,540 --> 00:00:12,430 Now we're going to start off with navigation, so make your products easy to navigate. 4 00:00:12,450 --> 00:00:18,090 I mean, that seems simple, but I mean, the biggest priority of every single app is helping users 5 00:00:18,090 --> 00:00:19,680 navigate everything. 6 00:00:19,680 --> 00:00:24,460 Won't matter if users don't know necessarily how to get to places where they want to go. 7 00:00:24,810 --> 00:00:30,300 So users should be able to browse your product effortlessly while completing all their primary tasks. 8 00:00:30,900 --> 00:00:32,490 So here's an example. 9 00:00:32,670 --> 00:00:34,440 I mean, this is just very easy. 10 00:00:34,470 --> 00:00:36,090 I know this is a home icon. 11 00:00:36,090 --> 00:00:40,770 I know this is some sort of saved or wishlists or whatever icon search profile. 12 00:00:41,160 --> 00:00:43,430 See, this is kind of like search and profile. 13 00:00:43,440 --> 00:00:44,940 So I got a three out of four. 14 00:00:44,940 --> 00:00:45,270 Right. 15 00:00:45,270 --> 00:00:49,600 But I mean, making your product easy to navigate is so key. 16 00:00:50,010 --> 00:00:56,040 Now, the first thing we want to do is, you know, think about standard navigation patterns, whether 17 00:00:56,040 --> 00:00:59,910 that be like a navigation draw a sidebar. 18 00:00:59,910 --> 00:01:04,520 We don't have one here or it could be like a bottom bar iOS like using bottom bars. 19 00:01:04,520 --> 00:01:08,520 So that's another design pattern or a mobile design pattern that we can use. 20 00:01:09,150 --> 00:01:11,370 You know, users are familiar with these types of patterns. 21 00:01:11,370 --> 00:01:13,620 So there's really no need to reinvent the wheel. 22 00:01:13,630 --> 00:01:18,360 Like you don't want to have like some sort of navigation on the right and it being, like vertical or 23 00:01:18,360 --> 00:01:20,430 something crazy like that, it won't work as well. 24 00:01:20,440 --> 00:01:21,510 And that's kind of proven. 25 00:01:22,320 --> 00:01:27,840 The second step is we got to think about the order and that is where we kind of prioritize the different 26 00:01:27,840 --> 00:01:29,970 types of options within your product. 27 00:01:29,980 --> 00:01:35,760 So, you know, in this one, it looks like they've kind of made this much more prominent, like their 28 00:01:35,760 --> 00:01:36,390 filters. 29 00:01:36,390 --> 00:01:39,780 And that's a big it looks like it's a big portion of their application. 30 00:01:39,790 --> 00:01:43,880 So they've ordered it accordingly to where your thumb may actually hit it. 31 00:01:44,220 --> 00:01:45,510 So that's very interesting. 32 00:01:45,510 --> 00:01:49,530 Just in terms of implementation, something I've been thinking about for our application, like maybe 33 00:01:49,530 --> 00:01:54,650 a search can go there and it could pop up a search instead of having search always fixed at the top. 34 00:01:54,960 --> 00:01:56,720 So that's something to definitely think about. 35 00:01:57,810 --> 00:01:59,010 And there it is again. 36 00:01:59,010 --> 00:02:01,140 Consistency hits back its back. 37 00:02:01,380 --> 00:02:05,640 So don't mix navigation patterns in your product you won't always stick to. 38 00:02:05,640 --> 00:02:11,400 One is very confusing if you have something like this and then you implement some sort of draw sidebar. 39 00:02:11,640 --> 00:02:14,820 So stick to one and stick to one only. 40 00:02:15,750 --> 00:02:18,600 The next one is animations and micro interaction. 41 00:02:18,610 --> 00:02:21,930 So these shouldn't be like an afterthought. 42 00:02:21,930 --> 00:02:27,810 You should always be thinking about them, you know, right from the beginning of your design process. 43 00:02:28,170 --> 00:02:29,670 You should kind of be thinking about that. 44 00:02:29,670 --> 00:02:34,340 But also, before you get to High Fidelity designs, think about that as well. 45 00:02:34,920 --> 00:02:39,060 Animations are kind of like that best tool to describe like a state transition. 46 00:02:39,060 --> 00:02:42,780 So as you can see here, just like just the transition really helps. 47 00:02:43,700 --> 00:02:46,330 Let users know exactly what's happening. 48 00:02:47,900 --> 00:02:54,230 So let's take a look at another example, if I'm switching pages, I can see like that state transition 49 00:02:54,230 --> 00:02:58,910 from right to left, I can see which pages I'm going to very easily if we take a step back. 50 00:02:58,910 --> 00:03:04,750 And we think if this were to happen instantaneously, it would be much more confusing for your user. 51 00:03:04,760 --> 00:03:06,900 It would be much more jarring for your user. 52 00:03:07,370 --> 00:03:14,780 So that is one big part of like using micro interactions are just using like animation in general and 53 00:03:14,780 --> 00:03:15,220 motion. 54 00:03:15,620 --> 00:03:17,570 You also want to just stick to the basics. 55 00:03:17,570 --> 00:03:23,150 I mean, you don't want to overcomplicate things by like adding different types of crazy gestures over 56 00:03:23,150 --> 00:03:23,420 here. 57 00:03:23,420 --> 00:03:26,900 We have like just pulls, tops, you know, sliding. 58 00:03:26,910 --> 00:03:29,540 I mean, just the basic stuff is more than enough. 59 00:03:30,140 --> 00:03:33,170 You know, it can be tempting to use a bunch of different available gestures. 60 00:03:33,170 --> 00:03:36,380 But I mean, the learning curve is just way too high in most cases. 61 00:03:36,770 --> 00:03:41,390 And most people are only really familiar with like the basic ones anyways. 62 00:03:41,390 --> 00:03:48,290 So you stick to the basics when it comes to gestures and it'll make just the interactions in your application 63 00:03:48,290 --> 00:03:49,100 much more smoother. 64 00:03:49,610 --> 00:03:54,890 And one thing I really want you to think about is think about when the user comes to your application 65 00:03:54,890 --> 00:04:01,280 or your product for the very first time, you really want to optimize for that because that first time 66 00:04:01,280 --> 00:04:07,010 experience can really make or break like just the user's understanding of your application, even just 67 00:04:07,010 --> 00:04:09,360 the user's feeling about your product. 68 00:04:09,620 --> 00:04:16,230 So it's very important to kind of emphasize how much thought really should go into that experience. 69 00:04:16,750 --> 00:04:22,550 So if your app allows for it or your product allows for it, think about allowing your users to try 70 00:04:22,550 --> 00:04:28,400 your app first without actually having to sign in so they could have like an onboarding screen and then 71 00:04:28,400 --> 00:04:32,870 they could just, like, get started really quickly without necessarily having to go through assignable. 72 00:04:33,410 --> 00:04:38,150 You know, mandatory registration is a common source of friction for users, and it's probably one of 73 00:04:38,150 --> 00:04:43,620 the main reasons users abandon a product and they should only really be asked to sign up if it's essential. 74 00:04:44,000 --> 00:04:45,020 So think about that. 75 00:04:45,020 --> 00:04:50,150 Definitely when you're going through that process, even if we're thinking about our application that 76 00:04:50,150 --> 00:04:55,640 we're building, we want to maybe delay that registration right to the end and let users actually try 77 00:04:55,640 --> 00:04:56,570 our product first. 78 00:04:56,930 --> 00:05:03,410 Also, allowing users to try your product just a bit in the beginning can kind of like get them more 79 00:05:03,410 --> 00:05:09,920 likely to commit in the end if we gently remind them throughout the process to sign up or if users just 80 00:05:09,920 --> 00:05:16,400 like our application overall, it gives them more of an incentive to actually sign up when they would 81 00:05:16,400 --> 00:05:21,140 have just been like behind a wall in the first place and maybe have deleted the application without 82 00:05:21,140 --> 00:05:23,240 wanting to sign up or give us their information. 83 00:05:23,990 --> 00:05:25,790 Your onboarding is so important. 84 00:05:26,150 --> 00:05:27,610 I mean, it should be so smooth. 85 00:05:27,740 --> 00:05:30,760 Make sure your app showcases why users should stay. 86 00:05:31,220 --> 00:05:37,430 So, I mean, whether that be like your value prop is hidden within your onboarding or just teaching 87 00:05:37,430 --> 00:05:45,980 users how easy your app is to use in relation to competition, just make sure that it is a way to kind 88 00:05:45,980 --> 00:05:48,680 of showcase why your app is so important. 89 00:05:49,520 --> 00:05:54,740 These usually are screens that users see when they first come to your product or they can be kind of 90 00:05:54,740 --> 00:05:55,820 contextually based. 91 00:05:56,070 --> 00:06:00,110 If there's like an empty state in your product, there could be a chance to On-Board users to a feature 92 00:06:00,110 --> 00:06:01,580 that they have never used before. 93 00:06:01,610 --> 00:06:06,800 So, I mean, like, whether that be like a drag and drop that's been introduced for the first time, 94 00:06:06,800 --> 00:06:11,420 we can have something that is based just within the app when the users first interact with it. 95 00:06:12,190 --> 00:06:19,010 Also, I think it's really important to kind of create that illusion that your product is really fast. 96 00:06:19,460 --> 00:06:22,370 I mean, loading time is extremely important for mobile users. 97 00:06:22,700 --> 00:06:27,830 If pages take too long to load, users may become really frustrated and maybe decide to leave. 98 00:06:27,830 --> 00:06:29,060 That's a big possibility. 99 00:06:29,720 --> 00:06:34,070 So we want to make it clear that something is loading and the product is loading data. 100 00:06:34,090 --> 00:06:38,600 It's not just a blank or static screen that, you know, runs the risk that users think that something 101 00:06:38,600 --> 00:06:39,350 is frozen. 102 00:06:39,980 --> 00:06:44,990 So many people have animations than you saw when in the beginning with like pulling down and something 103 00:06:44,990 --> 00:06:45,800 was happening on top. 104 00:06:45,800 --> 00:06:46,880 And that's really pleasant. 105 00:06:47,390 --> 00:06:49,790 And it gives the user something interesting to look at in the meantime. 106 00:06:50,330 --> 00:06:53,210 But then we have something like this where they're like kind of like skeleton screens. 107 00:06:53,210 --> 00:06:59,060 And I like using these because they kind of display a blank slate of the screen that is gradually loading 108 00:06:59,060 --> 00:06:59,630 content. 109 00:07:00,080 --> 00:07:05,030 So unlike a loading spinner, the skeleton screen shows progress that the content on their screen is 110 00:07:05,030 --> 00:07:05,930 actually loading. 111 00:07:06,290 --> 00:07:11,150 So this is a really good pattern to use when you're kind of loading results or something like that and 112 00:07:11,150 --> 00:07:12,470 they don't load right away. 113 00:07:13,580 --> 00:07:18,650 And the last best practice would be that this is mobile, not desktop. 114 00:07:18,680 --> 00:07:21,670 Please remember that and we need to optimize for that. 115 00:07:22,100 --> 00:07:25,150 So we need to make sure our content is readable and legible. 116 00:07:25,430 --> 00:07:30,650 You know, we need to optimize for that smaller screen that could be like font sizes. 117 00:07:30,980 --> 00:07:34,550 Generally, anything below 14 pixels is going to be a little hard to read on mobile. 118 00:07:35,240 --> 00:07:36,800 It could even be like font family. 119 00:07:36,800 --> 00:07:38,720 You may need a clear and easy font to read. 120 00:07:38,730 --> 00:07:43,020 So that's just something that we need to think about as well if you need to switch it up. 121 00:07:43,640 --> 00:07:44,930 There's also contrast. 122 00:07:44,960 --> 00:07:50,720 So make sure there is plenty of contrast between foreground and background colors when it comes to typography. 123 00:07:51,020 --> 00:07:53,220 Even a light gray may look OK. 124 00:07:53,420 --> 00:07:55,550 We need to make sure that it's actually accessible. 125 00:07:56,030 --> 00:08:01,190 And we also need to limit the amount of characters on one line because it could be hard to read too 126 00:08:01,190 --> 00:08:04,280 many characters, especially if it's a size 12 pixel font. 127 00:08:04,820 --> 00:08:09,560 Having run right across could be a little harder to read or even smaller than that. 128 00:08:10,220 --> 00:08:13,610 And remember, we're designing for fingers and not cursors. 129 00:08:13,610 --> 00:08:14,030 Like the what? 130 00:08:14,030 --> 00:08:15,410 I'm using a point right now. 131 00:08:15,860 --> 00:08:20,360 It's easy to hit a small button with a cursor, but can you imagine trying to top that with your thumb 132 00:08:20,420 --> 00:08:20,990 over here? 133 00:08:20,990 --> 00:08:28,100 They've done a great job of making things really accessible with larger buttons, larger cards, just 134 00:08:28,100 --> 00:08:33,920 making touch areas easily accessible and more spaced out, like over here on this map, when designing 135 00:08:33,920 --> 00:08:38,810 for those actionable elements on a mobile product, your targets need to be larger so they're just easier 136 00:08:38,930 --> 00:08:39,350 to hit. 137 00:08:39,860 --> 00:08:45,230 You know, mistakes do happen and often because of small UI elements have definitely made that mistake 138 00:08:45,230 --> 00:08:45,830 in the past. 139 00:08:46,490 --> 00:08:50,810 You know, having the right amount of space between elements like this may be a little tight, but having 140 00:08:50,810 --> 00:08:54,590 the right amount of space can really make a big difference if there are too close. 141 00:08:54,590 --> 00:08:58,820 I mean, you kind of run the risk of somebody topping things like think about if you have like a cancel 142 00:08:58,820 --> 00:09:00,560 and a save right beside each other. 143 00:09:00,800 --> 00:09:02,690 I mean, that could be very problematic. 144 00:09:03,140 --> 00:09:06,290 And sure, a lot of people have already seen these screens before. 145 00:09:06,750 --> 00:09:09,230 I mean, there are a bunch of different variations of them. 146 00:09:09,410 --> 00:09:14,870 And this is just essentially reminding us that, you know, there are thum zones and we should do our 147 00:09:14,870 --> 00:09:18,010 best to keep our primary actions in the green. 148 00:09:18,020 --> 00:09:19,760 We don't want to have them up here. 149 00:09:20,450 --> 00:09:24,800 If this is your left hand, is what it would look like if this is combined, you have much more reach. 150 00:09:25,770 --> 00:09:31,140 In terms of if you're using two hands and usually a lot of users with larger phones, you figure out 151 00:09:31,140 --> 00:09:37,800 a way to reach that top area and whether that be with two hands or kind of like maneuvering around with 152 00:09:37,800 --> 00:09:42,450 their hand, they could find a way to do it by means keeping your primary actions within the green. 153 00:09:43,110 --> 00:09:44,720 Just much more success you'll have. 154 00:09:45,330 --> 00:09:48,240 We need to consider like how we hold our devices. 155 00:09:48,250 --> 00:09:51,740 So be very understanding how users will hold them. 156 00:09:52,020 --> 00:09:56,070 But when we do hold them in one hand, like I mentioned before, we don't have much reach. 157 00:09:56,640 --> 00:10:02,700 So these green zones are essentially kind of like your safe zones and you can strategically make sure 158 00:10:02,700 --> 00:10:08,820 that all the elements you want users to actually use, more like your primary actions are within that 159 00:10:08,820 --> 00:10:09,540 thumb reach. 160 00:10:10,320 --> 00:10:15,690 Now, the red zone or yellow zones, those are kind of like your red zones or whatever you want to call 161 00:10:15,690 --> 00:10:15,840 them. 162 00:10:15,840 --> 00:10:17,670 But those are the zones to reach. 163 00:10:17,910 --> 00:10:24,240 And this is probably best suited for keeping like options that you want users to trigger less frequently, 164 00:10:24,570 --> 00:10:26,340 like a delete or cancel. 165 00:10:26,700 --> 00:10:28,140 So maybe think about that. 166 00:10:28,210 --> 00:10:33,150 I know a lot of like iOS devices, especially in the design system, they kind of keep like their cancel 167 00:10:33,150 --> 00:10:37,530 or delete up there and their primary actions may be closer to the bottom as well. 168 00:10:37,710 --> 00:10:40,350 So just think about that when you're designing. 169 00:10:40,470 --> 00:10:45,210 That's why sometimes I like to use as a bottom Tabbaa for navigation if users are going to be navigating 170 00:10:45,210 --> 00:10:46,290 between screens a lot. 171 00:10:46,530 --> 00:10:51,330 That's also why I was thinking about the using like a search at the bottom instead of keeping at the 172 00:10:51,330 --> 00:10:51,810 top. 173 00:10:52,050 --> 00:10:58,710 So remember to stay in the green and that is the last thing I have for everyone. 174 00:10:59,160 --> 00:11:03,780 Those are the practices that I follow in terms of the best practices for mobile design. 175 00:11:03,780 --> 00:11:09,600 And if you follow those as well, I'm sure you're going to be able to design great mobile experiences.